Pie, Doughnut, and Polar charts not working.

[Dennis Orina]

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!

[Andy Stewart]

Do the values for data, backgroundColor and hoverBackgroundColor need to be arrays?

And labels too?

[Dennis Orina]

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"
            ]
        }]
};

[Andy Stewart]

Exactly. The controller code you posted doesn't use arrays for the values.

[Dennis Orina]

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 = {}

[Andy Stewart]

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 = {}

[Curtis Ovard]

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>

[Curtis Ovard]

@Anyoks did you ever get the pie charts to work for you?

[Andy Stewart]

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 [e-mail] 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.

[Dennis Orina]

@airblade the pie chart with data: [4] as you asked doesn't work.
Seems to me that @covard has the exact problem as I do.
@covard Not yet. The pie chart doesn't show up. It's so strange. Did you get a solution? I'm kinda stuck.

[Curtis Ovard]

@airblade ok great thanks for work on this gem.

@Anyoks no for now I'm just hiding the pie chart until it's working.

[Andy Stewart]

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).

[Andy Stewart]

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.

[Dennis Orina]

Hey! Thanks a lot. All charts work like a charm!

But, I get an undefined method "pie_chart" for #<#<Class:0x007f86444ec538>:0x007f8644fcbb70>
for some strange reason. Did you change the method used to call the pie_chart?

[Andy Stewart]

@Anyoks Oops, I overlooked the pie chart. It's restored in v3.0.2.