chart.options.data.push() error

[dudanesk]

Hello,
I’m running into an error when using the function chart.options.data.push()
Here’s a simplified version of my code: jsfiddle

And here’s the error I get:
canvasjs.min.js:100 Uncaught TypeError: Cannot use ‘in’ operator to search for ‘name’ in {type: “column”, name: “2016”, showInLegend: true, markerType: “square”, markerSize: 5, yValueFormatString: “#,##0.##” miles””, dataPoints: [{“label”:”january”,”y”:0},{“label”:”february”,”y”:0},{“label”:”march”,”y”:0},{“label”:”april”,”y”:0},{“label”:”may”,”y”:0},{“label”:”june”,”y”:0},{“label”:”july”,”y”:0},{“label”:”august”,”y”:34.62},{“label”:”september”,”y”:83.38},{“label”:”october”,”y”:62.35},{“label”:”november”,”y”:60},{“label”:”december”,”y”:0}]},
at H.V.setOptions (canvasjs.min.js:100)
at H.V (canvasjs.min.js:32)
at new H (canvasjs.min.js:137)
at m._initialize (canvasjs.min.js:177)
at m.render (canvasjs.min.js:208)
at HTMLSelectElement.<anonymous> (profile.php?athleteID=17177373:269)
at HTMLSelectElement.dispatch (jquery-3.4.1.js:5237)
at HTMLSelectElement.elemData.handle (jquery-3.4.1.js:5044)

If I copy/paste what I have in my chart.options.data.push() function into “Data: []” when creating the chart, then it works fine so I’m guessing the syntax of my data serie is correct

[Manoj Mohan]

@dudanesk,

DataSeries is an object where you can define all the dataPoints to be plotted and also control various properties like type, color, events, etc. It seems that you are passing dataSeries as a string instead of an object. Passing it as an object should work fine in your case. Please take a look at this updated JSFiddle.

—-
Manoj Mohan
Team CanvasJS

[dudanesk]

Thanks a lot for your help Manoj.
The JSFiddle I created was a simplified version of my code and, while I do understand your answer (object vs string), I still have a hard time implementing this solution in my actual code. I think I’m going down the wrong path and need to be shown the right way to do that. Let me try to explain what I’m doing:
I’m actually getting my series from ajax. The value returned by my ajax query contains a set of different series and looks like that:

{type: “column”, name: “2016”, showInLegend: true, markerType: “square”, markerSize: 5, yValueFormatString: “#,##0.##\” miles\””, dataPoints: [{“label”:”january”,”y”:0},{“label”:”february”,”y”:0},{“label”:”march”,”y”:0},{“label”:”april”,”y”:0},{“label”:”may”,”y”:0},{“label”:”june”,”y”:0},{“label”:”july”,”y”:0},{“label”:”august”,”y”:34.62},{“label”:”september”,”y”:83.38},{“label”:”october”,”y”:62.35},{“label”:”november”,”y”:60},{“label”:”december”,”y”:0}]},{type: “column”, name: “2017”, showInLegend: true, markerType: “square”, markerSize: 5, yValueFormatString: “#,##0.##\” miles\””, dataPoints: [{“label”:”january”,”y”:12.2},{“label”:”february”,”y”:76.13},{“label”:”march”,”y”:52.05},{“label”:”april”,”y”:53.64},{“label”:”may”,”y”:121.1},{“label”:”june”,”y”:161.47},{“label”:”july”,”y”:138.4},{“label”:”august”,”y”:62.85},{“label”:”september”,”y”:83.79},{“label”:”october”,”y”:105.8},{“label”:”november”,”y”:46},{“label”:”december”,”y”:9.35}]},
{type: “column”, name: “2018”, showInLegend: true, markerType: “square”, markerSize: 5, yValueFormatString: “#,##0.##\” miles\””, dataPoints: [{“label”:”january”,”y”:26.41},{“label”:”february”,”y”:30.69},{“label”:”march”,”y”:36.24},{“label”:”april”,”y”:0},{“label”:”may”,”y”:46.24},{“label”:”june”,”y”:234.75},{“label”:”july”,”y”:120.01},{“label”:”august”,”y”:90},{“label”:”september”,”y”:33.05},{“label”:”october”,”y”:58.11},{“label”:”november”,”y”:70.8},{“label”:”december”,”y”:52.84}]},
{type: “column”, name: “2019”, showInLegend: true, markerType: “square”, markerSize: 5, yValueFormatString: “#,##0.##\” miles\””, dataPoints: [{“label”:”january”,”y”:42.11},{“label”:”february”,”y”:7.29},{“label”:”march”,”y”:45.55},{“label”:”april”,”y”:76.4},{“label”:”may”,”y”:112.1},{“label”:”june”,”y”:312.27},{“label”:”july”,”y”:122.1},{“label”:”august”,”y”:13.53},{“label”:”september”,”y”:50.63},{“label”:”october”,”y”:72.14},{“label”:”november”,”y”:166.51},{“label”:”december”,”y”:73.95}]},
{type: “column”, name: “2020”, showInLegend: true, markerType: “square”, markerSize: 5, yValueFormatString: “#,##0.##\” miles\””, dataPoints: [{“label”:”january”,”y”:68.73},{“label”:”february”,”y”:135.42},{“label”:”march”,”y”:114.8},{“label”:”april”,”y”:0},{“label”:”may”,”y”:0},{“label”:”june”,”y”:0},{“label”:”july”,”y”:0},{“label”:”august”,”y”:0},{“label”:”september”,”y”:0},{“label”:”october”,”y”:0},{“label”:”november”,”y”:0},{“label”:”december”,”y”:0}]},

Here, I have a set of 5 series, but it can be more or it can be less.
What I want to do is to update my chart with those series. My limited coding skills are getting me nowhere

$.ajax({
url: “testAjax.php”,
type: “POST”,
data: {
activityType: activityTypeSelected
},
success: function (data) {
var result = JSON.parse(data);
}
});

From there, how do I use “result” to update my already existing chart?

[Manoj Mohan]

@dudanesk,

Can you kindly create a sample project and share it with us over Google-Drive or Onedrive, along with sample data, so that we can run it locally to understand the scenario better and help you out?

____
Manoj Mohan
Team CanvasJS

[dudanesk]

I’ve tried to recreate my situation here jsfiddle
I am getting my series from ajax and database but here my dataseries in the ajax file were filled manually to represent what it’s returning. And what it is returning is 5 sets of multiple series (here, each set has 5 data series, but it can be more or less). I want to create a chart that will display one set of data series at a time depending on what the user selects in a select tag. Thank you so much for your help

[Manoj Mohan]

@dudanesk,

Replacing string with an object in your PHP file should work fine in your case.. Please take a look at this sample project which renders the chart using data being fetched from a PHP file.

—-
Manoj Mohan
Team CanvasJS

[dudanesk]

Ok, now I’m going somewhere. Thanks a lot Manoj.
I did have to replace the line “chart.data.push(data[i]);” with this “chart.options.data.push(data[i]);” and I got exactly what I was looking for. Thanks again

[Manoj Mohan]

@dudanesk,

Glad that it worked for you :)

—
Manoj Mohan
Team CanvasJS