Effectiveness suggestion
by Adam Nekola
HTML
<script src="http://fonts.googleapis.com/css?family=Lato:400,300,800"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 50px 0 0"></div>
CSS
* {
font-family: 'Lato', sans-serif;
}
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
credits: {enabled:false},
title: {
text: 'Effectiveness Scores',
align: 'left',
style: {
fontWeight: 400,
color: '#b5adbc'
}
},
subtitle: {
text: 'Co-Sponsor / All Sessions',
align: 'left',
style: {
fontWeight: 300,
fontSize: '1.1em'
}
},
xAxis: {
categories: ['Government Administration', 'Trade', 'Taxes', 'Small Business', 'Agriculture', 'Public Resources', 'Infrastructure', 'Legal Affairs', 'Crime', 'Industrials', 'Transportation', 'Families and Children'],
min: 0,
tickColor: '#ccc',
lineColor: '#ccc'
},
yAxis: {
title: {
text: 'Effectiveness',
align: 'high'
}
},
tooltip: {
useHTML: true,
formatter: function(){
var s = '<table>';
s += '<tr><th colspan="2">'+this.x+'</th></tr>';
s += '<tr><td>Chamber Avg.</td><td style="color:#d7c0db;font-weight:800;">'+this.point.y+'</td></tr>';
s += '<tr><td>Legislator</td><td style="color:#793c82;font-weight:800;">'+this.point.high+'</td></tr>';
s += '</table>';
return s;
}
},
plotOptions: {
columnrange: {
pointWidth: 4,
dataLabels: {
enabled: false,
overflow: 'none',
crop: false,
padding: 9,
formatter: function () {
return this.y;
},
style: {
textShadow: 0,
fontWeight: 400,
...