Home forums Using CanvasJS chart.options.data.push() error

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #28797

    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

    #28803

    @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

    #28805

    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?

    #28826

    @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

    #28839

    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

    #28877

    @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

    #28885

    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

    #28916

    @dudanesk,

    Glad that it worked for you :)


    Manoj Mohan
    Team CanvasJS

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.