agdar/static/data/chart-flot/code-7.json

<!-- required files -->
<script src="../assets/plugins/flot/source/jquery.canvaswrapper.js"></script>
<script src="../assets/plugins/flot/source/jquery.colorhelpers.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.saturated.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.browser.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.drawSeries.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.uiConstants.js"></script>

<div id="tracking-chart" class="h-250px"></div>

<script>
  var sin = [], cos = [];
  for (var i = 0; i < 14; i += 0.1) {
    sin.push([i, Math.sin(i)]);
    cos.push([i, Math.cos(i)]);
  }
    
  function updateLegend() {
    updateLegendTimeout = null;

    var pos = latestPosition;
    var axes = plot.getAxes();
    if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max || pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
      return;
    }
    var i, j, dataset = plot.getData();
    for (i = 0; i < dataset.length; ++i) {
      var series = dataset[i];

      for (j = 0; j < series.data.length; ++j) {
        if (series.data[j][0] > pos.x) {
          break;
        }
      }
      var y, p1 = series.data[j - 1], p2 = series.data[j];
      if (p1 === null) {
        y = p2[1];
      } else if (p2 === null) {
        y = p1[1];
      } else {
        y = p1[1];
      }
      legends.eq(i).text(series.label.replace(/=.*/, '= ' + y.toFixed(2)));
    }
  }
  if ($('#tracking-chart').length !== 0) {
    var plot = $.plot($('#tracking-chart'), [ 
      { data: sin, label: 'Series1', color: app.color.gray500, shadowSize: 0},
      { data: cos, label: 'Series2', color: app.color.blue, shadowSize: 0} 
    ], {
      series: { 
        lines: { show: true } 
      },
      crosshair: {
        mode: 'x', 
        color: app.color.red 
      },
      grid: { 
        hoverable: true, 
        autoHighlight: false, 
        borderColor: 'rgba('+ app.color.darkRgb + ', .15)', 
        borderWidth: 1,
        backgroundColor: 'rgba('+ app.color.darkRgb + ', .035)',
        tickColor: 'rgba('+ app.color.darkRgb + ', .15)'
      },
      yaxis: { tickColor: 'rgba('+ app.color.darkRgb + ', .15)' },
      xaxis: {
        tickColor: 'rgba('+ app.color.darkRgb + ', .15)'
      },
      legend: { show: true }
    });

    var updateLegendTimeout = null;
    var latestPosition = null;

    $('#tracking-chart').bind('plothover',  function (pos) {
      latestPosition = pos;
      if (!updateLegendTimeout) {
        updateLegendTimeout = setTimeout(updateLegend, 50);
      }
    });
  }
&lt;/script&gt;