Home forums Using CanvasJS I want to make a 100% stacked chart where JSON data can run

This topic contains 3 replies, has 2 voices, and was last updated by  Hemel619619 1 year ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #22027

    <!DOCTYPE HTML>
    <html>
    <head>
    <script>

    window.onload = function () {

    var dps1 = [], dps2 = [], dps3 = [];

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

    title:{
    text: “MOVEMENT CATEGORY”
    },

    subtitles:[
    {
    text: “(STANDSTILL, ON FOOT or ON VEHICLE)”,

    },],

    axisX:{
    title: “TIME SLOT”
    },
    axisY:{
    title:”Number of users(%)”,
    suffix: “%”
    },

    data: [
    {
    type: “stackedArea100”,
    name: “STANDSTILL”,
    showInLegend: “true”,
    yValueFormatString: “#,##0.##\”%\””,
    dataPoints: dps1
    },
    {
    type: “stackedArea100”,
    name: “ON FOOT”,
    showInLegend: “true”,
    yValueFormatString: “#,##0.##\”%\””,
    dataPoints: dps2
    },
    {
    type: “stackedArea100”,
    name: “ON VEHICLE”,
    showInLegend: “true”,
    yValueFormatString: “#,##0.##\”%\””,
    dataPoints: dps3
    }
    ]
    });

    getData();
    chart.render();

    function getData() {
    $.getJSON(“https://api.myjson.com/bins/a98dm”,

    function(data) {

    for(var i = 0; i < data.length; i++){
    dps1.push({
    label: data[i].label,
    y: data[i].y1
    });
    dps2.push({
    label: data[i].label,
    y: data[i].y2
    });
    dps3.push({
    label: data[i].label,
    y: data[i].y3
    });
    }
    });
    }

    setInterval(function(){
    getData();
    chart.render();
    }, 5000);

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

    In this code, I want to run JSON data. But for some unknown reason this coding is not working properly. Can anybody help me out by solving this problem of providing the appropriate code? It will be highly appreciated. Also, the chart should in a way that an user can get the proper view so that He or she can have a better understanding.

    THANK YOU :)

    #22028

    HTML:
    <div id=”chartContainer” style=”height: 300px; width: 150%;”></div>

    JAVASCRIPT:
    var dps1 = [], dps2 = [], dps3 = [];
    var chart = new CanvasJS.Chart(“chartContainer”,{
    title:{
    text: “Y Values based on Frequency of Date”
    },
    axisX:{
    title: “Date”
    },
    axisY:{
    title: “Frequecy of dates”
    },
    data: [
    {
    type: “stackedArea100”,
    name: “STANDSTILL”,
    showInLegend: “true”,
    yValueFormatString: “#,##0.##\”%\””,
    dataPoints: dps1
    },
    {
    type: “stackedArea100”,
    name: “ON FOOT”,
    showInLegend: “true”,
    yValueFormatString: “#,##0.##\”%\””,
    dataPoints: dps2
    },
    {
    type: “stackedArea100”,
    name: “ON VEHICLE”,
    showInLegend: “true”,
    yValueFormatString: “#,##0.##\”%\””,
    dataPoints: dps3
    }
    ]
    });

    getData();
    chart.render();

    function getData() {
    $.getJSON(“https://api.myjson.com/bins/a98dm”, function(data) {

    for(var i = 0; i < data.length; i++){
    dps1.push({
    label: data[i].label,
    y: data[i].y1
    });
    dps2.push({
    label: data[i].label,
    y: data[i].y2
    });
    dps3.push({
    label: data[i].label,
    y: data[i].y3
    });
    }
    });
    }

    setInterval(function(){
    getData();
    chart.render();
    }, 5000);

    I WANT TO COMBINE THIS 2 codes into a simple HTML File. How can I do that? Please write the whole code in the post after edition please. ALso how can i make it dynamic?

    #22038

    @hemel619619,

    Considering this to be duplicate. Hence closing this thread.

    If you still face any issues, kindly create and share jsfiddle reproducing the issue.

    __
    Priyanka M S
    Team CanvasJS

    #22040

    @priyanka M S

    Thank you so so much for your help.

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

You must be logged in to reply to this topic.