Skip to content

Instantly share code, notes, and snippets.

@aboutaaron
Created October 4, 2012 20:55
Show Gist options
  • Save aboutaaron/3836388 to your computer and use it in GitHub Desktop.
Save aboutaaron/3836388 to your computer and use it in GitHub Desktop.
Ruby highcharts erb
<script type="text/javascript">
$(function () {
// Creating styles here to keep boilerplate down
var chartStyles = {
fontSize: '14px',
fontWeight: 'normal',
color: '#231F20',
fontFamily: "Georgia, 'Times New Roman', Times, serif",
textTransform: 'uppercase'
}
var labelStyles = {
fontFamily: "Arial, san-serif",
color: '#231F20',
fontSize: '14px',
lineHeight: '17px'
}
new Highcharts.Chart({
chart: {
renderTo: 'movie_chart',
type: 'bar'
},
title: {
text: 'Top 10 box office movies this weekend',
style: chartStyles
},
xAxis: {
categories: <%= raw movie_name %>,
labels: {
style: labelStyles
}
},
yAxis: {
min: 0,
title: {
text: 'Box Office Gross in dollars (United States and Canada)',
style: chartStyles
}
},
legend: {
backgroundColor: '#EBEBEC',
reversed: true,
itemStyle: labelStyles
},
tooltip: {
useHTML: true,
formatter: function() {
// This is using the Highcharts tooltip API plus the JS ternary operator to conditionally add tooltips to the accumulated gross
// http://stackoverflow.com/a/7344366/868724
return this.x + "<br>" + this.series.name + ': <strong>$' + Highcharts.numberFormat(this.y) + '</strong>' + ( typeof this.point.weeks !== "undefined" ? "<br>Weeks in box office: " + this.point.weeks : "" )
},
style: labelStyles
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Accumulated Gross',
// Multiple values in Highcharts
// http://stackoverflow.com/a/11295015/868724
data: [
<% @movies[0..9].each do |m| %>
{
y: <%= raw m.cume %>,
weeks: <%= raw m.weeks %>
},
<% end %>
],
color: '#BD9F2F',
visible: false
}, {
name: 'Estimated Weekend Gross',
data: [
<% @movies[0..9].each do |m| %>
{
y: <%= raw m.estimates %>
},
<% end %>
],
color: '#942928'
}] // series for 'Accumulated Gross'
}); // Highcharts.Chart
}); // document.ready
</script>
<div id="wrapper">
<div id="movie_chart"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment