nvd3
Version:
A reusable charting library written in d3.js
415 lines (390 loc) • 8.5 kB
HTML
<meta charset="utf-8">
<link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
<style>
body {
overflow-y:scroll;
}
text {
font: 12px sans-serif;
}
.chart {
margin: 10px;
min-width: 100px;
min-height: 100px;
/*
Minimum height and width is a good idea to prevent negative SVG dimensions...
For example width should be =< margin.left + margin.right + 1,
of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
*/
}
#chart1 svg {
height: 500px;
}
</style>
<body>
<div id="chart1" class='chart with-3d-shadow with-transitions'>
<svg></svg>
</div>
<div id="chart2" class='chart'>
Chart with forceY([10])
<svg></svg>
</div>
<script src="../bower_components/d3/d3.js"></script>
<script src="../build/nv.d3.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/multiBarHorizontal.js"></script>
<script src="../src/models/multiBarHorizontalChart.js"></script>
<script src="stream_layers.js"></script>
<script>
long_short_data = [
{
key: 'Series1',
color: '#d62728',
values: [
{
"label" : "Group A" ,
"value" : -1.8746444827653
} ,
{
"label" : "Group B" ,
"value" : -8.0961543492239
} ,
{
"label" : "Group C" ,
"value" : -0.57072943117674
} ,
{
"label" : "Group D" ,
"value" : -2.4174010336624
} ,
{
"label" : "Group E" ,
"value" : -0.72009071426284
} ,
{
"label" : "Group F" ,
"value" : -0.77154485523777
} ,
{
"label" : "Group G" ,
"value" : -0.90152097798131
} ,
{
"label" : "Group H" ,
"value" : -0.91445417330854
} ,
{
"label" : "Group I" ,
"value" : -0.055746319141851
}
]
},
{
key: 'Series2',
color: '#1f77b4',
values: [
{
"label" : "Group A" ,
"value" : 25.307646510375
} ,
{
"label" : "Group B" ,
"value" : 16.756779544553
} ,
{
"label" : "Group C" ,
"value" : 18.451534877007
} ,
{
"label" : "Group D" ,
"value" : 8.6142352811805
} ,
{
"label" : "Group E" ,
"value" : 7.8082472075876
} ,
{
"label" : "Group F" ,
"value" : 5.259101026956
} ,
{
"label" : "Group G" ,
"value" : 0.30947953487127
} ,
{
"label" : "Group H" ,
"value" : 0
} ,
{
"label" : "Group I" ,
"value" : 0
}
]
},
{
key: 'Series3',
color: '#2ca02c',
values: [
{
"label" : "Group A" ,
"value" : -25.307646510375
} ,
{
"label" : "Group B" ,
"value" : 16.756779544553
} ,
{
"label" : "Group C" ,
"value" : -18.451534877007
} ,
{
"label" : "Group D" ,
"value" : 8.6142352811805
} ,
{
"label" : "Group E" ,
"value" : -7.8082472075876
} ,
{
"label" : "Group F" ,
"value" : 5.259101026956
} ,
{
"label" : "Group G" ,
"value" : -0.30947953487127
} ,
{
"label" : "Group H" ,
"value" : 0
} ,
{
"label" : "Group I" ,
"value" : 0
}
]
}
];
long_short_pos_data = [
{
key: 'Series1',
color: '#d62728',
values: [
{
"label" : "Group A" ,
"value" : 1.8746444827653
} ,
{
"label" : "Group B" ,
"value" : 8.0961543492239
} ,
{
"label" : "Group C" ,
"value" : 0.57072943117674
} ,
{
"label" : "Group D" ,
"value" : 2.4174010336624
} ,
{
"label" : "Group E" ,
"value" : 0.72009071426284
} ,
{
"label" : "Group F" ,
"value" : 0.77154485523777
} ,
{
"label" : "Group G" ,
"value" : 0.90152097798131
} ,
{
"label" : "Group H" ,
"value" : 0.91445417330854
} ,
{
"label" : "Group I" ,
"value" : 0.055746319141851
}
]
},
{
key: 'Series2',
color: '#1f77b4',
values: [
{
"label" : "Group A" ,
"value" : 25.307646510375
} ,
{
"label" : "Group B" ,
"value" : 16.756779544553
} ,
{
"label" : "Group C" ,
"value" : 18.451534877007
} ,
{
"label" : "Group D" ,
"value" : 8.6142352811805
} ,
{
"label" : "Group E" ,
"value" : 7.8082472075876
} ,
{
"label" : "Group F" ,
"value" : 5.259101026956
} ,
{
"label" : "Group G" ,
"value" : 0.30947953487127
} ,
{
"label" : "Group H" ,
"value" : 0
} ,
{
"label" : "Group I" ,
"value" : 0
}
]
}
];
long_short_neg_data = [
{
key: 'Series1',
color: '#d62728',
values: [
{
"label" : "Group A" ,
"value" : -1.8746444827653
} ,
{
"label" : "Group B" ,
"value" : -8.0961543492239
} ,
{
"label" : "Group C" ,
"value" : -0.57072943117674
} ,
{
"label" : "Group D" ,
"value" : -2.4174010336624
} ,
{
"label" : "Group E" ,
"value" : -0.72009071426284
} ,
{
"label" : "Group F" ,
"value" : -0.77154485523777
} ,
{
"label" : "Group G" ,
"value" : -0.90152097798131
} ,
{
"label" : "Group H" ,
"value" : -0.91445417330854
} ,
{
"label" : "Group I" ,
"value" : -0.055746319141851
}
]
},
{
key: 'Series2',
color: '#1f77b4',
values: [
{
"label" : "Group A" ,
"value" : -25.307646510375
} ,
{
"label" : "Group B" ,
"value" : -16.756779544553
} ,
{
"label" : "Group C" ,
"value" : -18.451534877007
} ,
{
"label" : "Group D" ,
"value" : -8.6142352811805
} ,
{
"label" : "Group E" ,
"value" : -7.8082472075876
} ,
{
"label" : "Group F" ,
"value" : -5.259101026956
} ,
{
"label" : "Group G" ,
"value" : -0.30947953487127
} ,
{
"label" : "Group H" ,
"value" : 0
} ,
{
"label" : "Group I" ,
"value" : 0
}
]
}
];
nv.addGraph(function() {
var chart = nv.models.multiBarHorizontalChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.margin({top: 30, right: 20, bottom: 50, left: 175})
//.showValues(true)
//.tooltips(false)
.barColor(d3.scale.category20().range())
.stacked(true)
//.showControls(false);
chart.yAxis
.tickFormat(d3.format(',.2f'));
d3.select('#chart1 svg')
.datum(long_short_data)
.call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});
var forceY_test_data = [
{
"key": "Series 1",
"color": "#d67777",
"values": [
{"label": "Group A", "value": 10},
{"label": "Group B", "value": 20},
{"label": "Group C", "value": 30}
]
}
];
nv.addGraph(function() {
var chart = nv.models.multiBarHorizontalChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.forceY([10])// To make 10 to be starting point.
.margin({top: 30, right: 20, bottom: 50, left: 175})
.showValues(true) //Show bar value next to each bar.
.showControls(true); //Allow user to switch between "Grouped" and "Stacked" mode.
chart.yAxis
.tickFormat(d3.format(',.2f'));
//chart.yScale().clamp(true);
d3.select('#chart2 svg')
.datum(forceY_test_data)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
</script>