Я пытаюсь создать линейную диаграмму Google с помощью AJAX.
И я хочу установить интервал для обновления данных, и я хочу, чтобы диаграмма рисовалась каждый раз после изменения размера страницы.
Итак, что я сделал, это-
index.html-
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- <div id="piechart"> -->
<div id="chart_div" style="width: 100%; height: 100%;">
<!-- Chart goes here -->
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/chart.js"> </script>
</html>
js/chart.js-
google.load('visualization', '1.1', {packages: ['line', 'corechart']});
function get_ajax_data_for_total_user()
{
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time');
data.addColumn('number', "Total Users");
var jsonData = $.ajax({
url: "ajax.php",
dataType: "json",
async: false
}).responseText;
var temp_AJAX_data=[];
$.each($.parseJSON(jsonData), function(index, element)
{
var time_year=0,time_month=0,time_day=0,time_hour=0,time_min=0,time_sec=0,total_user_no=0;
//console.log(index+" Start");
$.each(element,function(key,value)
{
if(key.localeCompare('time_year')==0)
{
time_year=value;
}
else if(key.localeCompare('time_month')==0)
{
time_month=value;
}
else if(key.localeCompare('time_day')==0)
{
time_day=value;
}
else if(key.localeCompare('time_hour')==0)
{
time_hour=value;
}
else if(key.localeCompare('time_min')==0)
{
time_min=value;
}
else if(key.localeCompare('time_sec')==0)
{
time_sec=value;
}
else if(key.localeCompare('total_user_no')==0)
{
total_user_no=value;
}
});
temp_AJAX_data.push([new Date(time_year, time_month,time_day,time_hour,time_min,time_sec), total_user_no]);
});
//console.log(temp_AJAX_data);
data.addRows(temp_AJAX_data);
return data;
}
function drawChart_totalUser(div_id)
{
var chartDiv = document.getElementById(div_id);
var Options =
{
chart:
{
title: 'No of Users in Different Time'
},
width: '100%',
height: '100%',
series:
{
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temps'},
1: {axis: 'Daylight'}
},
axes:
{
// Adds labels to each axis; they don't have to match the axis names.
y:
{
Temps: {label: 'Total Users'}
}
}/*,
animation:
{
duration: 1000,
easing: 'out',
}*/
};
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(get_ajax_data_for_total_user(), Options);
}
$(function()
{
if($("#chart_div").length != 0)
{
drawChart_totalUser('chart_div');
}
});
$( window ).resize(function()
{
if($("#chart_div").length != 0)
{
drawChart_totalUser('chart_div');
}
});
setInterval(function()
{
if($("#chart_div").length != 0)
{
drawChart_totalUser('chart_div');
}
}, 20000);
И ajax.php-
<?php
$JSON = array(
array(
'time_year' => 2005,
'time_month' => 10,
'time_day' => 12,
'time_hour' => 2,
'time_min' => 30,
'time_sec' => 12,
'total_user_no' => 100
),
array(
'time_year' => 2005,
'time_month' => 11,
'time_day' => 12,
'time_hour' => 2,
'time_min' => 30,
'time_sec' => 12,
'total_user_no' => 190
),
array(
'time_year' => 2005,
'time_month' => 12,
'time_day' => 12,
'time_hour' => 2,
'time_min' => 30,
'time_sec' => 12,
'total_user_no' => 90
),
array(
'time_year' => 2006,
'time_month' => 1,
'time_day' => 12,
'time_hour' => 2,
'time_min' => 30,
'time_sec' => 12,
'total_user_no' => 180
)
);
echo json_encode($JSON);
?>
Он отлично работает до любого обновления данных.
Но если я изменю его размер или через 20 секунд, когда данные обновятся с помощью AJAX, диаграмма исчезнет и ничего не будет отображаться.
Итак, он не работает, когда этот код выполняется -
$( window ).resize(function()
{
if($("#chart_div").length != 0)
{
drawChart_totalUser('chart_div');
}
});
setInterval(function()
{
if($("#chart_div").length != 0)
{
drawChart_totalUser('chart_div');
}
}, 20000);
Кто-нибудь может мне помочь?
Обновлять-
Я пытался-
Линейная диаграмма Google не перезагружается при перезагрузке раздел
И
Но не решить.
