<!doctype html >
<?php date_default_timezone_set('Europe/Stockholm');?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="600" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload=
{'modules':[{'name':'visualization','version':'1.1','packages':
['corechart']}]}"></script>
<script type="text/javascript">
google.setOnLoadCallback(getData);
function getData() {
jQuery.ajax({
url: 'ajax_data.php',
type: 'GET',
dataType: 'json',
mimeType: 'multipart/form-data',
contentType: false,
cache: false,
processData: false,
success: function(data) {
if (data == "null") {} else {
drawGraph(data);
}
},
error: function(textStatus) {
console.log(" error getting data ");
}
});
}
function drawGraph(data) {
for (var i = data.length; i > 0; i--) {
data[i] = data[i - 1];
}
data[0] = ['Tid', 'Antal'];
var chartData = google.visualization.arrayToDataTable(data);
var view = new google.visualization.DataView(chartData);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
}]);
var options = {
'chartArea': {
'width': '90%',
'height': '80%'
},
width: 1750,
height: 1000,
legend: {
position: 'none'
},
vAxis: {
gridlines: {
count: 8
}
},
vAxis: {
minValue: 0,
maxValue: 45,
ticks: [0, 10, 20, 30, 40],
textStyle: {
fontSize: 60
}
},
hAxis: {
textStyle: {
fontSize: 60
}
},
annotations: {
textStyle: {
fontSize: 60
}
}
};
var chart = new google.visualization.SteppedAreaChart(document.
getElementById('chart_div'));
chart.draw(view, options);
}
setInterval(function() {
document.getElementById("Tiden").innerHTML = new Date().toLocaleString();
getData();
}, 1000);
</script>
</head>
<body>
<div class="chartWithOverlay">
<div id="chart_div"></div>
<div class="overlay">
<div style="font-family:'Arial Black'; font-size: 50px;">GB03</div>
<div style="color: #444; font-family:'Arial Black'; font-size: 32px;
letter-spacing: .10em; margin-top:0px; margin-left:5px;">
<div id="Tiden">
<?=date('Y-m-d H:i:s', time());?>
</div>
</div>
</div>
</div>
</body>
</html>
Hello, Thank you very much for your answer. This is the current working
code. I have been fighting many hours to correct the code, but I was
not able to move the creation of the instance "var chart = new google.
visualization.SteppedAreaChart(document.getElementById('chart_div'));
" out of the drawGraph function, and I have reversed the changes.
Could you please guide me again a little more in detail? Thank you very
much.
//Nick
Den fredag 12 augusti 2016 kl. 11:18:54 UTC+2 skrev Niklas Nässén:
>
> Hello,
>
> My chart is working perfectly, grabbing data from msSQL server every
> second, but the browser memory usage increases by 1Mb per second, causing
> the browser to crash after some hours. I have been looking at old posts
> from 2012-2015 showing workarounds, but I have not been able to implement
> them since I don't understand the explanations of the workarounds
> suggested. For example:
>
> if (chart) {
> chart.clearChart();
> }
>
>
>
> Is there a newer version of the API, then what do I need to change in my
> code to migrate? If not can someone help me in how to make the workarounds
> to work ?
>
> I added some code below that shows the main parts I used. And attached a
> screenshot, and one of the php script I use.
>
> Thanks Nick
>
>
>
>
>
> <script type="text/javascript" src="https://www.google.com/jsapi?autoload=
>
> {'modules':[{'name':'visualization','version':'1.1','packages':
> ['corechart']}]}"></script>
> <script type="text/javascript" >
>
>
>
>
> function getData() {
> jQuery.ajax({
> url: 'ajax_working2.php',
> type: 'GET',
> dataType: 'json',
> mimeType: 'multipart/form-data',
> contentType: false,
> cache: false,
> processData: false,
> success: function(data) {
> if (data == "null") {
>
> } else {
> drawGraph(data);
> }
> },
> error: function(textStatus) {
> console.log(" error.");
> }
> });
> }
>
>
> setInterval(function(){
> document.getElementById("Tiden").innerHTML = new Date().toLocaleString
> ();
> getData();
> },1000);
>
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/2c3e511d-43a9-4e86-b345-af94d597aa83%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
