Pie, Doughnut, and Polar charts not working.
Anyoks opened this issue · comments
Hallo.
I have a strange problem. My Pie, doughtnut and Polar charts aren't receiving data therefore they don't render.
This is the controller code.
@data = {
labels: "May",
datasets: [
{
data: 4
backgroundColor: "#FF6384",
hoverBackgroundColor: "#FF6384"
}
]
}
@options = {}
Here's the view:
= pie_chart @data, @options
I don't get any errors at all. And the Javascript code doesn't have the datasets as do the others (line chart etc). The other charts work properly. Any idea on what might be the problem?
Below is a screenshot of a working chart js, it has the datasets
attribute that is missing in the three charts that don't work.
Thanks for your assistance!
Do the values for data
, backgroundColor
and hoverBackgroundColor
need to be arrays?
And labels
too?
That's what Chartjs says. See,
var data = {
labels: [
"Red",
"Green",
"Yellow"
],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
Exactly. The controller code you posted doesn't use arrays for the values.
Sorry, actually it does, I replaced the values quickly and forgot to add the arrays. This is the right code. It still doesn't work.
@data = {
labels: "May",
datasets: [
{
data: 4
backgroundColor: "#FF6384",
hoverBackgroundColor: "#FF6384"
}
]
}
@options = {}
Sorry to go on about arrays but it's still not clear to me whether this works or not:
@data = {
labels: ["May"],
datasets: [
{
data: [4]
backgroundColor: ["#FF6384"],
hoverBackgroundColor: ["#FF6384"]
}
]
}
@options = {}
I am also having the same issue. Pie chart isn't showing up.
@graph_data_categories = {
labels: ["BioTech", "Consumer Goods"],
datasets: [
{
backgroundColor: ["#FF6384", "#36A2EB"],
hoverBackgroundColor: ["#FF6384", "#36A2EB"],
data: [4, 2]
}
]
}
<figure class="chart">
<canvas height="200" id="investment_categories_graph" width="400" style="width: 400px; height: 200px;"></canvas>
</figure>
<script type="text/javascript">
//<![CDATA[
(function() { var initChart = function() { window.Chart && window.Chart["investment_categories_graph"] && window.Chart["investment_categories_graph"].destroy(); var data = {"labels":["BioTech","Consumer Goods"],"datasets":[{"fillColor":["#FF6384","#36A2EB"],"data":[4,2]}]}; var opts = {}; opts["onAnimationComplete"] = function(){}; opts["onAnimationProgress"] = function(){}; if (!("animation" in opts)) { opts["animation"] = (typeof Modernizr == "undefined") || Modernizr.canvas; } var canvas = document.getElementById("investment_categories_graph"); var ctx = canvas.getContext('2d'); var chart = new Chart(ctx).Pie(data, opts); window.Chart["investment_categories_graph"] = chart; }; if (typeof Chart !== "undefined" && Chart !== null) { initChart(); } else { /* W3C standard */ if (window.addEventListener) { window.addEventListener("load", initChart, false); } /* IE */ else if (window.attachEvent) { window.attachEvent("onload", initChart); } } })();
//]]>
</script>
@Anyoks did you ever get the pie charts to work for you?
I'm away this week but will take a look when I'm back.
BTW the plugin isn't using Chart.js 2 yet...
On 31 May 2016, at 18:59, Curtis Ovard notifications@github.com wrote:
@airblade it doesn't look like the array works. I have been trying to get the bar chart to change color and it stays this gray color.
@graph_data_amounts = {
labels: investments_hsh.keys,
datasets: [
{
label: "Investment Amounts Per Month",
backgroundColor: ["#FF6384"],
hoverBackgroundColor: ["#FF6384"],
data: investments_hsh.values
}
]
}
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
I think the problem is that pie charts need the data in a different format from line charts.
Looking at the pie chart docs for v1.0.2, data
needs to look like:
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
]
This is different from the v2 format.
I think if you change your data format around the pie chart will work.
In the meantime I'm going to upgrade the Chart.js bundled with this gem (so you won't need to change around your data).
I've upgraded the plugin (v3.0.0) to use Chart.js v2.1.4 – which should make your code work now.
Let me know if you still have problems and I'll reopen this issue.
@Anyoks Oops, I overlooked the pie chart. It's restored in v3.0.2.