Real time chart using pusher and canvas js

Question

<script type="text/javascript">
window.onload = function () {
    // initial values of dataPoints
    var dps = [
    {label: "Management Wing", y: 125}  ,
    {label: "Production Lab", y: 332},
    {label: "Cafeteria", y: 55},
    {label: "Library", y: 46},
    {label: "Recreation Centre", y: 32}
    ];
    var totalEmployees = "total people on campus: 590";

    var chart = new CanvasJS.Chart("chartContainer",{
        theme: "theme2",
        title:{ 
            text: "People On Campus"
        },
        axisY: {                
            title: "Number of People"
        },                  
        legend:{
            verticalAlign: "top",
            horizontalAlign: "centre",
            fontSize: 18

        },
        data : [{
            type: "column",
            showInLegend: true,
            legendMarkerType: "none",               
            legendText: totalEmployees,
            indexLabel: "{y}",
            dataPoints: dps
        }]
    });

    // renders initial chart
    chart.render();

    var sum = 590;   //initial sum 

    var updateInterval = 1000;  // milliseconds

    var updateChart = function () {
        // Selecting a random dataPoint
        var dataPointIndex = Math.round(Math.random()*4);       

        // generating random value
        var deltaY = Math.round(2 + Math.random() *(-2-2)); 

        // adding random value to random dataPoint
        dps[dataPointIndex].y = (dps[dataPointIndex].y + deltaY) > 0 ? dps[dataPointIndex].y + deltaY : 0 ;

        // updating legend text. 
        sum = sum + deltaY;
        totalEmployees = "total people on campus: " + sum;          
        chart.options.data[0].legendText = totalEmployees;  

        chart.render();

    };
        // update chart after specified interval
        setInterval(function(){updateChart()}, updateInterval);

    }   
    </script>

    <script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
</head>

Hi, I am using canvasjs.com . In my above code how can I access value of label. I access value of y as JSON.stringify(dps[0].name) - it returns 125 value of Management Wing . But I need to achieve label like management wing , production lab .. So that i can track which label should be updated when pusher events triggered.

Answer 1

You must use ajax. Insert a ajax on updateChart, look here

// global variable label n y
var labelJSON = [];
var yJSON = [];

var updateChart = function () {

    $.getJSON("http://www.domain.com/data/json", function(json){
        for(var i=0; i<json.length; i++) {
            labelJSON[i] = json[i].label
            yJSON[i] = json[i].y;
        }
    });

    for (var i = 0; i < dps.length; i++) {
        // update chart here
        dps[i] = {label: labelJSON[i] , y: yJSON[i]};           
    };

    chart.render();
};

The URL of http://www.domain.com/data/json is giving output like your data on var dps.

and dont forget to load jquery libs on top of canvasjs.min.js. So look like here

<script type="text/javascript" src="/assets/script/jquery.min.js"></script
<script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>

I hope it usefull