ChartJS创建图表Ajax

Question

I have followed the example on the chartJS website and have placed the following code in window.onload:

ctx = document.getElementById("graphcanvas").getContext("2d");      
window.myBar = new Chart(ctx).Bar(barChartData, {
    responsive : true
});

... which works perfectly fine as when i click my button to display the popup window, the bar chart with dummy data is shown.

In my function i have taken a copy of the dummy data and modified it slightly so a difference can be seen.

In my function i have the following code:

ctx = document.getElementById("graphcanvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartDataDiff, {
    responsive : true
});

... but for some reason when this code is run the popup window which previously contained my bar chart is now empty, the bar chart disappears.

I have tried adding .destroy() before recreating the chart and using 'myBar' instead of 'window.myBar' but nothing seems to work.

Answer 1

Why don't you create the graph with dummy data (hidden on load) and then use chart js's update method to insert that data into the 'barChartData' ?

1. create graph, hide it
2. chart.update() with the new data
3. show the graph