How can I incorporate the correct date into my high stock chart? I keep getting the months January to February (correct range should be from July to August) in my slider, which is incorrect. In my PHP I convert the date/time from my database into a JavaScript timestamp, but still doesn't work. Any help would be great, thanks!
Output Array: data.txt
Current high stocks Chart:
PHP & JS and HTML:
<?php
$stmt = mysqli_prepare($con, "SELECT date, IFNULL(AT,'null') FROM test");
$result = array('date' => array(), 'AT' => array());
if ($stmt) {
mysqli_stmt_execute($stmt);
mysqli_stmt_bind_result($stmt, $date, $at);
while (mysqli_stmt_fetch($stmt)) {
$result['date'][] = $date;
$result['AT'][] = (int)$at;
$stamp = strtotime($date); // get unix timestamp
$time = $stamp*1000;
}
mysqli_stmt_close($stmt);
}
?>
<!DOCTYPE html>
<html >
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script>
$(function(data) {
$('#chart2').highcharts('StockChart', { //Stock chart - might need zones to match gauges
rangeSelector : {
buttons : [{
type : 'hour',
count : 3,
text : '3h'
}, {
type : 'day',
count : 2,
text : '2D'
}, {
type : 'week',
count : 1,
text : '1W'
}, {
type : 'month',
count : 1,
text : '1M'
}, {
type : 'all',
count : 1,
text : 'All'
}],
selected : 2,
},
title: {
text: 'Power'
},
yAxis: [{
title: {
text: 'Bat V'
},
height: 400,
lineWidth: 2,
oposite: true
}, {
title: { // yAxis 1 ie secondary y-axis
text: 'Solar V'
},
//top: 200,
height: 400,
offset: 25,
lineWidth: 2,
oposite: false
}],
xAxis:{
type: <?php echo json_encode($time) ?>,
},
series: [{
pointInterval: 24 * 3600 * 1000,
type: 'line',
data: <?php echo json_encode($result['AT']) ?>
},],
}); //end of stockchart graphic
// end of get function
}); // end of graphing function
</script>
</head>
<body>
<?php echo $time; ?>
<br><br /><br /><br />
<div id="chart2" style="width:100%; height:600px;"></div>
</body>
</html>
Based on your Output Array: data.txt which is [["2017-07-25 16:44",12],["2017-07-25 17:00",12],...] it should be [[1500981240000,12],[1500982200000,12],...] so fix is $result['date'][] = strtotime($date)*1000 get unix timestamp in milliseconds
<?php
$stmt = mysqli_prepare($con, "SELECT date, IFNULL(AT,'null') FROM test");
$result = array('date' => array(), 'AT' => array());
if ($stmt) {
mysqli_stmt_execute($stmt);
mysqli_stmt_bind_result($stmt, $date, $at);
while (mysqli_stmt_fetch($stmt)) {
$result['date'][] = strtotime($date)*1000; // get unix timestamp in milliseconds
$result['AT'][] = (int)$at;
$stamp = strtotime($date); // get unix timestamp
$time = $stamp*1000;
}
mysqli_stmt_close($stmt);
}
?>
Related
$days = ["Monday","Tuesday","Wednesday"];
$rates = [40,60,80];
$profit = [];
foreach($days as $day => $value){
foreach($rates as $rate){
$netprofit = $rate* 20;
$profit[$value] = [$rate=> $netprofit];
}
}
$usersChart = new UserChart;
$usersChart->labels($days);
foreach($profit as $key => $value){
$data = array();
foreach ($value as $values){
$data[] = $values;
}
$usersChart->dataset($key, 'line', collect($data));
}
I want to show this array into Chartjs Line Graph. I want the x axis to be the 40,60,80. Y axis to be 800, 1200, 1600. The Dataset or Lines should be Monday, Tuesday and Wednesday.
Right now i get Monday, Tuesday and Wednesday as x axis and Line. 600,800 etc are on y axis.
Array
(
[Monday] => Array
(
[40] => 800
[60] => 1200
[80] => 1600
)
[Tuesday] => Array
(
[40] => 800
[60] => 1200
[80] => 1600
)
[Wednesday] => Array
(
[40] => 800
[60] => 1200
[80] => 1600
)
)
keep your array as it is and convert it to JSON object and then echo it inside Javascript, javascript have to be inside php file to run, not in external javascript file.
notice that there is PHP code in this example and i have put <?php echo $json; ?> inside the javascript code.
<html>
<head>
<style>body{width: 800px;}</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
</head>
<body>
<div>
<canvas id="myChart" width="700px" height="300px"></canvas>
</div>
<?php
$array = array(600, 800, 1200, 1800);
$json = json_encode($array);
?>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ["20", "40", "60", "80"],
datasets: [
{
label: 'Monday',
borderColor: "#FF9F40",
data: <?php echo $json; ?>,
},
{
label: 'Tuesday',
borderColor: "#FF6384",
data: [600, 800, 1200, 1800]
},
{
label: 'Wednesday',
borderColor: "#219151",
data: [600, 800, 1200, 1800]
}
]
},
// Configuration options go here
options: {}
});
</script>
</body>
</html>
So this is the first time i have really worked with high charts i have some data reading into high charts from my MySQL database, but the next step is to try and set up a high stocks chart. Whenever i try and use the same method as i did with high charts the chart doesn't work? This is what i want to aim for - StockChartDemo
PHP Code:
$conn = new mysqli($servername, $username, $password, $dbName);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "(SELECT date AS time ,IFNULL(RH,'null')AS humidity
FROM test ORDER BY date DESC LIMIT 20) ORDER BY time ASC";
$result = $conn->query($sql);
if ($result->num_rows>0){
$count =0;
echo '[';
while($row=$result->fetch_assoc()){
echo '['.$row["time"].',' .$row["humidity"].']';
$count++;
if ($count<"20"){
echo ',';
}
}
echo ']';
}else{
echo "[[],[]]";
}
$conn->close();
?>
html & jQuery:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="highstock.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var options = {
chart: {
renderTo: 'tempcontainer',
alignTicks: false,
height:320,
},
rangeSelector: {
selected: 1
},
title: {
text: 'Relative humidity'
},
series: [{
type: 'column',
name: 'Humidity',
data: json,
dataGrouping: {
units: [[
'month', // unit name
[1] // allowed multiples
], [
'week',
[1, 2, 3, 4, 6]
]]
}
}]
}
$.getJSON("stockdata.php", function(json) { /*Get the array data in data.php using jquery getJSON function*/
options.series[0].data = json; /*assign the array variable to chart data object*/
chart = new Highcharts.stockChart(options); /*create a new chart*/
});
function refreshChart(){ /*function is called every set interval to refresh(recreate the chart) with the new data from data.php*/
setInterval(function(){
$.getJSON("stockdata.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.stockChart(options);
});
},60000);
}
});
</script>
<div id="tempcontainer"></div>
Presuming your query is returning the correct data you want. (I'm not up for mocking it out to test your query)
You should switch out the following code, and all that in-between.
if ($result->num_rows>0){
//snip
}
To use json_encode() instead.
$series = [];
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$series[] = [
$row["time"],
$row["humidity"]
];
}
}
header('Content-Type: application/json');
exit(json_encode($series));
I'm working with Highcharts and Highstock from a few weeks ago. Step by step, following the documentation and help online, I have builded some charts with interesting options. But now I have a question, and my skills with mysql and php are limited.
I get temperature values from a data base, every minute. I use a php file to connect to database, and then I build the chart. Now, I want to update the chart like in this example. But I can't find a right way. I was reading in Highcharts documentation, and Stackoverflow some answers, but I can't implement into my code.
I was working in 2 ways to implement the dynamic updates. The first one is:
<?php
function conectarBD(){
$server = "localhost";
$usuario = "user";
$pass = "password";
$BD = "databasename";
$conexion = mysqli_connect($server, $usuario, $pass, $BD);
if(!$conexion){
echo 'Ha sucedido un error inexperado en la conexion de la base de datos<br>';
}
return $conexion;
}
function desconectarBD($conexion){
$close = mysqli_close($conexion);
if(!$close){
echo 'Ha sucedido un error inexperado en la desconexion de la base de datos<br>';
}
return $close;
}
function getArraySQL($sql){
$conexion = conectarBD();
if(!$result = mysqli_query($conexion, $sql)) die();
$rawdata = array();
$i=0;
while($row = mysqli_fetch_array($result))
{
$rawdata[$i] = $row;
$i++;
}
desconectarBD($conexion);
return $rawdata;
}
$sql = "SELECT Probe1,Time from table2;";
$rawdata = getArraySQL($sql);
for($i=0;$i<count($rawdata);$i++){
$time = $rawdata[$i]["Time"];
$date = new DateTime($time);
$rawdata[$i]["Time"]=$date->getTimestamp()*1000;
}
?>
<HTML>
<BODY>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container">
</div>
<script type='text/javascript'>
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
var series = this.series[0];
setInterval(function () {
<?php
for($i = 0 ;$i<count($rawdata);$i++){
?>
series.addPoint([<?php echo $rawdata[$i]["Time"];?>,<?php echo $rawdata[$i]["Probe1"];?>], true, true);
<?php } ?>
}, 90000);
}
}
},
title: {
text: 'Tunnel temperature'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'ºC'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d-%b %H:%M', this.x) +'<br/>'+
'<b>'+ Highcharts.numberFormat(this.y, 1) +'</b>';
}
},
legend: {
enabled: true
},
exporting: {
enabled: true
},
series: [{
name: 'Probe-1',
data: (function() {
var data = [];
<?php
for($i = 0 ;$i<count($rawdata);$i++){
?>
data.push([<?php echo $rawdata[$i]["Time"];?>,<?php echo $rawdata[$i]["Probe1"];?>]);
<?php } ?>
return data;
})()
}]
});
});
});
</script>
</html>
And this other way:
Connection to datatest2.php:
<?php
//convert the date values to Unix Timestamp
//Convert from 2017-02-28 19:30:01 to Tuesday, February 28 2017 19:30:01
$con = mysql_connect("localhost","username","password");
if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("databasename", $con);
$result = mysql_query("SELECT * FROM table2");
while ($row = mysql_fetch_array($result)) {
$uts=strtotime($row['Time']); //convertir a Unix Timestamp
$date=date("l, F j Y H:i:s",$uts);
//echo $valor3 . “\t” . $row[$valor2]. “\n”;
echo $date . "\t" . $row['Probe1'] . "\n";
}
mysql_close($con); ?>
And the php file for the chart:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Highstock & multiple</title>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Temperature Tunnel',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
rangeSelector: {
buttons: [
{
type: 'all',
text: 'all'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'hour',
count: 18,
text: '18h'
}, {
type: 'hour',
count: 12,
text: '12h'
}, {
type: 'hour',
count: 6,
text: '6h'
}]
},
xAxis: {
type: 'datetime',
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'center',
x: -3,
y: 20,
formatter: function() {
return Highcharts.dateFormat('%d-%b %H:%M', this.value);
}
}
},
yAxis: {
title: {
text: 'Celsius degrees'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return Highcharts.dateFormat('%d-%b %H:%M', this.x) +': <b>'+ this.y + '</b>';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Probe1'
}]
}
jQuery.get('datatest2.php', null, function(tsv) {
var lines = [];
traffic = [];
try {
// split the data return into lines and parse them
tsv = tsv.split(/\n/g);
jQuery.each(tsv, function(i, line) {
line = line.split(/\t/);
date = Date.parse(line[0] +' UTC');
traffic.push([
date,
parseInt(line[1].replace(',', ''), 10)
]);
});
} catch (e) { }
options.series[0].data = traffic;
chart = Highcharts.stockChart (options);
setInterval(function() { tsv; }, 30000);
pollChart.series[0].setData(data);
});
});
</script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>
</body>
</html>
Can you help me to find and fix the mistake?
Thanks!
Alex.
Using a combination of your first example and the JSFiddle that you posted, I would try something like this:
chart: {
events: {
load: function () {
var series = this.series[0];
setInterval(function () {
<?php
for($i = 0 ;$i<count($rawdata);$i++){
?>
series.addPoint([<?php echo $rawdata[$i]["Time"];?>,<?php echo $rawdata[$i]["Probe1"];?>], true, true);
<?php } ?>
}, 1000);
}
}
}
Note that I have no idea whether your PHP code there is actually retrieving the data that you wanted, I have simply copied it from your example and made the assumption that that part of the code was ok.
The key here is the chart.events.load property, this takes a function that fires once the chart has finished loading. By calling setInterval here, your function will fire continuously after the chart finishes loading the first time.
By calling series.addPoint, your chart will redraw every time a new point is added, which I believe is what you want.
More information is available here about the load property.
http://www.highcharts.com/stock/demo/basic-line
It's my code for json.php
<?php
header("content-type: application/json");
define('HOST', 'localhost');
define('USER', 'root');
define('PASSWORD', 'password');
define('NAME_BD', 'bd');
$connect = mysql_connect(HOST, USER, PASSWORD)
or die("die"
.mysql_error( ));
mysql_select_db(NAME_BD, $connect)
or die ("wtf"
.mysql_error( ));
$result = mysql_query("SELECT UNIX_TIMESTAMP(`Time`) * 1000 as datetime, `Current A` as A FROM `Table`")
or die ("die".mysql_error( ));
while ($row = mysql_fetch_array($result)) {
$data[] = $row['datetime'];
$datab[] = $row['A'];
}
echo '?(' . "\n" . '['. "\n";
$count = count($data);
for ($i=0; $i<$count; $i++)
{
echo '['. str_replace('"', "", json_encode($data[$i], JSON_HEX_APOS)) . ',' . str_replace('"', "", json_encode($datab[$i], JSON_HEX_APOS)) .']' . ',' . "\n";
}
echo ']);';
?>
I refresh my page and highstock don't draw. Please help me.
It's my stock.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$.getJSON('http://192.168.1.175/json.php', function (data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data
}]
});
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
</body>
</html>
Stock.html call json.php but when a refresh stock.html i don't see draw.
Please help me
Please try below code
in Ajax code
function drawGrap()
{
$.ajax({
type: "POST",
url: 'graph.php',
data: '',
success: function(json) {
drawSalesChart(json);
}
});
}
in graph.php
<?php
if(!empty($data))
{
foreach ($data as $d)
{
$time = strtotime($d['date']);
$date = date("Y-m-d",$time);
$graphData[$date][0] = 'Date.UTC('. date("Y",$time) .','. (date("m",$time)-1) .','. date("d",$time) .')';
$graphData[$date][1] = $d['count'];
}
}
sort($graphData);
//Convert result array to json format
$jsonGraphData = json_encode($graphData);
$jsonGraphData = str_replace('"', '', $jsonGraphData);
echo $jsonGraphData;
?>
After response
function drawSalesChart( data)
{
$('#GraphID').css("height", "400px");
$('#GraphID').highcharts('StockChart', {
title: {
text: 'Daily Sales'
},
colors: ['#920000'],
navigator: {
enabled: false
},
rangeSelector: {
selected: 5,
buttons: [
{
type: 'week',
count: 1,
text: '1 Week'
},
{
type: 'month',
count: 1,
text: '1 Month'
},
{
type: 'month',
count: 3,
text: '3 Months'
},
{
type: 'month',
count: 6,
text: '6 Months'
},
{
type: 'year',
count: 1,
text: '1 Year'
},
{
type: 'all',
text: 'All'
}
],
buttonTheme: {
width: 100,
padding: 5,
style: {
color: '#000000'
}
}
},
series: [{
name: 'Kr',
type: 'area',
data: eval(data),
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#FF4848'],
[1, '#ffe1e1'],
]
}
}]
});
}
I want to get last 3 graph using refresh where the page automatically refresh in every 10 seconds. Here in this code when the page is refreshing automatically it start showing from beginning but i don't want that way.When the page will refresh every time it must show its last 3 graph. As here only 4 data available, it must show only D2 to D4 graph only even after refresh. When new data will be available it will display D3 to D5(which is not available right now) graph. How can i get last three graph after refreshing the page automatically?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Refresh" Content="10">
<title>Graph</title>
<style>
div.placeholder{
width: 500px;
height:250px
}
</style>
<?php
include("mydb.php");
// run query
$sql1 = "select * from tab where to_char(D,'dd/mm')='25-7'";
$stid1=oci_parse($conn, $sql1);
// set array
$arr1 = array();
if(!$stid1){
$e=oci_error($conn);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
$r1=oci_execute($stid1);
if(!$r1){
$e=oci_error($stid1);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
// look through query
while($row = oci_fetch_array($stid1,OCI_ASSOC)){
// add each row returned into an array
$arr1[] = array((strtotime($row['D'])*1000) , (float)$row['D1']);
}
?>
<?php
include("mydb.php");
// run query
$sql2 = "select * from tab where to_char(D,'dd/mm')='26-7'";
$stid2=oci_parse($conn, $sql2);
// set array
$arr2 = array();
if(!$stid1){
$e=oci_error($conn);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
$r2=oci_execute($stid2);
if(!$r2){
$e=oci_error($stid2);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
// look through query
while($row = oci_fetch_array($stid2,OCI_ASSOC)){
// add each row returned into an array
$arr2[] = array((strtotime($row['D'])*1000) , (float)$row['D1']);
}
?>
<?php
include("mydb.php");
// run query
$sql3 = "select * from tab where to_char(D,'dd/mm')='27-8'";
$stid3=oci_parse($conn, $sql3);
// set array
$arr3 = array();
if(!$stid3){
$e=oci_error($conn);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
$r3=oci_execute($stid3);
if(!$r3){
$e=oci_error($stid3);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
// look through query
while($row = oci_fetch_array($stid3,OCI_ASSOC)){
// add each row returned into an array
$arr3[] = array((strtotime($row['D'])*1000) , (float)$row['D1']);
}
?>
<?php
include("mydb.php");
// run query
$sql4 = "select * from dat where to_char(D,'dd/mm')='28-9'";
$stid4=oci_parse($conn, $sql4);
// set array
$arr4 = array();
if(!$stid4){
$e=oci_error($conn);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
$r4=oci_execute($stid4);
if(!$r4){
$e=oci_error($stid4);
trigger_error(htmlentities($e[message],ENT_QUOTES),E_USER_ERROR);
}
// look through query
while($row = oci_fetch_array($stid4,OCI_ASSOC)){
// add each row returned into an array
$arr4[] = array((strtotime($row['D'])*1000) , (float)$row['D1']);
}
?>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="excanvas.js"></script>
<script type="text/javascript" src="jquery.flot.symbol.min.js"></script>
<script type="text/javascript" src="jquery.flot.axislabels.js"></script>
<script type="text/javascript" src="jquery.flot.time.min.js"></script>
<script type="text/javascript">
var interval=2000;
function getdata(){
var data1=<?php echo json_encode($arr1); ?>;
var data2=<?php echo json_encode($arr2); ?>;
var data3=<?php echo json_encode($arr3); ?>;
var data4=<?php echo json_encode($arr4); ?>;
return [data1,data2,data3,data4];
}
var options={
series: {
lines: {
show: true,
lineWidth: 2,
fill: true
},
points:{
show: "triangle"
}
},
xaxis: {
axisLabel: "Time",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
yaxis: {
axisLabel: "Data loading",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 6
},
legend: {
labelBoxBorderColor: "#B0D5FF"
},
grid: {
hoverable: true,
clickable: true,
backgroundColor: {
colors: ["#B0D5FF", "#5CA8FF"]
}
}
};
$(document).ready(function () {
var dataset=[
{
label: "D1",
data: getdata()[0],
points: {
symbol: "triangle"
}
},
{
label: "D2",
data: getdata()[1],
points: {
symbol: "circle"
}
},
{
label: "D3",
data: getdata()[2],
points: {
symbol: "triangle"
}
},
{
label: "D4",
data: getdata()[3],
points: {
symbol: "triangle"
}
}
];
var counter=0;
for(var i=1,j=0;i<dataset.length,j<$('div.placeholder').length;i++,j++){
$.plot("div.placeholder:eq(" + j + ")", [dataset[j]], options);
counter=i;
}
function update() {
$('div.placeholder:visible:first').hide();
$('div.placeholder:last').after($('<div>').addClass('placeholder'));
$.plot("div.placeholder:last", [dataset[counter++]], options);
if(dataset.length > counter) {
setTimeout(update, interval);
}
}
setTimeout(update, interval);
});
</script>
</head>
<body>
<center>
<h3><b><u>Chart</u></b></h3>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</center>
</body>
</html>