Skip to content

Instantly share code, notes, and snippets.

@auremoser

auremoser/.gistup

Created October 13, 2015 16:36
Show Gist options
  • Save auremoser/0072f03965e9f96167dd to your computer and use it in GitHub Desktop.
Save auremoser/0072f03965e9f96167dd to your computer and use it in GitHub Desktop.
Download ZIP
Tricia's HighChart
Raw
chart.js
$(function () {
$('#chart').highcharts({
chart: {
type: 'column'
},
colors: ['#fc8d59','#ffffbf','#91cf60'],
title: {
text: 'Disney Attandance Hourly Rates (2015 vs 2014)'
},
xAxis: {
categories: ['Magic Kingdom (Walt Disney World U.S.)', 'Tokyo Disneyland, Japan', 'Disneyland Park, France', 'Hong Kong Disneyland', 'Disneyland Anaheim, USA', 'Tokyo Disney Sea, Japan']
},
credits: {
enabled: false
},
series: [{
name: 'Youth',
data: [30, 200, 100, 400, 150, 250]
}, {
name: 'Adolescents',
data: [130, 340, 200, 500, 250, 350]
}, {
name: 'Adults',
data: [400, -500, -450, 700, -600, -500]
}]
});
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<!-- clone of tricia's c3 chart in highcharts -->
<!-- using this demo: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-negative/ -->
<!-- doing comparison of attendance rates at disney -->
<title>Tricia's Gist</title>
<!-- Load JQuery -->
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- Load highcharts.js -->
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
<style>
#chart {
margin: 10px;
padding-left: 10px;
width: 100%;
}
p {
font: 48px sans-serif;
text-align: center;
}
</style>
</head>
<body>
<p>Tricia's Disney Chart</p>
<div id="chart" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<!-- INCLUDE YOUR JS -->
<script src="chart.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment