Применить массив JSON к данным в Chart.js - PullRequest
Новая
       21

Применить массив JSON к данным в Chart.js

0 голосов
/ 09 ноября 2019

Я пытаюсь создать график обновления в реальном времени. Я сделал отдельный файл с записями из моей базы данных и сохранил его в массиве JSON. На моей главной странице я получил массив JSON через Ajax. Мне нужно было просто поместить массивы, полученные из файла JSON, в часть данных на моем графике. Но по какой-то причине это не работает.
Это то, что я пробовал в моей таблице: 

<script>
    $(document).ready(function(){
      $.getJSON("loadchart.php", function(data){
          var sensor1 = data[0];
          var sensor2 = data[1];
          var sensor3 = data[2];
          var sensorsum = data[3];
      });
    });


    var lbl = [<?php echo $labels; ?>];
    var ctx1 = document.getElementById('mychart1').getContext('2d');

    var myLineChart = new Chart(ctx1, {
        type: 'line', 
        data: {
          labels: lbl,
          datasets: [
            {
              label: "Corrente 1",
              data: sensor1,
              borderWidht: 6,
              borderColor: 'red',
              backgroundColor: 'transparent'
            },
            {
              label: "Corrente 2",
              data: sensor2,
              borderWidht: 6,
              borderColor: 'blue',
              backgroundColor: 'transparent'
            },
            {
              label: "Corrente 3",
              data: sensor3,
              borderWidht: 6,
              borderColor: 'green',
              backgroundColor: 'transparent'
            },
            {
              label: "Corrente Total",
              data: sensorsum,
              borderWidht: 6,
              borderColor: 'black',
              backgroundColor: 'transparent'
            },
          ]            
        },
        plugins: [

        ],
        options: {
          animation:{
            update: 0
          },
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }],
            xAxes: [{
              gridLines: {
                display: false
              }
            }]
          },

          title: {
            display: true,
            fontSize: 20,
            text: "Gráfico das Correntes"
          },

          labels: {
            fontStyle: "bold",
          },

          layout: {
            padding: {
              left: 0,
              right: 0,
              top: 0,
              bottom: 0
            }
          },
          tooltips: {
            enabled: true,
            mode: 'single',
            responsive: true,
            backgroundColor: 'black',
            titleFontFamily: "'Arial'",
            titleFontSize: 14,
            titleFontStyle: 'bold',
            titleAlign: 'center',
            titleSpacing: 4,
            titleMarginBottom: 10,
            bodyFontFamily: "'Mukta'",
            bodyFontSize: 14,
            borderWidth: 2,
            borderColor: 'grey',
            callbacks:{
              title: function(tooltipItem, data) {
                  return data.labels[tooltipItem[0].index];
              },
              afterTitle: function(tooltipItem, data) {
                var date = <?php echo json_encode($tempo) ?>

                return date[tooltipItem[0]['index']]; 
              },
              label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';                  
                    if (label) {
                        label += ': ';
                    }
                    label += (tooltipItem.yLabel)+"A";                  
                    return label;
              }
            }
          },
          aspectRatio: 1,
          maintainAspectRatio: false
        }
    });
    </script>
...