text: //chart with points
  if ($("#sincos").length) {
      var sin = [], cos = [];
  
      for (var i = 0; i < 14; i += 0.5) {
          sin.push([i, Math.sin(i) / i]);
          cos.push([i, Math.cos(i)]);
      }
  
      var plot = $.plot($("#sincos"),
          [
              { data: sin, label: "sin(x)/x"},
              { data: cos, label: "cos(x)" }
          ], {
              series: {
                  lines: { show: true  },
                  points: { show: true }
              },
              grid: { hoverable: true, clickable: true, backgroundColor: { colors: ["#fff", "#eee"] } },
              yaxis: { min: -1.2, max: 1.2 },
              colors: ["#539F2E", "#3C67A5"]
          });
  
      function showTooltip(x, y, contents) {
          $('<div id="tooltip">' + contents + '</div>').css({
              position: 'absolute',
              display: 'none',
              top: y + 5,
              left: x + 5,
              border: '1px solid #fdd',
              padding: '2px',
              'background-color': '#dfeffc',
              opacity: 0.80
          }).appendTo("body").fadeIn(200);
      }
  
      var previousPoint = null;
      $("#sincos").bind("plothover", function (event, pos, item) {
          $("#x").text(pos.x.toFixed(2));
          $("#y").text(pos.y.toFixed(2));
  
          if (item) {
              if (previousPoint != item.dataIndex) {
                  previousPoint = item.dataIndex;
  
                  $("#tooltip").remove();
                  var x = item.datapoint[0].toFixed(2),
                      y = item.datapoint[1].toFixed(2);
  
                  showTooltip(item.pageX, item.pageY,
                      item.series.label + " of " + x + " = " + y);
              }
          }
          else {
              $("#tooltip").remove();
              previousPoint = null;
          }
      });
  
  
      $("#sincos").bind("plotclick", function (event, pos, item) {
          if (item) {
              $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
              plot.highlight(item.series, item.datapoint);
          }
      });
  }
  
  //flot chart
  if ($("#flotchart").length) {
      var d1 = [];
      for (var i = 0; i < Math.PI * 2; i += 0.25)
          d1.push([i, Math.sin(i)]);
  
      var d2 = [];
      for (var i = 0; i < Math.PI * 2; i += 0.25)
          d2.push([i, Math.cos(i)]);
  
      var d3 = [];
      for (var i = 0; i < Math.PI * 2; i += 0.1)
          d3.push([i, Math.tan(i)]);
  
      $.plot($("#flotchart"), [
          { label: "sin(x)", data: d1},
          { label: "cos(x)", data: d2},
          { label: "tan(x)", data: d3}
      ], {
          series: {
              lines: { show: true },
              points: { show: true }
          },
          xaxis: {
              ticks: [0, [Math.PI / 2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3 / 2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]
          },
          yaxis: {
              ticks: 10,
              min: -2,
              max: 2
          },
          grid: {
              backgroundColor: { colors: ["#fff", "#eee"] }
          }
      });
  }
  
  //stack chart
  if ($("#stackchart").length) {
      var d1 = [];
      for (var i = 0; i <= 10; i += 1)
          d1.push([i, parseInt(Math.random() * 30)]);
  
      var d2 = [];
      for (var i = 0; i <= 10; i += 1)
          d2.push([i, parseInt(Math.random() * 30)]);
  
      var d3 = [];
      for (var i = 0; i <= 10; i += 1)
          d3.push([i, parseInt(Math.random() * 30)]);
  
      var stack = 0, bars = true, lines = false, steps = false;
  
      function plotWithOptions() {
          $.plot($("#stackchart"), [ d1, d2, d3 ], {
              series: {
                  stack: stack,
                  lines: { show: lines, fill: true, steps: steps },
                  bars: { show: bars, barWidth: 0.6 }
              }
          });
      }
  
      plotWithOptions();
  
      $(".stackControls input").click(function (e) {
          e.preventDefault();
          stack = $(this).val() == "With stacking" ? true : null;
          plotWithOptions();
      });
      $(".graphControls input").click(function (e) {
          e.preventDefault();
          bars = $(this).val().indexOf("Bars") != -1;
          lines = $(this).val().indexOf("Lines") != -1;
          steps = $(this).val().indexOf("steps") != -1;
          plotWithOptions();
      });
  }
  
  //pie chart
  var data = [
      { label: "Ie", data: 12},
      { label: "Mobile", data: 9},
      { label: "Safari", data: 85},
      { label: "Opera", data: 64},
      { label: "Firefox", data: 90},
      { label: "oo", data: 112}
  ];
  
  if ($("#piechart").length) {
      $.plot($("#piechart"), data,
          {
              series: {
                  pie: {
                      show: true
                  }
              },
              grid: {
                  hoverable: true,
                  clickable: true
              },
              legend: {
                  show: false
              }
          });
  
      function pieHover(event, pos, obj) {
          if (!obj)
              return;
          percent = parseFloat(obj.series.percent).toFixed(2);
          $("#hover").html('<span style="font-weight: bold; color: ' + obj.series.color + '">' + obj.series.label + ' (' + percent + '%)</span>');
      }
  
      $("#piechart").bind("plothover", pieHover);
  }
  
  //donut chart
  if ($("#donutchart").length) {
      $.plot($("#donutchart"), data,
          {
              series: {
                  pie: {
                      innerRadius: 0.5,
                      show: true
                  }
              },
              legend: {
                  show: false
              }
          });
  }
  
  
  // we use an inline data source in the example, usually data would
  // be fetched from a server
  var data = [], totalPoints = 300;
  
  function getRandomData() {
      if (data.length > 0)
          data = data.slice(1);
  
      // do a random walk
      while (data.length < totalPoints) {
          var prev = data.length > 0 ? data[data.length - 1] : 50;
          var y = prev + Math.random() * 10 - 5;
          if (y < 0)
              y = 0;
          if (y > 100)
              y = 100;
          data.push(y);
      }
  
      // zip the generated y values with the x values
      var res = [];
      for (var i = 0; i < data.length; ++i)
          res.push([i, data[i]])
      return res;
  }
  
  // setup control widget
  var updateInterval = 30;
  $("#updateInterval").val(updateInterval).change(function () {
      var v = $(this).val();
      if (v && !isNaN(+v)) {
          updateInterval = +v;
          if (updateInterval < 1)
              updateInterval = 1;
          if (updateInterval > 2000)
              updateInterval = 2000;
          $(this).val("" + updateInterval);
      }
  });
  
  //realtime chart
  if ($("#realtimechart").length) {
      var options = {
          series: { shadowSize: 1 }, // drawing is faster without shadows
          yaxis: { min: 0, max: 100 },
          xaxis: { show: false }
      };
      var plot = $.plot($("#realtimechart"), [ getRandomData() ], options);
  
      function update() {
          plot.setData([ getRandomData() ]);
          // since the axes don't change, we don't need to call plot.setupGrid()
          plot.draw();
  
          setTimeout(update, updateInterval);
      }
  
      update();
  }