Skip to content

Instantly share code, notes, and snippets.

@iambigd

iambigd/jqplot-realtime

Created December 18, 2014 07:30
Download ZIP

Revisions

  1. iambigd created this gist Dec 18, 2014.
    106 changes: 106 additions & 0 deletions jqplot-realtime
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,106 @@
    <HTML>
    <HEAD>
    <!--[if lt IE 9]><script type="text/javascript" src="http://cdn.jsdelivr.net/excanvas/r3/excanvas.js"></script><![endif]-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.dateAxisRenderer.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
    <link href="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    $(document).ready(function(){
    var t = 1000;
    var x = (new Date()).getTime(); // current time
    var n = 5;//20;
    data = [];
    //先做一些假的值為起點

    for(i=0; i<n; i++){
    data.push([x - (n-1-i)*t,0]);
    }


    var options = {
    axes: {
    xaxis: {
    numberTicks: 10,
    renderer:$.jqplot.DateAxisRenderer,
    tickOptions:{formatString:'%H:%M:%S'},
    min : data[0][0],
    max: data[data.length-1][0]
    },
    yaxis: {
    min:0,
    max: 1,
    numberTicks: 15,
    tickOptions:{formatString:'%.1f'}
    }
    },
    seriesDefaults: {
    color: '#00ff00', // CSS color spec to use for the line. Determined automatically.
    rendererOptions: { smooth: true}
    },
    legend: {
    show: true,
    location: 'e', // compass direction, nw, n, ne, e, se, s, sw, w.
    placement : "outside",
    rendererOptions: {
    // set to true to replot when toggling series on/off
    // set to an options object to pass in replot options.
    seriesToggle: 'normal',
    seriesToggleReplot: {resetAxes: true}
    }
    },
    grid: {
    drawBorder: false,
    shadow: false,
    drawGridLines: true, // wether to draw lines across the grid or not.
    gridLineColor: '#cccccc', // *Color of the grid lines.
    background: '#000', // CSS color spec for background color of grid.
    borderColor: '#777', // CSS color spec for border around grid.
    borderWidth: 1.0 // pixel width of border around grid.
    }
    };


    console.log(data);
    var plot1 = $.jqplot ('targetPlot', [data],options);

    $('button').click( function(){
    doUpdate();
    $(this).hide();
    });

    function doUpdate() {
    if(data.length > n-1){

    data.shift();
    console.log('after shift:');
    console.log(data.length);
    }

    var y = Math.random();
    var x = (new Date()).getTime();
    data.push([x,y]);
    console.log('add new one');
    console.log(data.length);
    if (plot1) {
    plot1.destroy();
    }
    plot1.series[0].data = data;
    options.axes.xaxis.min = data[0][0];
    options.axes.xaxis.max = data[data.length-1][0];
    //$('.jqPlot').remove();
    //$('#plotContainer').append('<div class="jqPlot" id="targetPlot" style="height:300px; width:300px;"></div>');
    //$('#plotContainer').append('<div class="jqPlot" id="controllerPlot" style="margin-top: 30px; height:300px; width:300px;"></div>');
    console.log(data);
    plot1 = $.jqplot('targetPlot', [data],options);
    setTimeout(doUpdate, t);
    }
    });
    </script>
    <div id="plotContainer"> no remove
    <div class="jqPlot" id="targetPlot" style="height:600px; width:600px;"></div>
    </div>
    <button>Start Updates</button>
    </BODY>
    </HTML>