Форум

Nikk · #1 (**permalink**) 20.04.2017, 11:29

Пытаюсь вывести график из массива чисел, используя библиотеку Google Charts.
Если вводить массив внутри HTML файла, то все работает:

Код:

var data = google.visualization.arrayToDataTable([
['Значение X','Значение Y1','Значение Y2'],
['Значение X1',  53689,             47895],
['Значение X2',  35687,             42558]

Но если вынести массив во внешний файл data.txt, то график не рисуется. В чем может быть проблема?

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
    $.ajax({
        url: 'data.txt',
        type: 'json',
        success: function (json) {
            var data = google.visualization.arrayToDataTable(json);
                 
  }
    });
}
        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data);
      }
    </script>

</head>
<body>

    <div id="curve_chart"></div>

</body>

Dilettante_Pro · #2 (**permalink**) 20.04.2017, 11:57

Nikk,
Уберите type: 'json',

Nikk · #3 (**permalink**) 20.04.2017, 12:10

Dilettante_Pro,
Убрал, не помогло... При открытии страницы - белый пустой экран.

рони · #4 (**permalink**) 20.04.2017, 12:18

мысли вслух строки 21 23 возможно нужно перенести в строку 17

Dilettante_Pro · #5 (**permalink**) 20.04.2017, 12:21

Nikk,
А у ваc правильный файл data.txt?
поставьте для проверки alert(json)
перед var data = google.visualization.arrayToDataTable(json);

Должна быть одна сплошная строка

Nikk · #6 (**permalink**) 20.04.2017, 12:41

Dilettante_Pro,
Сделал

function drawChart() {
    $.ajax({
        url: 'data.txt',
        success: function (json) {
alert(json);
            var data = google.visualization.arrayToDataTable(json);

Алерт не выходит вообще. И не выходит даже в том случае, если сделать просто текстовый alert('текст'). В чем моя ошибка?

Nikk · #7 (**permalink**) 20.04.2017, 12:45

Сообщение от рони

мысли вслух строки 21 23 возможно нужно перенести в строку 17

Попробовал, не помогло. Строки таким образом расположены в примерах от Google и прекрасно работают, если не пробовать подключить внешний массив...

Dilettante_Pro · #8 (**permalink**) 20.04.2017, 12:50

Nikk,
Скорее всего дело в асинхронности ajax - функция drawChart завершает работу, не дожидаясь success.

Попробуйте добавить в ajax
async: false,

Nikk · #9 (**permalink**) 20.04.2017, 13:04

Dilettante_Pro,
Добавил, без результата...

$.ajax({
async: false,
        url: 'data.txt',

Dilettante_Pro · #10 (**permalink**) 20.04.2017, 14:38

Nikk,
1. Проверьте свой файл, просто исполнив вот такой скрипт

$.ajax({
            url: 'data.txt',
            success: function (json) {
                alert(json);
            }
        });

Или добавьте кроме success: еще и error:

2. В работающем варианте у вас так?

<script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
       var data = google.visualization.arrayToDataTable([
['Значение X','Значение Y1','Значение Y2'],
['Значение X1',  53689,             47895],
['Значение X2',  35687,             42558]
]);
}
        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data);
      }
    </script>

Вообще-то объявление var data должно быть вне функции. Иначе - область видимости

Форум

Справочник

Discord чат

Курсы javascript