CODEWITHSUNDEEP
javascriptchart.js
Sabba
Sabba

Reputation: 257

AddData in Chart.js 2.0

I am trying to create a double-Y-axis with Chart.js 2.0. I saw in documentation that AddData works as in Chart.js 1.0. But when I run on browser I get the message "xxxxxxxx.AddData is not a function".

If can help this is the cose I am using https://jsfiddle.net/96u30Lht/ (I cannot find an url to chart.js 2 lib in my fiddle as a resource file this should be the reason why the canvas stays black)

Upvotes: 2

Views: 4901

Answers (1)

potatopeelings
potatopeelings

Reputation: 41075

I'm using v2.0.0 from the dev branch (the file header reads 2.0.0-alpha, and the file I'm looking at is https://github.com/nnnick/Chart.js/blob/f3eb6f4a433b4f34a582842dcf7b42f710861a7d/Chart.js)

You need to make a few changes to get your fiddle to work

Make the Chart Type an Option

I think v2.0 has only one constructor for all chart types. So

chartdata = new Chart(ctx).Line({

should be

chartdata = new Chart(ctx, {
    type: "line",

Add a Type for the 2nd y-axis

scaleType: "linear"

to 

type: "linear",

type is the property name. It doesn't cause any problem for the first y axis since it's optional there (your scaleType: "linear" on the first instance doesn't actually do anything and you can drop it)

Remove the window.onload

Your fiddle is already set to execute onLoad

Change the Method Signature

As far as I could see from the code, the method signature has changed for addData. It is now as follows (From the code) - note that this could change anytime

// Add data to the given dataset
// @param data: the data to add
// @param {Number} datasetIndex : the index of the dataset to add to
// @param {Number} index : the index of the data
addData: function addData(data, datasetIndex, index)

So a better version of your setInterval would be

setInterval(function () {
    var latestlabel = chartlabel[6];

    chartdata.addData(12, 0, latestlabel);
    chartdata.addData(5, 1, latestlabel);
    chartdata.removeData(0, 0);
    chartdata.removeData(1, 0);

}, 7000);

https://jsfiddle.net/bsgc9tu7/

Upvotes: 2

Related Questions