PHP Lang
  1. PHP Lang
  3. Диаграмма Google добавляет еще один график рядом друг с другом
Intereting Posts
PHP и XML. Цитирование через XML-файл с помощью PHP Как заменить NULL на 0 в запросе? Найти наивысшее простое число в заданном диапазоне Не удается отбросить одно значение (id) из db в массиве после нажатия кнопки отправки Способ получения всех алфавитных символов в массиве в PHP? Много-To-One с несколькими целевыми объектами Как преобразовать API Instagram в JSON в XML с PHP? Проверьте, является ли переменная допустимой датой с PHP Кодировка символов для французских акцентов Реализация процесса загрузки файлов с помощью Zend Получение списка videoId в массиве с помощью api v3 playlistItems YouTube и создание другого видео-запроса для получения статистики viewCount Могу ли я использовать динамический контент в Popup popover? Не удалось загрузить файл https://packagist.org/packages.json Есть ли бесплатный open source PHP translit lib? php показать все изображения в каталоге и отсортировать по последнему измененному

Диаграмма Google добавляет еще один график рядом друг с другом

Я сделал рабочий график с mysql, и я хочу сделать еще один график рядом с моим 1-м графиком, но он не прошел хорошо.

мой код 

<?php $con = mysqli_connect('xxxx','xxxx','xxxx','xxxx'); ?> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> 1234 </title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ///Start Chart ['Date', 'Total Orders'], <?php $query = "SELECT count(totalExcl) AS count, saleType FROM ps_oxoquotation_quotation WHERE date_add >= '2017-01-01 00:00:00' GROUP BY saleType"; $exec = mysqli_query($con,$query); while($row = mysqli_fetch_array($exec)){ echo "['".$row['saleType']."',".$row['count']."],"; } ?> ///End Chart ]); var options = { title: 'Total Orders in 2017' }; var chart = new google.visualization.ColumnChart(document.getElementById("columnchart")); chart.draw(data, options); } </script> </head> <body> <h3>1234</h3> <div id="columnchart" style="width: 600px; height: 500px;"></div> </body> </html>

Это мой график, но я хочу сделать еще один рядом друг с другом:

введите описание изображения здесь

Related of "Диаграмма Google добавляет еще один график рядом друг с другом"

настоятельно рекомендую не смешивать php внутри html / javascript …

вместо этого, используйте php для возврата данных в формате json …

getdata1.php 

 <?php $query = "SELECT count(totalExcl) AS count, saleType FROM ps_oxoquotation_quotation WHERE date_add >= '2017-01-01 00:00:00' GROUP BY saleType"; $exec = mysqli_query($con,$query); $rows = array(); $table = array(); $table['cols'] = array( array('label' => 'Sale Type', 'type' => 'string'), array('label' => 'Total Orders', 'type' => 'number') ); while($row = mysqli_fetch_array($exec)){ $temp = array(); $temp[] = array('v' => (string) $row['saleType']); $temp[] = array('v' => (int) $row['count']); $rows[] = array('c' => $temp); } $table['rows'] = $rows; echo json_encode($table); ?>

затем используйте jquery / ajax, чтобы получить данные из php и нарисовать диаграмму … 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', { callback: function () { // draw chart from php data $.ajax({ url: 'getdata1.php', dataType: 'json', done: function (jsonData) { var data = new google.visualization.DataTable(jsonData); var options = { title: 'Total Orders in 2017' }; var chart = new google.visualization.ColumnChart(document.getElementById("columnchart")); chart.draw(data, options); }, fail: function(jqXHR, textStatus, errorThrown) { console.log(errorThrown + ': ' + textStatus); } }); // then just use another php page to get the other data and draw another chart $.ajax({ url: 'getdata2.php', dataType: 'json', done: function (jsonData) { var data = new google.visualization.DataTable(jsonData); var options = { title: 'Total Other Orders in 2017' }; var chart = new google.visualization.ColumnChart(document.getElementById("columnchart2")); chart.draw(data, options); }, fail: function(jqXHR, textStatus, errorThrown) { console.log(errorThrown + ': ' + textStatus); } }); }, packages: ['corechart'] }); </script>

обратите внимание , также рекомендуем использовать loader.js для загрузки библиотеки, а также jsapi

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

в соответствии с примечаниями к выпуску …

Версия Google Charts, которая остается доступной через загрузчик jsapi, не обновляется постоянно. С этого момента вы можете использовать новый gstatic loader.