Permalink
Browse files

#1889 Update lineChart.html with top/bottom legend toggle

  • Loading branch information...
1 parent 6bd949d commit c431f4948184a76e187de6c4540ba0e20773c8cd @KidA78 KidA78 committed Dec 10, 2016
Showing with 13 additions and 145 deletions.
  1. +13 −0 examples/lineChart.html
  2. +0 −145 examples/lineChartBottomLegend.html
@@ -29,6 +29,8 @@
<div style="position:absolute; top: 0; left: 0;">
<button onclick="randomizeFillOpacity();">Randomize fill opacity</button>
<button onclick="expandLegend();">Expand/Contract Legend</button>
+ <button onclick="toggleLegend();">Toggle Legend Top/Bottom</button>
+
<script>
var expandLegend = function() {
var exp = chart.legend.expanded();
@@ -43,6 +45,7 @@
// Wrapping in nv.addGraph allows for '0 timeout render', stores rendered charts in nv.graphs, and may do more in the future... it's NOT required
var chart;
var data;
+ var legendPosition = "top";
var randomizeFillOpacity = function() {
var rand = Math.random(0,1);
@@ -53,6 +56,16 @@
chart.update();
};
+ var toggleLegend = function() {
+ if (legendPosition == "top") {
+ legendPosition = "bottom";
+ } else {
+ legendPosition = "top";
+ }
+ chart.legendPosition(legendPosition);
+ chart.update();
+ };
+
nv.addGraph(function() {
chart = nv.models.lineChart()
.options({
@@ -1,145 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
- <link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
- <script src="../build/nv.d3.js"></script>
-
- <style>
- text {
- font: 12px sans-serif;
- }
- svg {
- display: block;
- }
- html, body, #chart1, svg {
- margin: 0px;
- padding: 0px;
- height: 100%;
- width: 100%;
- }
-
- .dashed {
- stroke-dasharray: 5,5;
- }
- </style>
-</head>
-<body class='with-3d-shadow with-transitions'>
-<div style="position:absolute; top: 0; left: 0;">
- <button onclick="randomizeFillOpacity();">Randomize fill opacity</button>
- <button onclick="expandLegend();">Expand/Contract Legend</button>
- <script>
- var expandLegend = function() {
- var exp = chart.legend.expanded();
- chart.legend.expanded(!exp);
- chart.update();
- }
- </script>
-</div>
-<div id="chart1"></div>
-
-<script>
- // Wrapping in nv.addGraph allows for '0 timeout render', stores rendered charts in nv.graphs, and may do more in the future... it's NOT required
- var chart;
- var data;
-
- var randomizeFillOpacity = function() {
- var rand = Math.random(0,1);
- for (var i = 0; i < 100; i++) { // modify sine amplitude
- data[4].values[i].y = Math.sin(i/(5 + rand)) * .4 * rand - .25;
- }
- data[4].fillOpacity = rand;
- chart.update();
- };
-
- nv.addGraph(function() {
- chart = nv.models.lineChart().legendPosition("bottom")
- .options({
- duration: 300,
- useInteractiveGuideline: true
- })
- ;
-
- // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
- chart.xAxis
- .axisLabel("Time (s)")
- .tickFormat(d3.format(',.1f'))
- .staggerLabels(true)
- ;
-
- chart.yAxis
- .axisLabel('Voltage (v)')
- .tickFormat(function(d) {
- if (d == null) {
- return 'N/A';
- }
- return d3.format(',.2f')(d);
- })
- ;
-
- data = sinAndCos();
-
- d3.select('#chart1').append('svg')
- .datum(data)
- .call(chart);
-
- nv.utils.windowResize(chart.update);
-
- return chart;
- });
-
- function sinAndCos() {
- var sin = [],
- sin2 = [],
- cos = [],
- rand = [],
- rand2 = []
- ;
-
- for (var i = 0; i < 100; i++) {
- sin.push({x: i, y: i % 10 == 5 ? null : Math.sin(i/10) }); //the nulls are to show how defined works
- sin2.push({x: i, y: Math.sin(i/5) * 0.4 - 0.25});
- cos.push({x: i, y: .5 * Math.cos(i/10)});
- rand.push({x:i, y: Math.random() / 10});
- rand2.push({x: i, y: Math.cos(i/10) + Math.random() / 10 })
- }
-
- return [
- {
- area: true,
- values: sin,
- key: "Sine Wave",
- color: "#ff7f0e",
- strokeWidth: 4,
- classed: 'dashed'
- },
- {
- values: cos,
- key: "Cosine Wave",
- color: "#2ca02c"
- },
- {
- values: rand,
- key: "Random Points",
- color: "#2222ff"
- },
- {
- values: rand2,
- key: "Random Cosine",
- color: "#667711",
- strokeWidth: 3.5
- },
- {
- area: true,
- values: sin2,
- key: "Fill opacity",
- color: "#EF9CFB",
- fillOpacity: .1
- }
- ];
- }
-
-</script>
-</body>
-</html>

0 comments on commit c431f49

Please sign in to comment.