Show only last three graph even after refresh
19 views
Skip to first unread message
Sandeep Paria
Feb 3, 2016, 10:46:30 AM2/3/16
to Flot graphs
hello guyz, My requirement is that I want to display 3 latest graph in a same page and even after automatically refresh in every 10 seconds. Suppose at first have 3 days (dy1-dy3) data and displayed in 3 graph and when refreshed in 10 seconds every time it must show only those 3 days graph(dy1 to dy3). Next time when it will be provided new data after refresh ,it will hide old graph that is dy3 because previously it was showing dy3 to dy5 and show last 3 days graph (dy4 to dy6) and even after refresh it must show dy4 to dy6 and so on. I tried so many times but every time when the page is refreshed it is showing from dy1 to dy3, after few second dy2 to dy4 and so on and when the page is again refreshed again same thing. I want that it must not change with every refresh and until provided dy7 must show dy4-dy6 even after refresh. Here is my code what I have tried---
<html> <head> <meta http-equiv="Refresh" Content="10"> <title>Graph</title> <style> div.placeholder{ width: 990px; height:250px } </style> <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"> var interval=1000; function getdata(){ var data1=[[0,4],[1,5],[2,1],[3,9],[4,6]]; var data2=[[5,7],[6,2],[7,11],[8,4],[9,1]]; var data3=[[10,5],[11,2],[12,7],[13,10],[14,3]]; var data4=[[15,2],[16,1],[17,7],[18,6],[19,14]]; var data5=[[20,3],[21,5],[22,10],[23,6]]; var data6=[[24,8],[25,13],[26,9]]; return [data1,data2,data3,data4,data5,data6]; } $(document).ready(function () { var dataset=[ { label: "Dy1", data: getdata()[0], points: { symbol: "square" } }, { label: "Dy2", data: getdata()[1], points: { symbol: "circle" } }, { label: "Dy3", data: getdata()[2], points: { symbol: "triangle" } }, { label: "Dy4", data: getdata()[3], points: { symbol: "cross" } }, { label: "Dy5", data: getdata()[4], points: { symbol: "cross" } } ,{ label: "Dy6", data: getdata()[5], points: { symbol: "cross" } } ]; 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]]); counter=i; } function update() { $('div.placeholder:visible:first').hide(); $('div.placeholder:last').after($('<div>').addClass('placeholder')); $.plot("div.placeholder:last", [dataset[counter++]]); if (counter < dataset.length) { setTimeout(update, interval); } } update(); }); </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>
Reply all
Reply to author
Forward
0 new messages