JavaScript — круговые диаграммы Google

Question

JavaScript — круговые диаграммы Google

Код JavaScript для добавления трехмерной круговой диаграммы (Google-диаграммы). Круговая диаграмма не отображается на виде. Как ее решить?

Javascript:

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

<script type="text/javascript">
$(function() {
<?php
$bookingData = array();
$i=0;
foreach($bookingCounts as $booking){
$bookingData[$i]['label'] = $booking['Name'];
$bookingData[$i]['data'] = $booking['total'];
$i++;
}
?>
var data = <?php echo json_encode($bookingData, JSON_NUMERIC_CHECK);?>;
console.log(data);

var options = {
title: 'Booking',
is3D: true,
};

var chart = new google.visualization.PieChart(document.getElementById('flot-pie-chart'));
chart.draw(data, options);


});

Мой взгляд это:

<div class="flot-chart">
<div class="flot-chart-content" id="flot-pie-chart">
</div>
</div>

11

javascript php pie-chart pygooglechart

Решение

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

Вы используете JQuery, не поддерживая его (с $() функция); быстрое исправление добавит этот элемент перед вашим основным скриптом:

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

Подробнее об импорте jQuery.

Однако, если это все jQuery, который вы собираетесь использовать, я рекомендую заменить $(function() { /* your code here */ } с альтернативой ванильного JavaScript, например:

document.addEventListener("DOMContentLoaded", function(event) {
/* your code here */
});

Подробнее об этом.

6

Что-то я заметил, что вы, кажется, не добавляете заголовки столбцов. Просто сделать это, просто выполнив тег скрипта:

 var data = new google.visualization.DataTable();
data.addColumn('Type', 'ColName');
data.addRows([ <?php PHP ?> ]);

В коде, который я разместил ниже, вам нужно будет сделать несколько вещей.

Сначала вам понадобятся заголовки столбцов. Во-вторых, вам нужно сделать JSON_ENCODE & Ваш запрос. В-третьих, измените представления, у меня в моем гугл-графике только выбираются строки 1, 2 & 3, при этом пропуская строку 0. Также очевидно измените тип диаграммы. Наконец в опциях добавить is3D: true,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/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']});
function drawChart(test_input) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Date');
data.addColumn('number', 'Test_Val_A');
data.addColumn('number', 'Test_Val_B');
data.addRows([
<?php
$dbName = "test_db";
$config = parse_ini_file("myconfigfile.ini",true);
$dbUser = $config["mydb"]["db_user"];
$dbServer = $config["mydb"]["db_ip"];
$dbPassword = $config["mydb"]["db_pass"];

$con = mysql_connect($dbServer, $dbUser, $dbPassword);

if (!$con) {
die('Could not connect: ' . mysql_error());
}

mysql_select_db($dbName, $con);
$sql = mysql_query("SELECT * FROM MyTable where Name like '$test_input'");
$output = array();

while($row = mysql_fetch_array($sql)) {
// create a temp array to hold the data
$temp = array();

// add the data
$temp[] = '"' . $row['Name'] . '"';
$temp[] = '"' . $row['Date'] . '"';
$temp[] = (int) $row['Test_Val_A'];
$temp[] = (int) $row['Test_Val_B'];
// implode the temp array into a comma-separated list and add to the output array
$output[] = '[' . implode(', ', $temp) . ']';
}
// implode the output into a comma-newline separated list and echo
echo implode(",\n", $output);

mysql_close($con);
?>
]);
var view = new google.visualization.DataView(data);
view.setRows(data.getFilteredRows([
{column: 0, value: test_input}
]));
view.setColumns([1,2,3]);

var options = {
tooltip: {
trigger: 'both',
},
vAxis: { 'title': 'Volume' },
hAxis: { slantedText: true},
crosshair: { trigger: 'both'},
width: 1900,
height: 400
};

var chart = new google.visualization.LineChart(document.getElementById('Whatever_my_id_is'));
chart.draw(view, options);
}
</script>

6

Источник

Accepted Answer

Javascript:

<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() {
<?php
$bookingData = array();
$i=1;
$bookingData[0][0] = 'Task';
$bookingData[0][1] = 'Hours per Day';
foreach($bookingCounts as $booking){
$bookingData[$i][0] = $booking['Name'];
$bookingData[$i][1] = $booking['total'];
$i++;
}
?>

var data = <?php echo json_encode($bookingData, JSON_NUMERIC_CHECK);?>;
console.log(data);
var data2 = google.visualization.arrayToDataTable(data);

var options = {
title: '',
is3D: true,
};

var chart = new google.visualization.PieChart(document.getElementById('flot-pie-chart'));
chart.draw(data2, options);


};

7