Я пытаюсь нарисовать линейную диаграмму Google, но у меня возникают проблемы с рисованием второй линии. Я использую данные из своей базы данных MySQL, которые позволяют мне отображать общее количество проданных единиц, сгруппированных по месяцам в 2018 году.
Но я хотел бы отобразить сумму, разделенную для каждой группы ответственности, которая является строковым значением внутри каждой моей строки.
Это мой код:
<?php
$curyear = date('Y');
$con = mysqli_connect('xxxx','xxxx','xxxx','xxxx');
?>
<html>
<head>
<!--Load the AJAX API-->
<script type = "text/javascript" src = "https://www.google.com/jsapi"></script>
<script type = "text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = google.visualization.arrayToDataTable([
['Date', 'Pezzi',],
<?php
$query = "SELECT responsabile, sum(n_sim)+sum(n_accessi) as pezzi, data_dichiarato FROM dichiarati WHERE responsabile = 'ADMRZ01' and n_ragsoc != 'DICHIARATO ZERO' and YEAR(DATA_DICHIARATO) = '$curyear' GROUP BY MONTH(data_dichiarato) ORDER BY data_dichiarato";
$exec = mysqli_query($con,$query);
while($row = mysqli_fetch_array($exec)){
echo "['".date("M", strtotime($row['data_dichiarato']))."',".$row['pezzi']."],";
}
?>
]);
// Set chart options
var options = {'title':'SIM CONSEGNATE NEL <?php echo $curyear; ?>',
'width':1200,
'height':300
// isStacked: true
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Divs that will hold the charts-->
<div id = "chart_div"></div>
</body>
</html>
Итак, как вы можете видеть, у меня есть единственный запрос, который извлекает данные только для ответственности ADMRZ01. Но в моей базе данных есть строки с ADMRZ02, ADMRZ11 и другими.
Я хотел бы добавить строку в линейную диаграмму за каждую ответственность.
Как я могу изменить свой код? Нужно ли добавлять еще один запрос? Или сериал? Извини, я только новичок в чартах
Спасибо






чтобы иметь несколько строк / серий,
таблица данных Google должна выглядеть примерно так ...
var data = google.visualization.arrayToDataTable([
['Date', 'ADMRZ01', 'ADMRZ02', 'ADMRZ11'],
['Jan', 10, 20, 30],
...
]);
но это было бы очень сложно построить из запроса без кучи жесткого кодирования
вместо этого добавьте столбец ответственности
тогда мы можем использовать методы данных Google для преобразования строк в столбцы.
для начала таблица данных будет выглядеть примерно так ...
var data = google.visualization.arrayToDataTable([
['Date', 'Responsibility', 'Pezzi'],
['01/01/2018', 'ADMRZ01', 10],
['01/01/2018', 'ADMRZ02', 20],
['01/01/2018', 'ADMRZ11', 30],
['02/01/2018', 'ADMRZ01', 40],
['02/01/2018', 'ADMRZ02', 50],
['02/01/2018', 'ADMRZ11', 60],
['03/01/2018', 'ADMRZ01', 70],
['03/01/2018', 'ADMRZ02', 80],
['03/01/2018', 'ADMRZ11', 90],
]);
вы захотите сохранить даты, потому что, когда мы объединяем,
названия месяцев будут отсортированы в алфавитном порядке и не будут соответствовать порядку.
например -> апр, август, декабрь, февраль и т. д.
мы можем отформатировать как название месяца позже.
сначала измените запрос, чтобы включить все обязанности ...
var data = google.visualization.arrayToDataTable([
['Date', 'Responsabile', 'Pezzi'],
<?php
$query = "SELECT data_dichiarato, responsabile, sum(n_sim)+sum(n_accessi) as pezzi FROM dichiarati WHERE n_ragsoc != 'DICHIARATO ZERO' and YEAR(DATA_DICHIARATO) = '$curyear' GROUP BY data_dichiarato, responsabile ORDER BY data_dichiarato";
$exec = mysqli_query($con,$query);
while($row = mysqli_fetch_array($exec)){
echo "['".$row['data_dichiarato']."','".$row['responsabile']."'".$row['pezzi']."],";
}
?>
]);
то вы можете использовать следующий javascript для преобразования строк в столбцы,
см. следующий рабочий фрагмент ...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
// create data table
var data = google.visualization.arrayToDataTable([
['Date', 'Responsibility', 'Pezzi'],
['01/01/2018', 'ADMRZ01', 10],
['01/01/2018', 'ADMRZ02', 20],
['01/01/2018', 'ADMRZ11', 30],
['02/01/2018', 'ADMRZ01', 40],
['02/01/2018', 'ADMRZ02', 50],
['02/01/2018', 'ADMRZ11', 60],
['03/01/2018', 'ADMRZ01', 70],
['03/01/2018', 'ADMRZ02', 80],
['03/01/2018', 'ADMRZ11', 90],
]);
// create data view
var view = new google.visualization.DataView(data);
// column arrays
var aggColumns = [];
var viewColumns = [{
// convert string to date
calc: function (dt, row) {
return new Date(dt.getValue(row, 0));
},
label: data.getColumnLabel(0),
type: 'date'
}];
// build view & agg columns for each responsibility
data.getDistinctValues(1).forEach(function (responsibility, index) {
viewColumns.push({
calc: function (dt, row) {
if (dt.getValue(row, 1) === responsibility) {
return dt.getValue(row, 2);
}
return null;
},
label: responsibility,
type: 'number'
});
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: responsibility,
type: 'number'
});
});
// set view columns
view.setColumns(viewColumns);
// sum view by date
var aggData = google.visualization.data.group(
view,
[0],
aggColumns
);
// draw chart
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(aggData, {
title: 'SIM CONSEGNATE NEL...',
hAxis: {
format: 'MMM',
ticks: view.getDistinctValues(0)
}
});
});<script src = "https://www.gstatic.com/charts/loader.js"></script>
<div id = "chart_div"></div>Примечание:jsapi больше не должен использоваться для загрузки библиотеки диаграмм,
согласно примечаниям к выпуску ...
The version of Google Charts that remains available via the
jsapiloader is no longer being updated consistently. The last update, for security purposes, was with a pre-release of v45. Please use the new gstaticloader.jsfrom now on.
это изменит только оператор load, см. фрагмент выше ...
Привет WhiteHat, наклеил мое новое решение.
Нашел другое решение с методом google.visualization.data.join, и он работает, но у меня эта глупая проблема с алфавитными месяцами.
<?php
$curyear = date('Y');
$con = mysqli_connect('localhost','root','root','tetra');
?>
<html>
<head>
<!--Load the AJAX API-->
<script type = "text/javascript" src = "https://www.google.com/jsapi"></script>
<script type = "text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Date', 'Pezzi01'],
<?php
$query = "SELECT responsabile, sum(n_sim)+sum(n_accessi) as pezzi01, data_dichiarato FROM dichiarati WHERE responsabile = 'ADMRZ01' and n_ragsoc != 'DICHIARATO ZERO' and YEAR(DATA_DICHIARATO) = '$curyear' GROUP BY MONTH(data_dichiarato), responsabile order by data_dichiarato asc";
$exec = mysqli_query($con,$query);
while($row = mysqli_fetch_array($exec)){
echo "['".date("M", strtotime($row['data_dichiarato']))."',".$row['pezzi01']."],";
}
?>
]);
var data2 = google.visualization.arrayToDataTable([
['Date', 'Pezzi02'],
<?php
$query = "SELECT responsabile, sum(n_sim)+sum(n_accessi) as pezzi02, data_dichiarato FROM dichiarati WHERE responsabile = 'ADMRZ02' and n_ragsoc != 'DICHIARATO ZERO' and YEAR(DATA_DICHIARATO) = '$curyear' GROUP BY MONTH(data_dichiarato), responsabile order by data_dichiarato asc";
$exec = mysqli_query($con,$query);
while($row = mysqli_fetch_array($exec)){
echo "['".date("M", strtotime($row['data_dichiarato']))."',".$row['pezzi02']."],";
}
?>
]);
var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(joinedData, {
height: 300,
width: 600,
interpolateNulls: true,
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
</script>
</head>
<body>
<!--Divs that will hold the charts-->
<div id = "chart_div"></div>
</body>
</html>
Ничего ... всегда дата на хаксисе алфавитно показывает месяцы.
Теперь у меня проблема с датой, отсортированной по алфавиту в строке x. Я пытаюсь найти решение.