FORUMS

Select any forum below to ask question

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

Plot chart with data JSON labels and float

  • This topic has 2 replies, 2 voices, and was last updated 4 years ago by gjoe.
Viewing 3 posts - 1 through 3 (of 3 total)

Tagged: ,

  • March 8, 2019 at 9:05 am #24578

    gjoe

    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

    March 8, 2019 at 12:40 pm #24579

    Vishwas R

    @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

    March 8, 2019 at 12:54 pm #24580

    gjoe

    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)

Tagged: ,

You must be logged in to reply to this topic.