Adding multiBarChartTest.html test page

11 years ago · b072322514
parent 9fde60f5ff
commit b072322514
3 changed files with 153 additions and 3 deletions
--- a/examples/index.html
+++ b/examples/index.html
@ -90,6 +90,7 @@ li:hover {
 	<li><a href="../test/pieChartTest.html">Pie Chart</a></li>
 	<li><a href="../test/ScatterChartTest.html">Scatter Chart</a></li>
 	<li><a href="../test/stackedAreaChartTest.html">Stacked Area Chart</a></li>
+	<li><a href="../test/multiBarChartTest.html">Multibar Chart</a></li>
 	<li><a href="../test/polylinearTest.html">Polylinear Scale Line Chart</a></li>
 	<li><a href="../test/realTimeChartTest.html">Real Time Chart</a></li>
 </ul>
--- a/examples/sparklinePlus.html
+++ b/examples/sparklinePlus.html
@ -52,7 +52,7 @@ function defaultChartConfig(containerId, data) {

 defaultChartConfig("#chart1",sine());
 defaultChartConfig("#chart2", volatileChart(130.0, 0.02));
-defaultChartConfig("#chart3", volatileChart(25.0, 0.09));
+defaultChartConfig("#chart3", volatileChart(25.0, 0.09,30));


 function sine() {
@ -66,10 +66,11 @@ function sine() {
  return sin;
 }

-function volatileChart(startPrice, volatility) {
+function volatileChart(startPrice, volatility, numPoints) {
     var rval =  [];
     var now =+new Date();
-     for(var i = 1; i < 100; i++) {
+     numPoints = numPoints || 100;
+     for(var i = 1; i < numPoints; i++) {

        rval.push({x: now + i * 1000 * 60 * 60 * 24, y: startPrice});
        var rnd = Math.random();
--- a/test/multiBarChartTest.html
+++ b/test/multiBarChartTest.html
@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
+<link href="teststyle.css" rel="stylesheet" type='text/css'>
+<body class='with-3d-shadow with-transitions'>
+  <h3>Multibar chart test cases - feel free to add more tests</h3>
+  <div class='navigation'>
+    <a href="../examples/multiBar.html">Multibar Stream example</a>
+  </div>
+  <div class='chart half' id="chart1">
+    Normal chart, with transition delay, and bar color set.
+    <svg></svg>
+  </div>
+  <div class='chart half' id="chart2">
+    Normal chart, no transitionDuration or delay, no bar color set.
+    <svg></svg>
+  </div>
+  <div class='chart half' id="chart3">
+    Chart with single series, no group spacing.
+    <svg></svg>
+  </div>
+  <div class='chart half' id="chart4">
+    Chart with 18 series, 7 data points per series.
+    <svg></svg>
+  </div>
+  <div class='chart third' id="chart5">
+    Chart with 1 data point
+    <svg></svg>
+  </div>
+  <div class='chart third' id="chart6">
+    Chart with 2 data points
+    <svg></svg>
+  </div>
+  <div class='chart third' id="chart7">
+    Chart with 0 data points
+    <svg></svg>
+  </div>
+
+<script src="../lib/d3.v3.js"></script>
+<script src="../nv.d3.js"></script>
+<script src="../src/tooltip.js"></script>
+<script src="../src/utils.js"></script>
+<script src="../src/models/legend.js"></script>
+<script src="../src/models/axis.js"></script>
+<script src="../src/models/multiBar.js"></script>
+<script src="../src/models/multiBarChart.js"></script>
+<script>
+
+
+var negative_test_data = new d3.range(0,3).map(function(d,i) { return {
+  key: 'Stream ' + i,
+  values: new d3.range(0,11).map( function(f,j) {
+    return { 
+             y: 10 + Math.random()*100 * (Math.floor(Math.random()*100)%2 ? 1 : -1),
+             x: j
+           }
+  })
+  };  
+});
+
+function dataFactory(seriesNum, perSeries) {
+   return new d3.range(0,seriesNum).map(function(d,i) { return {
+    key: 'Stream ' + i,
+    values: new d3.range(0,perSeries).map( function(f,j) {
+      return { 
+               y: 10 + Math.random()*100,
+               x: j
+             }
+    })
+    };  
+  });
+
+}
+
+
+
+defaultChartConfig("chart1", negative_test_data, {
+  barColor: d3.scale.category20().range(),
+  delay: 1200,
+  groupSpacing: 0.1,
+  reduceXTicks: false,
+  staggerLabels: true
+});
+
+defaultChartConfig("chart2", dataFactory(3,11), {
+  delay: 0,
+  transitionDuration:0,
+  groupSpacing: 0.2
+});
+
+defaultChartConfig("chart3",dataFactory(1,15),{
+  groupSpacing: 0,
+  delay:0
+});
+
+defaultChartConfig("chart4",dataFactory(18,7),{
+  delay:800
+});
+
+defaultChartConfig("chart5",dataFactory(1,1),{
+  delay:0
+});
+
+defaultChartConfig("chart6",dataFactory(1,2),{
+  delay:0
+});
+
+defaultChartConfig("chart7",dataFactory(0,0),{
+  delay:0
+});
+
+function defaultChartConfig(containerId, data, chartOptions) {
+  nv.addGraph(function() {
+      var chart;
+      chart = nv.models.multiBarChart()
+        .margin({bottom: 100})
+        .transitionDuration(300)
+        ;
+
+      chart.options(chartOptions);
+      chart.multibar
+        .hideable(true);
+
+      chart.xAxis
+          .axisLabel("Current Index")
+          .showMaxMin(true)
+          .tickFormat(d3.format(',0f'));
+
+      chart.yAxis
+          .tickFormat(d3.format(',.1f'));
+
+      d3.select('#' + containerId + ' svg')
+          .datum(data)
+         .call(chart);
+
+      nv.utils.windowResize(chart.update);
+
+      chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
+
+      return chart;
+  });
+}
+
+
+
+
+</script>