43 lines
1.9 KiB
JSON
Executable File
43 lines
1.9 KiB
JSON
Executable File
<!-- required files -->
|
|
<link href="../assets/plugins/nvd3/build/nv.d3.css" rel="stylesheet" />
|
|
<script src="../assets/plugins/d3/d3.min.js"></script>
|
|
<script src="../assets/plugins/nvd3/build/nv.d3.min.js"></script>
|
|
|
|
<div id="nv-stacked-bar-chart" class="h-250px"></div>
|
|
|
|
<script>
|
|
var stackedBarChartData = [{
|
|
key: 'Stream 1',
|
|
'color' : app.color.red,
|
|
values: [
|
|
{ x:1, y: 10}, { x:2, y: 15}, { x:3, y: 16}, { x:4, y: 20}, { x:5, y: 57}, { x:6, y: 42}, { x:7, y: 12}, { x:8, y: 65}, { x:9, y: 34}, { x:10, y: 52},
|
|
{ x:11, y: 23}, { x:12, y: 12}, { x:13, y: 22}, { x:14, y: 22}, { x:15, y: 48}, { x:16, y: 54}, { x:17, y: 32}, { x:18, y: 13}, { x:19, y: 21}, { x:20, y: 12}
|
|
]
|
|
},{
|
|
key: 'Stream 2',
|
|
'color' : app.color.orange,
|
|
values: [
|
|
{ x:1, y: 10}, { x:2, y: 15}, { x:3, y: 16}, { x:4, y: 45}, { x:5, y: 67}, { x:6, y: 34}, { x:7, y: 43}, { x:8, y: 65}, { x:9, y: 32}, { x:10, y: 12},
|
|
{ x:11, y: 43}, { x:12, y: 45}, { x:13, y: 32}, { x:14, y: 32}, { x:15, y: 38}, { x:16, y: 64}, { x:17, y: 42}, { x:18, y: 23}, { x:19, y: 31}, { x:20, y: 22}
|
|
]
|
|
},{
|
|
key: 'Stream 2',
|
|
'color' : app.color.componentColor,
|
|
values: [
|
|
{ x:1, y: 20}, { x:2, y: 25}, { x:3, y: 26}, { x:4, y: 30}, { x:5, y: 57}, { x:6, y: 52}, { x:7, y: 22}, { x:8, y: 75}, { x:9, y: 44}, { x:10, y: 62},
|
|
{ x:11, y: 35}, { x:12, y: 15}, { x:13, y: 25}, { x:14, y: 25}, { x:15, y: 45}, { x:16, y: 55}, { x:17, y: 35}, { x:18, y: 15}, { x:19, y: 25}, { x:20, y: 15}
|
|
]
|
|
}];
|
|
|
|
nv.addGraph({
|
|
generate: function() {
|
|
var stackedBarChart = nv.models.multiBarChart()
|
|
.stacked(true)
|
|
.showControls(false);
|
|
|
|
var svg = d3.select('#nv-stacked-bar-chart').append('svg').datum(stackedBarChartData);
|
|
svg.transition().duration(0).call(stackedBarChart);
|
|
return stackedBarChart;
|
|
}
|
|
});
|
|
</script> |