Bar chart with target lines series in CCCv2
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.19/require.min.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/amd/require.config.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/q01-01.js"></script>
<div id="cccExample" />
JavaScript
require([
"ccc/pvc",
"ccc/def",
"ccc/protovis"
], function(pvc, def, pv) {
new pvc.BarChart({
canvas: "cccExample",
width: 600,
height: 400,
title: "Bar chart with target lines",
//orientation: 'horizontal',
plot2: true,
// plot2SeriesIndexes not online yet
plot2Series: ['Paris'],
plot2LinesVisible: false,
animate: true,
selectable: true,
hoverable: true,
legend: true,
barSizeMax: 20,
orthoAxisOffset: 0.01,
plot2Dot_shape: 'bar',
plot2Dot_shapeSize: function() {
// Need to provide a default for when bar series are hidden
var diam = this.chart.plotPanels.bar.barWidth ||
this.chart.options.barSizeMax;
// "finished(.)" prevents that, when hovered,
// the size of the target lines increase
return this.finished(diam);
},
plot2Dot_shapeAngle: function() {
return this.chart.isOrientationHorizontal() ? 0 : -Math.PI/2;
},
// not being inherited?
legend2Dot_shapeAngle: function() {
return this.chart.isOrientationHorizontal() ? 0 : -Math.PI/2;
}
})
.setData(relational_01, { crosstabMode: false })
.render();
});