CODEWITHSUNDEEP
javascriptjquerychartist.js
Showkath
Showkath

Reputation: 99

How to add data to chart dynamically

I am new to jQuery so not sure how to specify the chart values dynamically. Please see static values below and I want to set them at run time. (I need to set values for "lables" and "series" from database). 

var lineArea2 = new Chartist.Line('#line-area2', {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    series: [
        [5, 30, 25, 55, 45, 65, 60, 105, 80, 110, 120, 150],
        [80, 95, 87, 155, 140, 147, 130, 180, 160, 175, 165, 200]
    ]
}, {
        showArea: true,
        fullWidth: true,
        lineSmooth: Chartist.Interpolation.none(),
        axisX: {
            showGrid: false,
        },
        axisY: {
            low: 0,
            scaleMinSpace: 50,
        }
    },
    [
        ['screen and (max-width: 640px) and (min-width: 381px)', {
            axisX: {
                labelInterpolationFnc: function (value, index) {
                    return index % 2 === 0 ? value : null;
                }
            }
        }],
        ['screen and (max-width: 380px)', {
            axisX: {
                labelInterpolationFnc: function (value, index) {
                    return index % 3 === 0 ? value : null;
                }
            }
        }]
    ]);

Upvotes: 0

Views: 1712

Answers (2)

Divyesh
Divyesh

Reputation: 161

You can use below javascript code to put dynamic data on chart.

var seriesVals = [];
var labelsVals = [];
for(var i = 0; i < response.data.length; i++)
{
seriesVals.push(response.data[i].Points);
labelsVals.push(response.data[i].Team);
}

var chart = new Chartist.Pie('.ct-chart', {
                      series: seriesVals,
                      labels: labelsVals
                    }, {
                      donut: true,
                      showLabel: true
                    });

Upvotes: 0

hifebriansyah
hifebriansyah

Reputation: 341

I never using chartist.js but i found the documentation, as far my understanding you actually can update the data using Chartist.Base update()

https://gionkunz.github.io/chartist-js/api-documentation.html#chartistbase-function-update

hopefully it can help you in some way.. have a nice day.

Upvotes: 0

Related Questions