chartjs creating data array dynamically

Question

Im creating a Pie chart using chartjs library, and Im wondering how I could represent the values the will be need to render the chart dynamically,

In chartjs.org tutorial the array of data is represented like this

var data = [
        {
           value: 300,
           color:"#F7464A",
           highlight: "#FF5A5E",
           labelColor : 'white',
           labelFontSize : '16'
        },
        {
            value: 100,
            color: "#46BFBD",
            highlight: "#5AD3D1",           
            labelColor : 'white',
            labelFontSize : '16'
        },
        {
            value: 100,
            color: "#FDB45C",
            highlight: "#FFC870",
            labelColor : 'white',
            labelFontSize : '16'
        }
    ]

and data will be pass as an argument to render the chart

new Chart(ctx).Pie(data);

this then renders a chart with 3 partitions:

But say I want to render X partitions, how can i make an array of data?

would I be able to do in a loop and append it to data?

Code so far:

function drawPie(ctx){

            var newopts = {
                inGraphDataShow: true,
                inGraphDataRadiusPosition: 2,
                inGraphDataFontColor: 'white',
            }

            //=========
            // this should be dynamic (data will come the parameter)
            //==========
            var data = [
            {
                value: 300,
                color:"#F7464A",
                highlight: "#FF5A5E",

                labelColor : 'white',
                 labelFontSize : '16'
            },
            {
                value: 100,
                color: "#46BFBD",
                highlight: "#5AD3D1",           

                labelColor : 'white',
                labelFontSize : '16'
            },
            {
                value: 100,
                color: "#FDB45C",
                highlight: "#FFC870",

                 labelColor : 'white',
                 labelFontSize : '16'
            }
        ]

        new Chart(ctx).Pie(data, newopts);

}

Hello i am stuck at same situation and i see the solution given but not able to understand the soltuion without the whole code and also the link given " Fiddle - jsfiddle.net/k4ztyqzc " is also not showing desired output. Can i get whole source code — Samarth Janardhan
– Samarth Janardhan, Commented Mar 22, 2020 at 21:29

potatopeelings · Accepted Answer · 2015-10-19 11:56:01Z

1

You just need to generate the data structure in the way Chart.js expects for a pie chart and if you don't know the maximum number of element generate the colors (if you know the maximum number of elements, you could just pick it from a color array). For instance

var dynamicData = [
    { label: "One", value: 23 },
    { label: "Two", value: 33 },
    { label: "Three", value: 43 },
    { label: "Four", value: 53 },
]

dynamicData.forEach(function (e, i) {
    e.color = "hsl(" + (i / dynamicData.length * 360) + ", 50%, 50%)";
    e.highlight = "hsl(" + (i / dynamicData.length * 360) + ", 50%, 70%)";
    // + any other code you need to make your element into a chart.js pie element
})

var ctx = document.getElementById("myChart").getContext("2d");
var myPieChart = new Chart(ctx).Pie(dynamicData);

Fiddle - http://jsfiddle.net/k4ztyqzc/

answered Oct 19, 2015 at 11:56

potatopeelings

41.2k8 gold badges97 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

XDProgrammer Over a year ago

thanks, works great.!! can u explain more has this lines works

e.color = "hsl(" + (i / dynamicData.length * 360) + ", 50%, 50%)";     e.highlight = "hsl(" + (i / dynamicData.length * 360) + ", 50%, 70%)";

seems like the colors are not randomly generated.

potatopeelings Over a year ago

Sure. What we are doing is picking the hue values off a 360 degree scale (so if there are 2 points we pick at 0 and 180, if there are 3 - 0, 120, 240...). HSL (Hue Saturation Luminosity) is an alternative to RGB values.

Reddy SK Over a year ago

Hi, I am getting error TypeError: (intermediate value).Pie is not a function. I have tried to use it by: var myChart = new Chart(ctx, {type: 'doughnut',data: dynamicData,});. Now it is not reporting error but neither draw the graph, even if I will use type: 'pie',.

potatopeelings Over a year ago

@ReddySK - you might want to set up a fiddle or post a new question (I would guess the javascript tag would be better from your error message). Cheers!

Reddy SK Over a year ago

@potatopeelings I found the root cause. the problem was that I am using chartjs v2 which have changed the syntax.

Collectives™ on Stack Overflow

chartjs creating data array dynamically

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related