blob42
/
nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding a "Select chart" button to each of the test charts.

Browse Source 
Clicking this button will hide other charts and only display the selected
one.
master
Robin Hu 11 years ago
parent c2cc7772d1
commit 30d8637356
5 changed files with 67 additions and 7 deletions
Show Stats Download Patch File Download Diff File

17
test/ScatterChartTest.html
Unescape Escape View File

@ -17,66 +17,82 @@
</div>
<div id="test1" class="chart third">
Normal - four series', all random (40 points)
<button>Select chart</button>
<svg></svg>
</div>
<div id="test2" class="chart third">
Normal - one series', all random (5 points), zero left margin
<button>Select chart</button>
<svg></svg>
</div>
<div id="test3" class="chart third">
Zero right margin, 200 points
<button>Select chart</button>
<svg></svg>
</div>
<div id="test4" class="chart third">
Bigger margins
<button>Select chart</button>
<svg></svg>
</div>
<div id="test5" class="chart third">
Zero data points
<button>Select chart</button>
<svg></svg>
</div>
<div id="test6" class="chart third">
One point.
<button>Select chart</button>
<svg></svg>
</div>
<div id="test7" class="chart third">
Two points
<button>Select chart</button>
<svg></svg>
</div>
<div id="test8" class="chart third">
Three series', one point each
<button>Select chart</button>
<svg></svg>
</div>
<div id="test9" class="chart third">
Three series', first one has zero points
<button>Select chart</button>
<svg></svg>
</div>
<div id="test10" class="chart third">
Lots of series
<button>Select chart</button>
<svg></svg>
</div>
<div id="test11" class="chart third">
Scatter plus line: y=2x + 0
<button>Select chart</button>
<svg></svg>
</div>
<div id="test12" class="chart third">
Scatter plus line: y=2x + 10;
<button>Select chart</button>
<svg></svg>
</div>
<div id="test13" class="chart third">
Scatter plus line: y=-0.5x + 1.0;
<button>Select chart</button>
<svg></svg>
</div>
<div id="test14" class="chart third">
Scatter chart: duplicate y values
<button>Select chart</button>
<svg></svg>
</div>
<div id="test15" class="chart third">
Scatter chart: duplicate x values
<button>Select chart</button>
<svg></svg>
</div>
<div id="test16" class="chart third">
Scatter chart: extremely small data points (1e-10)
<button>Select chart</button>
<svg></svg>
</div>
@ -94,6 +110,7 @@
<script src="../src/models/scatter.js"></script>
<script src="../src/models/scatterChart.js"></script>
<script src="../src/models/scatterPlusLineChart.js"></script>
<script src="testScript.js"></script>
<script>
defaultChartTest("test1", randomData(4,40));

18
test/lineChartTest.html
Unescape Escape View File

@ -32,77 +32,94 @@
<div class='chart full' id='chart1'>
Example of chart with many series', and new interactive guideline plus tooltip. A chunk of data was purposely removed
to show how the chart handles it.
<button>Select chart</button>
<svg></svg>
</div>
<div class='chart half with-transitions' id='chart2'>
Chart with old tooltip style (with-transitions).
<button>Select chart</button>
<svg></svg>
</div>
<div class='chart half' id='chart3'>
Chart with three data points.
<button>Select chart</button>
<svg></svg>
</div>
<div class='chart third' id='chart4'>
Chart where two series have different number of points.
<button>Select chart</button>
<svg></svg>
</div>
<div class='chart third' id='chart5'>
Chart with one point.
<button>Select chart</button>
<svg></svg>
</div>
<div class='chart third' id='chart6'>
Chart with 1000 points.
<button>Select chart</button>
<svg></svg>
</div>
<div class='chart third' id='chart7'>
Chart with no data.
<button>Select chart</button>
<svg></svg>
</div>
<div class='chart third' id='chart8'>
All points random. No order.
<button>Select chart</button>
<svg></svg>
</div>
<div class='chart third' id='chart9'>
Points do not increase linearly.
<button>Select chart</button>
<svg></svg>
</div>
<div class='chart third' id='chart10'>
Chart with 15 series'
<button>Select chart</button>
<svg></svg>
</div>
<div class='chart third' id='chart11'>
Data points go backwards
<button>Select chart</button>
<svg></svg>
</div>
<div class='chart third' id='chart12'>
Duplicate X coordinate points.
<button>Select chart</button>
<svg></svg>
</div>
<div class='chart third' id='chart16'>
Duplicate Y coordinate points.
<button>Select chart</button>
<svg></svg>
</div>
<div class='chart third' id='chart13'>
Chart in a overflow div with scrolls (new tooltips)
<button>Select chart</button>
<svg></svg>
</div>
<div class='chart third' id='chart14'>
Chart in a overflow div with scrolls (old tooltips)
<button>Select chart</button>
<svg></svg>
</div>
<div style='clear:both;'></div>
<div class='chart third' id='chart15'>
What if there are null, Infinity and NaN values in points?
<button>Select chart</button>
<svg></svg>
</div>
<div class='chart third' id='chart17'>
Chart with very small, 1e-10, points (old tooltips)
<button>Select chart</button>
<svg></svg>
</div>
</div>
@ -117,6 +134,7 @@
<script src="../src/models/scatter.js"></script>
<script src="../src/models/line.js"></script>
<script src="../src/models/lineChart.js"></script>
<script src="testScript.js"></script>
<script>
//------------ CHART 1

15
test/stackedAreaChartTest.html
Unescape Escape View File

@ -11,13 +11,13 @@
<a href="stackedAreaChartTest.html">Stacked Area</a>
<a href="../examples/cumulativeLineChart.html">Cumulative Line</a>
</div>
<div class='chart full' id='chart1'>Full chart example with new tooltip and guideline<svg></svg></div>
<div class='chart half with-transitions' id='chart2'>Chart with old tooltips (with-transitions)<svg></svg></div>
<div class='chart half' id='chart3'>Chart with single point<svg></svg></div>
<div class='chart half' id='chart4'>Chart with two points<svg></svg></div>
<div class='chart half' id='chart5'>Chart with 'holes'<svg></svg></div>
<div class='chart half' id='chart6'>Total random points<svg></svg></div>
<div class='chart half' id='chart7'>Less than four points, old tooltips<svg></svg></div>
<div class='chart full' id='chart1'>Full chart example with new tooltip and guideline<button>Select chart</button><svg></svg></div>
<div class='chart half with-transitions' id='chart2'>Chart with old tooltips (with-transitions)<button>Select chart</button><svg></svg></div>
<div class='chart half' id='chart3'>Chart with single point<button>Select chart</button><svg></svg></div>
<div class='chart half' id='chart4'>Chart with two points<button>Select chart</button><svg></svg></div>
<div class='chart half' id='chart5'>Chart with 'holes'<button>Select chart</button><svg></svg></div>
<div class='chart half' id='chart6'>Total random points<button>Select chart</button><svg></svg></div>
<div class='chart half' id='chart7'>Less than four points, old tooltips<button>Select chart</button><svg></svg></div>
<div class='chart half' id='chart8'>No data<svg></svg></div>
<script src="../lib/d3.v3.js"></script>
@ -31,6 +31,7 @@
<script src="../src/models/scatter.js"></script>
<script src="../src/models/stackedArea.js"></script>
<script src="../src/models/stackedAreaChart.js"></script>
<script src="testScript.js"></script>
<script>

20
test/testScript.js
Unescape Escape View File

@ -0,0 +1,20 @@
//A little snippet of D3 code that creates a button that lets you toggle whether a chart is the only one visible on a page or not.
d3.selectAll(".chart button").on("click",function() {
var thisId = this.parentElement.id;
var chartContainer = d3.select("#" + thisId);
if (chartContainer.attr("class").match("selected"))
chartContainer.classed("selected",false);
else
chartContainer.classed("selected",true);
d3.selectAll(".chart").style("display",function() {
if (thisId === this.id) return "block";
if (d3.select(this).style("display") === "none")
return "block";
else
return "none";
});
window.onresize();
});

4
test/teststyle.css
Unescape Escape View File

@ -26,6 +26,10 @@ text {
width: 33%;
}
.chart.selected {
width: 100% !important;
}
.navigation a{
margin-right: 1em;
}

Write Preview
Loading…
Cancel
Save