Home forums Using CanvasJS Plot chart with data JSON labels and float

Tagged: ,

This topic contains 2 replies, has 2 voices, and was last updated by  gjoe 6 months, 1 week ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #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.