Как отобразить мои данные JSON в линейную диаграмму материалов Google, используя PHP, MySQL и & amp; JavaScript

Question

Как отобразить мои данные JSON в линейную диаграмму материалов Google, используя PHP, MySQL и & amp; JavaScript

Добрый день!
Мой код не отображает диаграмму.
Я пытаюсь представить свои данные json в линейную диаграмму материала Google, чтобы вывести такую диаграмму:

вот мой код JavaScript:

    google.charts.load('current', {'packages': ['line', 'corechart', 'bar','controls', 'table']});
google.charts.setOnLoadCallback(drawChartCountry);

function drawChartCountry() {

var jsonData1 = $.ajax({
url: "analytics/country-sales.php",
dataType: "json",
async: false
}).responseText;

var data1 = new google.visualization.DataTable(jsonData1);

var options = {
title: 'Top 20 Countries with the highest sales',
pointSize: 5
};
var formatter_amount1 = new google.visualization.NumberFormat({prefix: 'HKD ', negativeColor: 'red', negativeParens: true});
// formatter_amount1.format(data1, 1);
var chart = new google.visualization.LineChart(document.getElementById('chart_div_country'));
chart.draw(data1, options);

}

и вот мои данные JSON

    {"cols":[[[{"label":"Date","type":"string"},{"label":"TAIWAN","type":"string"},{"label":"HONG KONG","type":"string"},{"label":"JAPAN","type":"string"},{"label":"INDONESIA","type":"string"},{"label":"THAILAND","type":"string"},{"label":"UNITED STATES","type":"string"},{"label":"PHILIPPINES","type":"string"},{"label":"UNITED KINGDOM","type":"string"},{"label":"MALAYSIA","type":"string"},{"label":"AUSTRALIA","type":"string"},{"label":"SINGAPORE","type":"string"},{"label":"SPAIN","type":"string"},{"label":"SWEDEN","type":"string"},{"label":"GERMANY","type":"string"},{"label":"VIET NAM","type":"string"},{"label":"SOUTH KOREA","type":"string"},{"label":"NORWAY","type":"string"},{"label":"FRANCE","type":"string"},{"label":"CANADA","type":"string"},{"label":"NETHERLANDS","type":"string"}]]],"rows":[{"c":[{"v":"Date(2014,1,1)"},{"v":48876},{"v":3970},{"v":2505},{"v":1824},{"v":982},{"v":676},{"v":491},{"v":387},{"v":238},{"v":173},{"v":162},{"v":108},{"v":101},{"v":98},{"v":96},{"v":91},{"v":88},{"v":84},{"v":82},{"v":72}]}]}

вот HTML-код (удалены некоторые элементы, не относящиеся к этой теме)

<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="analytics/sales-country.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12 col-sm-12">
<div id='chart_div_country' style='width: 100%; height: 600px;'></div>
</div>
</div>
</body>

Кто-нибудь может мне помочь. Спасибо.
Любой ответ высоко ценится.

2

charts google-visualization json linechart php

Решение

Другие решения

первый, "cols" обернуты в слишком много массивов

[[[]]] против []

{"cols":[[[{"label":"Date","type":"string"},...,{}]]],

должно быть…

{"cols":[{"label":"Date","type":"string"},...,{}],

следующий, тип столбца для ряда линий должен быть 'number'
и рекомендую 'date' для первого столбца

этот…

  "cols": [
{"label":"Date","type":"date"},
{"label":"TAIWAN","type":"number"},
{"label":"HONG KONG","type":"number"},

не этот…

  "cols": [
{"label":"Date","type":"string"},
{"label":"TAIWAN","type":"string"},
{"label":"HONG KONG","type":"string"},

также, если вы хотите материал линейный график,

просто нужно 'line' пакет и …

google.charts.Line

ядро версия графика …

google.visualization.LineChart

и очень рекомендую не используется async: falseиспользовать .done а также .fail обратные вызовы вместо

см. следующий рабочий фрагмент, переместите код из .fail в .done проверить локально …

google.charts.load("current", {
callback: drawChartCountry,
packages: ["line", "corechart"]
});

function drawChartCountry() {
$.ajax({
url: "analytics/country-sales.php",
dataType: "json"}).done(function (jsonData) {
}).fail(function (jqXHR, textStatus) {
var jsonData = {
"cols": [
{"label":"Date","type":"date"},
{"label":"TAIWAN","type":"number"},
{"label":"HONG KONG","type":"number"},
{"label":"JAPAN","type":"number"},
{"label":"INDONESIA","type":"number"},
{"label":"THAILAND","type":"number"},
{"label":"UNITED STATES","type":"number"},
{"label":"PHILIPPINES","type":"number"},
{"label":"UNITED KINGDOM","type":"number"},
{"label":"MALAYSIA","type":"number"},
{"label":"AUSTRALIA","type":"number"},
{"label":"SINGAPORE","type":"number"},
{"label":"SPAIN","type":"number"},
{"label":"SWEDEN","type":"number"},
{"label":"GERMANY","type":"number"},
{"label":"VIET NAM","type":"number"},
{"label":"SOUTH KOREA","type":"number"},
{"label":"NORWAY","type":"number"},
{"label":"FRANCE","type":"number"},
{"label":"CANADA","type":"number"},
{"label":"NETHERLANDS","type":"number"}
],
"rows":[
{"c":[
{"v":"Date(2014,1,1)"},
{"v":48876},
{"v":3970},
{"v":2505},
{"v":1824},
{"v":982},
{"v":676},
{"v":491},
{"v":387},
{"v":238},
{"v":173},
{"v":162},
{"v":108},
{"v":101},
{"v":98},
{"v":96},
{"v":91},
{"v":88},
{"v":84},
{"v":82},
{"v":72}
]},
{"c":[
{"v":"Date(2015,1,1)"},
{"v":48876},
{"v":3970},
{"v":2505},
{"v":1824},
{"v":982},
{"v":676},
{"v":491},
{"v":387},
{"v":238},
{"v":173},
{"v":162},
{"v":108},
{"v":101},
{"v":98},
{"v":96},
{"v":91},
{"v":88},
{"v":84},
{"v":82},
{"v":72}
]}
]
};

var data = new google.visualization.DataTable(jsonData);

var options = {
title: 'Top 20 Countries with the highest sales',
pointSize: 5
};

var chart = new google.charts.Line(document.getElementById('chart_div_country'));
chart.draw(data, options);

//console.log('error', textStatus);
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="row">
<div class="col-md-12 col-sm-12">
<div id='chart_div_country' style='width: 100%; height: 600px;'></div>
</div>
</div>

голосует «data-shortcut =» V

2

Источник

Accepted Answer

Добрый день!
Мой код не отображает диаграмму.
Я пытаюсь представить свои данные json в линейную диаграмму материала Google, чтобы вывести такую диаграмму:

вот мой код JavaScript:

    google.charts.load('current', {'packages': ['line', 'corechart', 'bar','controls', 'table']});
google.charts.setOnLoadCallback(drawChartCountry);

function drawChartCountry() {

var jsonData1 = $.ajax({
url: "analytics/country-sales.php",
dataType: "json",
async: false
}).responseText;

var data1 = new google.visualization.DataTable(jsonData1);

var options = {
title: 'Top 20 Countries with the highest sales',
pointSize: 5
};
var formatter_amount1 = new google.visualization.NumberFormat({prefix: 'HKD ', negativeColor: 'red', negativeParens: true});
// formatter_amount1.format(data1, 1);
var chart = new google.visualization.LineChart(document.getElementById('chart_div_country'));
chart.draw(data1, options);

}

и вот мои данные JSON

    {"cols":[[[{"label":"Date","type":"string"},{"label":"TAIWAN","type":"string"},{"label":"HONG KONG","type":"string"},{"label":"JAPAN","type":"string"},{"label":"INDONESIA","type":"string"},{"label":"THAILAND","type":"string"},{"label":"UNITED STATES","type":"string"},{"label":"PHILIPPINES","type":"string"},{"label":"UNITED KINGDOM","type":"string"},{"label":"MALAYSIA","type":"string"},{"label":"AUSTRALIA","type":"string"},{"label":"SINGAPORE","type":"string"},{"label":"SPAIN","type":"string"},{"label":"SWEDEN","type":"string"},{"label":"GERMANY","type":"string"},{"label":"VIET NAM","type":"string"},{"label":"SOUTH KOREA","type":"string"},{"label":"NORWAY","type":"string"},{"label":"FRANCE","type":"string"},{"label":"CANADA","type":"string"},{"label":"NETHERLANDS","type":"string"}]]],"rows":[{"c":[{"v":"Date(2014,1,1)"},{"v":48876},{"v":3970},{"v":2505},{"v":1824},{"v":982},{"v":676},{"v":491},{"v":387},{"v":238},{"v":173},{"v":162},{"v":108},{"v":101},{"v":98},{"v":96},{"v":91},{"v":88},{"v":84},{"v":82},{"v":72}]}]}

вот HTML-код (удалены некоторые элементы, не относящиеся к этой теме)

<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="analytics/sales-country.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12 col-sm-12">
<div id='chart_div_country' style='width: 100%; height: 600px;'></div>
</div>
</div>
</body>

Кто-нибудь может мне помочь. Спасибо.
Любой ответ высоко ценится.

самый старый «data-shortcut =» O