Home forums Using CanvasJS STATIC TO DYNAMIC CONVERSION

This topic contains 2 replies, has 2 voices, and was last updated by  Hemel619619 2 months, 2 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #22119

    Hemel619619
    Member

    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    window.onload = function () {

    var chart = new CanvasJS.Chart(“chartContainer”, {
    animationEnabled: true,
    theme:”dark2″,

    title:{
    text: “TIME vs. # of start phone calls”
    },

    axisY :{
    includeZero: true,
    title: “# of start phone calls”,
    suffix: “%”
    },

    toolTip: {
    shared: true
    },

    legend: {
    cursor:”pointer”,
    itemclick: toggleDataSeries
    },

    data: [{
    type: “column”,
    name: “PERIODIC”,
    legendText: “PERIODIC”,
    showInLegend: true,
    yValueFormatString: “#,##0\”%\””,
    dataPoints:
    [
    { label: “6am – 10am”, y: 10 },
    { label: “10am – 4pm”, y: 30 },
    { label: “4pm – 8pm”, y: 55 },
    { label: “8pm – 12am”, y: 80 },
    { label: “12pm – 6am”, y: 75 }

    ]
    },

    {
    type: “column”,
    name: “VOICE CALL”,
    legendText: “VOICE CALL”,
    showInLegend: true,
    yValueFormatString: “#,##0\”%\””,
    dataPoints:
    [
    { label: “6am – 10am”, y: 50 },
    { label: “10am – 4pm”, y: 60 },
    { label: “4pm – 8pm”, y: 57 },
    { label: “8pm – 12am”, y: 80 },
    { label: “12pm – 6am”, y: 90 }
    ]
    },

    {
    type: “column”,
    name: “LOCATION CHANGE”,
    legendText: “LOCATION CHANGE”,
    showInLegend: true,
    yValueFormatString: “#,##0\”%\””,
    dataPoints:
    [

    { label: “6am – 10am”, y: 60 },
    { label: “10am – 4pm”, y: 90 },
    { label: “4pm – 8pm”, y: 65 },
    { label: “8pm – 12am”, y: 20 },
    { label: “12pm – 6am”, y: 15 }
    ]

    }]
    });
    chart.render();

    function toggleDataSeries(e) {
    if (typeof(e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    }
    else {
    e.dataSeries.visible = true;
    }
    chart.render();
    }

    }
    </script>
    </head>
    <body>
    <div id=”chartContainer” style=”height: 600px; width: 100%;”></div>
    <script src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script>
    </body>
    </html>

    In this code I want to make a change so that EXTERNAL JSON DATA can fetch through jquery and generate this graph using JSON DATA! How can I do this? please let me know.

    #22124

    Vishwas R
    Keymaster

    @hemel619619,

    Please take a look at this jsfiddle for an example on rendering multi-series chart from JSON.

    If this doesn’t help you out, kindly create jsfiddle reproducing the issue so that we can look into your code & JSON format and help you out accordingly.


    Vishwas R
    Team CanvasJS

    #22127

    Hemel619619
    Member

    Could you please change the code wherever it’s required to run the json data to produce graph? It would be wonderful if you could send me the full html file.

    Thank you

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

You must be logged in to reply to this topic.