我有一个从mysql表中获取值的图表。我能够得到值,但无法在条形图中显示它。图表返回空图,如下图所示。
正如您所看到的,这些值出现在控制台中,但是图形没有显示出来。
警报.php
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
var chart;
var data;
var options;
function drawChart() {
dataTable = google.visualization.arrayToDataTable([
['Floor', 'Sales', 'Expenses'],
['Floor 1', 1000, 400],
['Floor 2', 1170, 460],
['Floor 3', 660, 1120],
['Floor 4', 1030, 540]
]);
options = {
title: 'Company Performance for 1 month',
hAxis: {title: 'Floor', titleTextStyle: {color: 'red'}}
};
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
}
// function to update the chart with new data.
function updateChart() {
dataTable = new google.visualization.DataTable();
var newData = [['Floors','CO2(1)', 'CO2(2)', 'CO2(3)'],
<?php
$connect = mysqli_connect("localhost", "root", "", "test2");
$sql = "SELECT total AS sum_sales FROM expense WHERE asset_type = 'carbon-dioxide' AND floor = 'floor2'";
$result = mysqli_query($connect, $sql);
$sales_query = $conn->query($sql);
$sales_row = $sales_query->fetch_assoc();
//expense
$sql = "SELECT expenses AS sum_expenses FROM expense WHERE asset_type = 'carbon-dioxide' AND floor = 'floor2'";
$expense_query = $conn->query($sql);
$expense_row = $expense_query->fetch_assoc();
$profit = $sales_row['sum_sales'] - $expense_row['sum_expenses'];
//displaying the needed data
echo '['.$sales_row['sum_sales'].', '.$expense_row['sum_expenses'].', '.$profit.'],';
?>
];
var numRows = newData.length;
var numCols = newData[0].length;
// in this case the first column is of type 'string'.
dataTable.addColumn('string', newData[0][i]);
options = {
title: 'Gas Performance',
hAxis: {title: 'Floors', titleTextStyle: {color: 'red'}}
};
for (var i = 1; i < numCols; i++)
dataTable.addColumn('number', newData[0][i]);
// now add the rows.
for (var i = 0; i < numRows.length; i++)
dataTable.addRow(i, Number(newData[i]));
console.log(newData);
// redraw the chart.
chart.draw(dataTable, options);
// console.log(dataTable);
}
<label>Select period</label> <select name="vbitratecontrol0" id="combo1">;
<option value="24h">1 Day</option>
<option value="1w">1 Week</option>
<option value="1m">1 Month</option>
<option value="3m">3 Month</option>
<option value="6m">6 Month</option>
<option value="1y">1 Year</option>
<option value="2y">2 Year</option>
<option value="all">All</option>
</select>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
$(document).on('change', 'select', function() {
console.log($(this).val()); // the selected options’s value
var aaa =$(this).val();
// if you want to do stuff based on the OPTION element:
var opt = $(this).find('option:selected')[0];
console.log(opt);
// use switch or if/else etc.
if(aaa === "3m"){
updateChart();
}
});
该图表不显示条形图,但值是从数据库中提取的,您可以在控制台中看到这些值。帮我解决这个问题。
谢谢您!!
1条答案
按热度按时间w8biq8rn1#
addRow
只接受数组或者不为空行提供参数
然而,
newData
只有三个要素dataTable
有四列一定要让他们的号码匹配。。。