I have Stacked Horizontal Bar chart on a single page, and each chart changes based on what the user selects (Drop Down Select). I have an ajax call that retrieves the data, so the data varies and is dynamic based on user selection. I'm having a problem clearing out old data. If there is no data it should display Horizontal Bar chart. But it displays previous data. it is not getting empty if there is no data. Basically, I just want after each selection to re-initialize the chart and start from scratch. How can I do that?
<script type = "text/javascript" >
var series;
$("#sub_project3").change(function() {
$.ajax({
url: "<?php echo base_url("
Manage_procurement_plan / load_bar_chart ");?>",
type: "POST",
data: {
drop_value: $(this).val()
},
dataType: "text",
cache: false,
success: function(data) {
series = data;
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
var app = {};
var option;
getBarGraph(series);
function getBarGraph(data) {
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
top: '3%',
},
grid: {
top: '28%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'value',
},
yAxis: {
type: 'category',
data: ['Actual Avg', 'ADB Min Standard']
},
series: JSON.parse(data),
};
/*if (option && typeof option === 'object') {
myChart.setOption(option);
}*/
myChart.setOption(option);
}
}
});
});
</script>
Each time you make a new selection, you can 're-initialize' your series (make it an empty list) before pushing new data inside it. So if there is no data, the series will remain empty.
Then, you can update your chart using notMerge = true. According to echarts doc :
notMerge Optional. Whether not to merge with previous option.
falseby default, means merge, see more details in Component Merging Modes. Iftrueall of the current components will be removed and new components will be created according to the new option.
myChart.setOption(option, true);