var s1 = []; var s2 = []; var plot1 = null; //$(document).ready(function () { // s1.push([new Date().getTime(), 20]); // s2.push([new Date().getTime(), 30]); // update(); //}); $(function () { // s1.push([new Date().getTime(), Math.floor((Math.random() * 100) + 1)]); // s2.push([new Date().getTime(), Math.floor((Math.random() * 100) + 1)]); // plot(); update(); function update() { if (plot1 !== null) { plot1.destroy(); } if (s1.length > 9) { s1.shift(); } if (s2.length > 9) { s2.shift(); } var date = new Date(); s1.push([date.getTime(), Math.floor((Math.random() * 100) + 1)]); s2.push([date.getTime(), Math.floor((Math.random() * 100) + 1)]); plot(); setTimeout(update, 3000); } }); function plot() { plot1 = $.jqplot("chart", [s2, s1], { // Turns on animatino for all series in this plot. animate: true, // Will animate plot on calls to plot1.replot({resetAxes:true}) animateReplot: true, cursor: { show: true, zoom: true, looseZoom: true, showTooltip: false }, series: [ { pointLabels: { show: true }, renderer: $.jqplot.BarRenderer, showHighlight: true, yaxis: 'y2axis', rendererOptions: { // Speed up the animation a little bit. // This is a number of milliseconds. // Default for bar series is 3000. animation: { speed: 2500 }, barWidth: 20, barPadding: -15, barMargin: 0, highlightMouseOver: true } }, { rendererOptions: { // speed up the animation a little bit. // This is a number of milliseconds. // Default for a line series is 2500. animation: { speed: 2000 } } } ], axesDefaults: { pad: 0 }, axes: { // These options will set up the x axis like a category axis. xaxis: { renderer: $.jqplot.DateAxisRenderer, rendererOptions: { tickInset: 0.5 // minorTicks: 1 }, tickOptions: { formatString: '%H:%M:%S' }, min: s1[0][0], max: s1[0][s1.length] // tickInterval: '1 minute' }, yaxis: { min: 0, max: 100, tickOptions: { formatString: " " }, rendererOptions: { forceTickAt0: true } }, y2axis: { min: 0, max: 100, tickOptions: { formatString: "%d\%" }, rendererOptions: { // align the ticks on the y2 axis with the y axis. alignTicks: true, forceTickAt0: true } } }, highlighter: { show: true, showLabel: true, tooltipAxes: 'y', sizeAdjust: 7.5, tooltipLocation: 'ne' } }); } $("#buttonUpdate").click(function () { var time = new Date(); plot1.destroy(); if (s1.length > 9) { s1.shift(); } if (s2.length > 9) { s2.shift(); } s1.push([time.getTime(), Math.floor((Math.random() * 100) + 1)]); s2.push([time.getTime(), Math.floor((Math.random() * 100) + 1)]); plot(); });