Я пытаюсь динамически отображать Google Charts
в HTML
с использованием JavaScript
и Google Chart API
, но он, кажется, не загружается.Почему моя диаграмма Google не отображается?
На странице просто отображается мое текстовое поле и ничего больше, и даже текстовое поле onblur
событие не предупреждает меня в браузере.
Ниже приведен код, который я использую ...
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
function test() {
alert("TEST OUTPUT");
}
var chart_data = google.visualization.arrayToDataTable([
['Days', 'Sales', 'Cheeky', 'test'],
['19/07/2016', 10, 5, 3],
['20/07/2016', 5, 4, 2],
['21/07/2016', 15, 3, 1],
['22/07/2016', 2, 1, 2]
]);
var startdate = "20/07/2016";
var enddate = "21/07/2016";
google.charts.load('current', {'packages':['corechart']});
google.setOnLoadCallback(load_page_data);
function load_page_data(){
$.ajax({
url: 'get_data.php',
data: {'startdate':startdate,'enddate':enddate},
async: false,
success: function(data){
if(data){
chart_data = $.parseJSON(data);
drawChart(chart_data, "My Chart", "Data");
}
},
});
}
function drawChart(chart_data, chart1_main_title, chart1_vaxis_title) {
var chart1_data = new google.visualization.DataTable(chart_data);
var chart1_options = {
title: chart1_main_title,
vAxis: {title: chart1_vaxis_title, titleTextStyle: {color: 'red'}, minValue: 0, gridlines: { color: '#AC935D'} }
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
backgroundColor:{fill: 'transparent'},
colors: ['#87734A', 'red', 'black'],
};
var chart1_chart = new google.visualization.AreaChart(document.getElementById('chart1_div'));
chart1_chart.draw(chart1_data, chart1_options);
}
</script>
</head>
<body bgcolor="#E2C17A">
<p>Date1: <input type="text" onchange="test()"></p><br/>
<div id="chart1_div" style="width: 900px; height: 500px;"></div><br/>
</body>
</html>
Что я делаю неправильно?
Собираетесь ли вы отображать статические данные или динамические данные? –
@ jnanthak идея состоит в том, что я отображаю динамические данные с использованием операторов SQL из базы данных на веб-сайте. – TheAuzzieJesus