jquery - Google Line chart With Refresh - Not working after refresh -
i trying create google line chart ajax.
and want set interval refreshing data , want chart drawn each time after page resized.
so, have done is-
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 axis name matches y-axis below. 0: {axis: 'temps'}, 1: {axis: 'daylight'} }, axes: { // adds labels each axis; don't have match 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); and 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); ?> it working before refresh of data.
but if resize or after 20s when data refreshes ajax, chart gone , nothing shows.
so, not working when codes executes-
$( window ).resize(function() { if($("#chart_div").length != 0) { drawchart_totaluser('chart_div'); } }); setinterval(function() { if($("#chart_div").length != 0) { drawchart_totaluser('chart_div'); } }, 20000); can me please?
update-
i have tried-
and
but not getting solved.
Comments
Post a Comment