text: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
      <title>Graph demo</title>
  
      <style type="text/css">
          body {font: 10pt arial;}
      </style>
  
      <script type="text/javascript" src="../graph.js"></script>
      <!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
      <link rel="stylesheet" type="text/css" href="../graph.css">
  
      <script type="text/javascript">
          /**
           * Split given dataset in two datasets. The first
           * @param {Object[]} data     Array with objects, each object has
           *                            a parameter date and value
           * @param {Number} threshold   Threshold value
           * @return {Object} splitted  An object containing data sets 'lower'
           *                           'threshold', and 'upper'
           */
          function dataSplit(data, threshold) {
              var upper = [];
              var lower = [];
              var thres = [];
  
              var prevIsLower = undefined;
              for (var i = 0, l = data.length; i < l; i++) {
                  var d = data[i];
                  var isLower = (d.value < threshold);
                  if (isLower) {
                      lower.push({ 'date': new Date(d.date), 'value': d.value});
                  }
                  else {
                      upper.push({'date': new Date(d.date), 'value': d.value});
                  }
                  thres.push({'date': new Date(d.date), 'value': threshold});
  
                  if (i > 0 && prevIsLower != isLower) {
                      // change from lower to upper or vice versa
                      var dPrev = data[i - 1];
                      var fraction = (threshold - dPrev.value) / (d.value - dPrev.value);
                      var dateAvg = new Date(Math.round(
                              dPrev.date.valueOf() +
                                      (d.date.valueOf() - dPrev.date.valueOf()) * fraction));
                      var valueAvg = dPrev.value + (d.value - dPrev.value) * fraction;
  
                      if (prevIsLower) {
                          lower.push({'date': new Date(dateAvg), 'value': valueAvg});
                          lower.push({'date': new Date(dateAvg), 'value': undefined});
                          upper.push({'date': new Date(dateAvg), 'value': undefined});
                          upper.push({'date': new Date(dateAvg), 'value': valueAvg});
                      }
                      else {
                          upper.push({'date': new Date(dateAvg), 'value': valueAvg});
                          upper.push({'date': new Date(dateAvg), 'value': undefined});
                          lower.push({'date': new Date(dateAvg), 'value': undefined});
                          lower.push({'date': new Date(dateAvg), 'value': valueAvg});
                      }
                  }
                  prevIsLower = isLower;
              }
  
              return {
                  "upper": upper,
                  "lower": lower,
                  "threshold": thres
              };
          }
  
          function drawVisualization() {
              // Create and populate a data table.
              var graphData = [];
  
              function functionA(x) {
                  return Math.sin(x / 10) * Math.cos(x / 5) * 50;
              }
  
              // create a set of dates
              var d = new Date(2010, 9, 23, 20, 0, 0);
              for (var i = 0; i < 100; i++) {
                  graphData.push({
                      'date': new Date(d),
                      'value': functionA(i)
                  });
                  d.setMinutes(d.getMinutes() + 1);
              }
  
              var threshold = -5;
              var splittedData = dataSplit(graphData, threshold);
  
              var data = [
                  {"label": "Threshold", "data" : splittedData.threshold},
                  {"label": "Upper", "data" : splittedData.upper},
                  {"label": "Lower", "data" : splittedData.lower}
              ];
  
              // specify options
              var options = {
                  width:  "100%",
                  height: "350px",
                  lines: [
                      {color: "#FF9900", width: 1}, // orange
                      {color: "#109618", width: 3}, // green
                      {color: "#DC3912", width: 3}  // red
                  ]
              };
  
              // Instantiate our graph object.
              var graph = new links.Graph(document.getElementById('mygraph'));
  
              // Draw our graph with the created data and options
              graph.draw(data, options);
          }
      </script>
  </head>
  
  <body onload="drawVisualization();">
  <p>
      In this example the data of one function is splitted around a threshold
      into two functions. The two functions are plotted with a different color
      and visually look like one continuous function.
  </p>
  <div id="mygraph"></div>
  
  <div id="info"></div>
  </body>
  </html>
  