Uncaught TypeError: Cannot read property 'draw' of undefined
Closed this issue · 6 comments
bcackerman commented
Seem to be getting that error using your default data. Here's the script that's being inserted.
<figure class="chart"><canvas height="400" id="chart-0" width="400"></canvas></figure><script type="text/javascript">
//<![CDATA[
(function() { var initChart = function() { var data = {labels: {"labels":["January","February","March","April","May","June","July"],"datasets":[{"fillColor":"rgba(220,220,220,0.5)","strokeColor":"rgba(220,220,220,1)","pointColor":"rgba(220,220,220,1)","pointStrokeColor":"#fff","data":[65,59,90,81,56,55,40]},{"fillColor":"rgba(151,187,205,0.5)","strokeColor":"rgba(151,187,205,1)","pointColor":"rgba(151,187,205,1)","pointStrokeColor":"#fff","data":[28,48,40,19,96,27,100]}]}, datasets: {}}; var opts = {}; if (!("animation" in opts)) { opts["animation"] = (typeof Modernizr == "undefined") || Modernizr.canvas; } var canvas = document.getElementById("chart-0"); var ctx = canvas.getContext('2d'); var chart = new Chart(ctx).Line(data, opts); window.Chart["chart-0"] = chart; var legend = chart.generateLegend(); if (legend.trim().length > 0) { var legendHolder = document.createElement("div"); legendHolder.innerHTML = legend; canvas.parentNode.insertBefore(legendHolder.firstChild, canvas.nextSibling); } }; /* W3C standard */ if (window.addEventListener) { window.addEventListener("load", initChart, false); } /* IE */ else if (window.attachEvent) { window.attachEvent("onload", initChart); } })();
//]]>
</script>
airblade commented
The problem is there are extra labels and datasets objects in the script above:
(function() {
var initChart = function() {
var data = {
- labels: {
"labels":["January","February","March","April","May","June","July"],
"datasets":[
{
"fillColor":"rgba(220,220,220,0.5)",
"strokeColor":"rgba(220,220,220,1)",
"pointColor":"rgba(220,220,220,1)",
"pointStrokeColor":"#fff",
"data":[65,59,90,81,56,55,40]
},
{
"fillColor":"rgba(151,187,205,0.5)",
"strokeColor":"rgba(151,187,205,1)",
"pointColor":"rgba(151,187,205,1)",
"pointStrokeColor":"#fff",
"data":[28,48,40,19,96,27,100]
}
]
- },
- datasets: {}
};How did you generate the snippet you posted?
bcackerman commented
Interesting, I just copied and pasted the ruby example here https://github.com/airblade/chartjs-ror#charts-with-multiple-datasets
bcackerman commented
@d = { labels: ["January","February","March","April","May","June","July"],
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [65,59,90,81,56,55,40]
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28,48,40,19,96,27,100]
}
]
}
= line_chart @d, {}
bcackerman commented
Ah ok so following this example works instead = line_chart @labels, @datasets, options thanks!
@labels = ["January","February","March","April","May","June","July"]
@datasets = [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [65,59,90,81,56,55,40]
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28,48,40,19,96,27,100]
}]
airblade commented
Aha, it turns out Chart.js's rewrite changed the interface for the line, bar and radar charts. Now all the charts have the same interface, e.g. new Chart(ctx).Line(data, options);
– where data includes the labels and datasets.
I'll update chartjs-ror to make it consistent.