Rickshaw Linechart rendering (v3)

Revision 3 of this benchmark created on

Description

Rickshaw Linechart with and without Stuff *Update: 512 Values

Preparation HTML

<!doctype>
<html>
  
  <head>
    <meta charset="UTF-8">
    <script src="http://code.jquery.com/jquery-1.9.1.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/vendor/d3.v2.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/js/graph.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.Class.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.Compat.ClassList.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.Graph.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.Graph.Renderer.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.Graph.Renderer.Line.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.Graph.HoverDetail.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.Graph.Annotate.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.Graph.Legend.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.Graph.Ajax.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.Graph.Axis.X.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.Graph.Axis.Y.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.Graph.Behavior.Series.Toggle.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.Graph.Behavior.Series.Order.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.Graph.Behavior.Series.Highlight.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.Graph.Smoother.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.Graph.Unstacker.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.Fixtures.Time.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.Fixtures.Number.js">
    </script>
    <script src="https://raw.github.com/shutterstock/rickshaw/master/src/js/Rickshaw.Series.js">
    </script>
    <link type="text/css" rel="stylesheet" href="http://code.shutterstock.com/rickshaw/examples/css/lines.css">
    <link type="text/css" rel="stylesheet" href="http://code.shutterstock.com/rickshaw/src/css/graph.css">
    <link type="text/css" rel="stylesheet" href="http://code.shutterstock.com/rickshaw/src/css/detail.css">
    <link type="text/css" rel="stylesheet" href="http://code.shutterstock.com/rickshaw/src/css/legend.css">
  </head>
  
  <body>
    <div id="chart_container">
      <div id="legend">
      </div>
      <div id="chart">
      </div>
    </div>

Setup

var sin = [],
      cos = [],
      rec = [],
      sqrt = [],
      ramp = [];
    for (var i = 0; i < 512; i++) {
      sin.push({
        x: i,
        y: 1 + (Math.sin(i / 10))
      });
      cos.push({
        x: i,
        y: 1 + (.5 * Math.cos(i / 10))
      });
      rec.push({
        x: i,
        y: Math.ceil(i / 50)
      });
      sqrt.push({
        x: i,
        y: Math.sqrt(i / 10)
      });
      ramp.push({
        x: i,
        y: i / 50
      });
    }
    
    var rickshaw_data = [{
      data: sin,
      name: 'Sine',
      color: '#FF0000'
    }, {
      name: 'Cosine',
      data: cos,
      color: '#0000FF'
    }, {
      name: 'rec',
      data: rec,
      color: '#00FF00'
    }, {
      name: 'sqrt',
      data: sqrt,
      color: '#00FFFF'
    }, {
      name: 'ramp',
      data: ramp,
      color: '#FFFF00'
    }];

Test runner

Ready to run.

Testing in
TestOps/sec
Graph with Axis
// async test
// instantiate our graph!
var graph = new Rickshaw.Graph({
  element: document.getElementById("chart"),
  renderer: 'line',
  height: 300,
  width: 800,
  series: rickshaw_data
});

var detail = new Rickshaw.Graph.HoverDetail({
  graph: graph
});

var legend = new Rickshaw.Graph.Legend({
  graph: graph,
  element: document.querySelector('#legend')
});

var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
  graph: graph,
  legend: legend
});

var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight({
  graph: graph,
  legend: legend
});

var xAxis = new Rickshaw.Graph.Axis.X({
  graph: graph,
  ticksTreatment: 'glow'
});

var yAxis = new Rickshaw.Graph.Axis.Y({
  graph: graph,
  ticksTreatment: 'glow'
});

graph.render();
ready
Graph without Axis
// async test
// instantiate our graph!
var graph = new Rickshaw.Graph({
  element: document.getElementById("chart"),
  renderer: 'line',
  height: 300,
  width: 800,
  series: rickshaw_data
});
graph.render();
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.