Home Forums Chart Support Plot chart with data JSON labels and float

Plot chart with data JSON labels and float

Viewing 3 posts - 1 through 3 (of 3 total)
  • #24578

    Hello,

    My json data looks like this;

    [{“platform”: “IPTV”, “value__sum”: “100000.00”}, {“platform”: “metro”, “value__sum”: “32141302.50”}, {“platform”: “METRO E”, “value__sum”: “39231261.70”}, {“platform”: “EDGE”, “value__sum”: “74179073.63”}, {“platform”: “SYSTEM”, “value__sum”: “135498372.85”}, {“platform”: “IPCORE”, “value__sum”: “467810178.41”}]

    and script as below:

    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    window.onload = function() {
    
    var dataPoints = [];
    
    var options =  {
      animationEnabled: true,
      theme: "light2",
      title: {
        text: "Contract Value of Platform"
      },
      // axisX: {
      //   valueFormatString: "string",
      // },
      axisY: {
        title: "$",
        titleFontSize: 24,
        includeZero: false
      },
      data: [{
        type: "spline", 
        yValueFormatString: "$#,###.##",
        dataPoints: dataPoints
      }]
    };
    
    function addData(data) {
      
      for (var i = 0; i < data.length; i++) {
        dataPoints.push({
          label:data[i].platform,
          y: data[i].value__sum
        });
        console.log(data)
      }
      console.log(data)
      $("#chartContainer").CanvasJSChart(options);
    
    }
    
    
    
    $.getJSON("http://127.0.0.1:8000/json/", addData);
    
       
    }
    </script>
    </head>
    <body>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
    </body>
    </html>

    I’m unable to plot the chart even though data already captured in console.
    Appreciate if you could fix the code.
    Thank you very much

    #24579

    @gjoe,

    Datapoint y-value can be a numeric. As you are storing it as a string in your JSON, parsing it to number before passing it to chart-options should work fine in this case y: Number(data[i].value__sum).

    Please take a look at this JSFiddle.


    Vishwas R
    Team CanvasJS

    #24580

    Thank you very much. Work like charm
    Btw, hope i can see more sample using json data as that format is among the most common data

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

You must be logged in to reply to this topic.