blob42/nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
dd94b599fe
nvd3/examples/multiBarHorizontalChart.html

389 lines
7.3 KiB
HTML
Raw Normal View History

created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
<!DOCTYPE html>
<meta charset="utf-8">
renaming d3.css to nv.d3.css
2012-07-13 19:25:19 +00:00
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
<style>
body {
overflow-y:scroll;
}
text {
font: 12px sans-serif;
}
#chart1 {
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
*/
}
Some minor clean up of discreteBar and multibarHorizontal
2012-06-12 16:33:24 +00:00
#chart1 svg {
height: 500px;
}
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
</style>
<body>
<div id="chart1">
<svg></svg>
</div>
<script src="../lib/d3.v2.js"></script>
<script src="../nv.d3.js"></script>
add utils.js dependency to examples to avoid having to compile while developing
2012-07-26 12:23:20 +00:00
<script src="../src/utils.js"></script>
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
<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 = [
{
Update example data
2012-10-24 20:22:26 +00:00
key: 'Series1',
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
color: '#d62728',
values: [
{
Update example data
2012-10-24 20:22:26 +00:00
"label" : "Group A" ,
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
"value" : -1.8746444827653
} ,
{
Update example data
2012-10-24 20:22:26 +00:00
"label" : "Group B" ,
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
"value" : -8.0961543492239
} ,
{
Update example data
2012-10-24 20:22:26 +00:00
"label" : "Group C" ,
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
"value" : -0.57072943117674
} ,
{
Update example data
2012-10-24 20:22:26 +00:00
"label" : "Group D" ,
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
"value" : -2.4174010336624
} ,
{
Update example data
2012-10-24 20:22:26 +00:00
"label" : "Group E" ,
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
"value" : -0.72009071426284
} ,
{
Update example data
2012-10-24 20:22:26 +00:00
"label" : "Group F" ,
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
"value" : -0.77154485523777
} ,
{
Update example data
2012-10-24 20:22:26 +00:00
"label" : "Group G" ,
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
"value" : -0.90152097798131
} ,
{
Update example data
2012-10-24 20:22:26 +00:00
"label" : "Group H" ,
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
"value" : -0.91445417330854
} ,
{
Update example data
2012-10-24 20:22:26 +00:00
"label" : "Group I" ,
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
"value" : -0.055746319141851
}
]
},
{
Update example data
2012-10-24 20:22:26 +00:00
key: 'Series2',
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
color: '#1f77b4',
values: [
{
Update example data
2012-10-24 20:22:26 +00:00
"label" : "Group A" ,
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
"value" : 25.307646510375
} ,
{
Update example data
2012-10-24 20:22:26 +00:00
"label" : "Group B" ,
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
"value" : 16.756779544553
} ,
{
Update example data
2012-10-24 20:22:26 +00:00
"label" : "Group C" ,
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
"value" : 18.451534877007
} ,
{
Update example data
2012-10-24 20:22:26 +00:00
"label" : "Group D" ,
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
"value" : 8.6142352811805
} ,
{
Update example data
2012-10-24 20:22:26 +00:00
"label" : "Group E" ,
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
"value" : 7.8082472075876
} ,
{
Update example data
2012-10-24 20:22:26 +00:00
"label" : "Group F" ,
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
"value" : 5.259101026956
} ,
{
Update example data
2012-10-24 20:22:26 +00:00
"label" : "Group G" ,
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
"value" : 0.30947953487127
} ,
{
Update example data
2012-10-24 20:22:26 +00:00
"label" : "Group H" ,
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
"value" : 0
} ,
{
Update example data
2012-10-24 20:22:26 +00:00
"label" : "Group I" ,
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
"value" : 0
}
]
Horizontal barcan nopw stack with both positive and negative, verticaly aligned values with center of bar
2013-02-26 22:10:12 +00:00
},
{
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
}
]
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
}
];
Horizontal barcan nopw stack with both positive and negative, verticaly aligned values with center of bar
2013-02-26 22:10:12 +00:00
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
}
]
}
];
Adding state management to most charts
2012-12-28 05:05:37 +00:00
var chart;
minor updates for consistency throughout new Chart Models
2012-06-12 19:26:23 +00:00
nv.addGraph(function() {
Adding state management to most charts
2012-12-28 05:05:37 +00:00
chart = nv.models.multiBarHorizontalChart()
minor updates for consistency throughout new Chart Models
2012-06-12 19:26:23 +00:00
.x(function(d) { return d.label })
.y(function(d) { return d.value })
updating left margins because FF text is a little larger than chrome's
2012-06-29 19:03:25 +00:00
.margin({top: 30, right: 20, bottom: 50, left: 175})
Positive and negative stacked horizontal withunique colors per group
2013-02-26 23:55:03 +00:00
//.showValues(true)
//.tooltips(false)
.barColor(d3.scale.category20().range())
Horizontal barcan nopw stack with both positive and negative, verticaly aligned values with center of bar
2013-02-26 22:10:12 +00:00
.showControls(true);
minor updates for consistency throughout new Chart Models
2012-06-12 19:26:23 +00:00
chart.yAxis
.tickFormat(d3.format(',.2f'));
d3.select('#chart1 svg')
.datum(long_short_data)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
Adding state management to most charts
2012-12-28 05:05:37 +00:00
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
minor updates for consistency throughout new Chart Models
2012-06-12 19:26:23 +00:00
return chart;
created initial multibarHorizontalChart and simplified example
2012-06-12 16:25:08 +00:00
});
</script>
Reference in New Issue Copy Permalink