в режиме реального времени график, используя толкач и холст 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> 

Привет, Я использую canvasjs.com. В моем приведенном выше коде я могу получить доступ к значению метки. Я получаю значение y как JSON.stringify(dps[0].name) - он возвращает 125 значений Management Wing. Но мне нужно достичь ярлыка, как management wing, production lab .. Чтобы я мог отслеживать, какая метка должна обновляться при срабатывании событий-толкателей.

Answer 1

Вы должны использовать ajax. Вставьте Аякс на updateChart, смотрите здесь

// 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(); 
}; 

URL-адрес из http://www.domain.com/data/json, дает выход, как ваши данные на вар дпс.

и не забудьте загрузить jquery libs поверх canvasjs.min.js. Так что смотрите, как здесь

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

Я надеюсь, что это полезно,