JS импортирует обновленный файл JSON для использования с ChartJS

Question

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

Если я сохраню данные JSON локально для сценария в переменной var (var jsonfile = {}), диаграмма будет работать, как и ожидалось.

Я пытаюсь импортировать JSON-файл из-за пределов скрипта (он находится на локальном веб-сервере в другой папке).

Файл JSON выглядит точно так же, как данные в переменной ниже.

Ниже работает, как и ожидалось.

<div class="row">
                <div class="col-4">
                    <div class="ca-comms-by-month">
                    </div>
                    <script>
                    var jsonfile = {
                         "comms_by_month": [
                             {
                                "name": "July",
                                "count": 2130
                             },
                             {
                                "name": "August",
                                "count": 890
                             },
                             {
                                "name": "September",
                                "count": 1654
                             },
                             {
                                "name": "October",
                                "count": 120
                             }
                         ]
                    };
                        var labels = jsonfile.comms_by_month.map(function(e) {
                         return e.name;
                      });
                      var data = jsonfile.comms_by_month.map(function(e) {
                         return e.count;
                      });
                        function createConfig(details, data) {
                            return {
                                type: 'line',
                                data: {
                                    labels: labels,
                                    datasets: [{
                                        label: 'Comms count by month',
                                        steppedLine: details.steppedLine,
                                        data: data,
                                        borderColor: details.color,
                                        fill: true,
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    title: {
                                        display: false,
                                        text: details.label,
                                    },
                                    tooltips: {
                                        enabled:true, // Disable this for custom tool tips || http://www.chartjs.org/docs/latest/configuration/tooltip.html
                                        mode: 'index',
                                        intersect: false,
                                        cornerRadius:0
                                    },
                                    hover: {
                                        mode: 'nearest',
                                        intersect: true
                                    },
                                    scales: {
                                xAxes: [{
                                  display: true,
                                  scaleLabel: {
                                    display: true,
                                    labelString: 'Month'
                                  }
                                }],
                                yAxes: [{
                                  display: true,
                                  scaleLabel: {
                                    display: true,
                                    labelString: 'Count'
                                  },
                                  ticks: {
                                      beginAtZero:true
                                    }
                                }]
                              },
                              legend: {
                                display: false, // False to hide the legdend dataset tile
                                labels: {
                                  fontColor: 'rgb(255, 99, 132)'
                                }
                              }
                                }
                            };
                        }
                        window.onload = function()
                        {
                            var container = document.querySelector('.ca-comms-by-month');
                            var steppedLineSettings = [{
                                steppedLine:false,
                                label: '',
                                color: window.chartColors.purple
                            }];
                            steppedLineSettings.forEach(function(details) {
                                var div = document.createElement('div');
                                div.classList.add('chart-container');
                                var canvas = document.createElement('canvas');
                                div.appendChild(canvas);
                                container.appendChild(div);
                                var ctx = canvas.getContext('2d');
                                var config = createConfig(details, data);
                                new Chart(ctx, config);
                            });
                        };
                    </script>
                </div>
            </div>

В приведенном ниже коде будут отображаться некоторые данныев обновленном файле JSON, основанном на именах getElementById, но это не очень хорошо для меня, так как мне нужно, чтобы ChartJS пошел и получил значения.

                        <h1 class="toolsportal text-right">Temp</h1>
                    <p id="demo"></p>
                    <p id="demo1"></p>
                    <br /><br /><br /><br />
                <script>
                  var jsonurl = 'http://mydevicename/portal/js/export_json/dash-comms-month.json';
                  var xmlhttp = new XMLHttpRequest();
                  xmlhttp.onreadystatechange = function()
                        {
                      if (this.readyState == 4 && this.status == 200)
                      {
                          var jsonfile = JSON.parse(this.responseText);
                          document.getElementById("demo").innerHTML = jsonfile.comms_by_month[0].month;
                                        document.getElementById("demo1").innerHTML = jsonfile.comms_by_month[0].name;
                      }
                  };
                  xmlhttp.open("GET", jsonurl, true);
                  xmlhttp.send();
                </script>

То, что я не могу собрать, это то, как я могу получитьзначения из обновленного файла JSON с помощью приведенных ниже функций, которые удачно идут и получают данные из локального jsonfile {} var.

                                    var labels = jsonfile.comms_by_month.map(function(e){return e.name;});
var data = jsonfile.comms_by_month.map(function(e){return e.count;});

Я явно упускаю что-то фундаментальное, любые указатели были бы хороши.

Спасибо

Answer 1

Я ответил на свой вопрос, правильно изучив, что делает XMLHttpRequest () & JSON.parse ().

Если кто-то хочет подключить файл JSON к https://www.chartjs.org/ диаграммам,Может помочь следующее:

Файл JSON

"comms_by_month":[
  {
   "name": "July",
   "month":7,
   "count":0
  },
  {
   "name": "August",
   "month":8,
   "count":1652
  },
  {
   "name": "September",
   "month":9,
   "count":600
  },
  {
   "name": "October",
   "month":10,
   "count":0
 },
  {
   "name": "November",
   "month":11,
   "count":0
 },
  {
   "name": "December",
   "month":12,
   "count":0
  }
]

Получить файл JSON в переменную

<script>
  // Set the var for the json file located on the web server 
  var jsonFile_dash_comms_by_month = 'http://hostname/portal/js/export_json/dash-comms-by-month.json';
  var request = new XMLHttpRequest();
  request.open("GET",jsonFile_dash_comms_by_month,false);
  request.send(null)
  var jsonObj_dash_comms_by_month = JSON.parse(request.responseText);
</script>

Div, где будет отображаться диаграмма

<div class="ca-comms-by-month"></div>

Функции для перевода меток и наборов данных в переменную

<script>
    var labels = jsonObj_dash_comms_by_month.comms_by_month.map(function(e) {
      return e.name;
    });
    var data = jsonObj_dash_comms_by_month.comms_by_month.map(function(e) {
      return e.count;
    });
</script>

Функция для создания конфигурации CharJS

См. (http://www.chartjs.org/docs/latest/configuration/) для получения дополнительной информации о конфигурации ChartJs.

<script>
  function createConfig(details, data) {
    return {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Comms count by month',
                steppedLine: details.steppedLine,
                data: data,
                borderColor: details.color,
                fill: true,
            }]
        },
        options: {
            responsive: true,
            title: {
                display: false,
                text: details.label,
            },
            tooltips: {
                enabled:true, // Disable this for custom tool tips || http://www.chartjs.org/docs/latest/configuration/tooltip.html
                mode: 'index',
                intersect: false,
                cornerRadius:0
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            scales: {
        xAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Month'
          }
        }],
        yAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Count'
          },
          ticks: {
              beginAtZero:true
            }
        }]
      },
      legend: {
        display: false, // False to hide the legdend dataset tile
        labels: {
          fontColor: 'rgb(255, 99, 132)'
        }
      }
        }
    };
}<script>

Функция загрузки для отображения диаграммы

<script>
    window.onload = function()
    {
        var container = document.querySelector('.ca-comms-by-month');
        var steppedLineSettings = [{
            steppedLine:false,
            label: '',
            color: window.chartColors.purple
        }];
        steppedLineSettings.forEach(function(details) {
            var div = document.createElement('div');
            div.classList.add('chart-container');
            var canvas = document.createElement('canvas');
            div.appendChild(canvas);
            container.appendChild(div);
            var ctx = canvas.getContext('2d');
            var config = createConfig(details, data);
            new Chart(ctx, config);
        });
    };
</script>

Это дало мне следующую таблицу

Я хотел бы услышатьот любого, кто может указать на какие-либо улучшения в вышеупомянутом. Я ожидаю иметь более 10 диаграмм на странице типа приборной панели.

Спасибо

edwoli