Permalink
Browse files

add highcharts

  • Loading branch information...
1 parent 28e13c3 commit 9a641567532958a3c07ad943bb955141b0eb9579 @JoeGermuska committed Jun 16, 2012
Showing with 25,050 additions and 9 deletions.
  1. +94 −0 census/highcharts/examples/area-basic/index.htm
  2. +91 −0 census/highcharts/examples/area-inverted/index.htm
  3. +85 −0 census/highcharts/examples/area-missing/index.htm
  4. +55 −0 census/highcharts/examples/area-negative/index.htm
  5. +82 −0 census/highcharts/examples/area-stacked-percent/index.htm
  6. +86 −0 census/highcharts/examples/area-stacked/index.htm
  7. +85 −0 census/highcharts/examples/areaspline/index.htm
  8. +86 −0 census/highcharts/examples/bar-basic/index.htm
  9. +87 −0 census/highcharts/examples/bar-negative-stack/index.htm
  10. +67 −0 census/highcharts/examples/bar-stacked/index.htm
  11. +97 −0 census/highcharts/examples/column-basic/index.htm
  12. +154 −0 census/highcharts/examples/column-drilldown/index.htm
  13. +55 −0 census/highcharts/examples/column-negative/index.htm
  14. +120 −0 census/highcharts/examples/column-parsed/index.htm
  15. +103 −0 census/highcharts/examples/column-rotated-labels/index.htm
  16. +79 −0 census/highcharts/examples/column-stacked-and-grouped/index.htm
  17. +63 −0 census/highcharts/examples/column-stacked-percent/index.htm
  18. +86 −0 census/highcharts/examples/column-stacked/index.htm
  19. +101 −0 census/highcharts/examples/combo-dual-axes/index.htm
  20. +137 −0 census/highcharts/examples/combo-multi-axes/index.htm
  21. +60 −0 census/highcharts/examples/combo-regression/index.htm
  22. +97 −0 census/highcharts/examples/combo/index.htm
  23. +88 −0 census/highcharts/examples/dynamic-click-to-add/index.htm
  24. +371 −0 census/highcharts/examples/dynamic-master-detail/index.htm
  25. +96 −0 census/highcharts/examples/dynamic-update/index.htm
  26. +87 −0 census/highcharts/examples/line-ajax/analytics.tsv
  27. +188 −0 census/highcharts/examples/line-ajax/index.htm
  28. +81 −0 census/highcharts/examples/line-basic/index.htm
  29. +66 −0 census/highcharts/examples/line-labels/index.htm
  30. +53 −0 census/highcharts/examples/line-log-axis/index.htm
  31. +206 −0 census/highcharts/examples/line-time-series/index.htm
  32. +71 −0 census/highcharts/examples/pie-basic/index.htm
  33. +148 −0 census/highcharts/examples/pie-donut/index.htm
  34. +67 −0 census/highcharts/examples/pie-legend/index.htm
  35. +197 −0 census/highcharts/examples/scatter/index.htm
  36. +87 −0 census/highcharts/examples/spline-inverted/index.htm
  37. +133 −0 census/highcharts/examples/spline-irregular-time/index.htm
  38. +169 −0 census/highcharts/examples/spline-plot-bands/index.htm
  39. +87 −0 census/highcharts/examples/spline-symbols/index.htm
  40. +109 −0 census/highcharts/exporting-server/index.php
  41. BIN census/highcharts/graphics/skies.jpg
  42. BIN census/highcharts/graphics/snow.png
  43. BIN census/highcharts/graphics/sun.png
  44. +66 −0 census/highcharts/index.htm
  45. +13 −0 census/highcharts/js/adapters/mootools-adapter.js
  46. +321 −0 census/highcharts/js/adapters/mootools-adapter.src.js
  47. +16 −0 census/highcharts/js/adapters/prototype-adapter.js
  48. +381 −0 census/highcharts/js/adapters/prototype-adapter.src.js
  49. +24 −0 census/highcharts/js/highcharts-more.js
  50. +239 −0 census/highcharts/js/highcharts.js
  51. +14,681 −0 census/highcharts/js/highcharts.src.js
  52. +133 −0 census/highcharts/js/modules/canvas-tools.js
  53. +3,113 −0 census/highcharts/js/modules/canvas-tools.src.js
  54. +23 −0 census/highcharts/js/modules/exporting.js
  55. +736 −0 census/highcharts/js/modules/exporting.src.js
  56. +263 −0 census/highcharts/js/themes/dark-blue.js
  57. +263 −0 census/highcharts/js/themes/dark-green.js
  58. +262 −0 census/highcharts/js/themes/gray.js
  59. +95 −0 census/highcharts/js/themes/grid.js
  60. +89 −0 census/highcharts/js/themes/skies.js
  61. +3 −2 census/index.html
  62. +55 −7 census/profile.js
View
94 census/highcharts/examples/area-basic/index.htm
@@ -0,0 +1,94 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ type: 'area'
+ },
+ title: {
+ text: 'US and USSR nuclear stockpiles'
+ },
+ subtitle: {
+ text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">'+
+ 'thebulletin.metapress.com</a>'
+ },
+ xAxis: {
+ labels: {
+ formatter: function() {
+ return this.value; // clean, unformatted number for year
+ }
+ }
+ },
+ yAxis: {
+ title: {
+ text: 'Nuclear weapon states'
+ },
+ labels: {
+ formatter: function() {
+ return this.value / 1000 +'k';
+ }
+ }
+ },
+ tooltip: {
+ formatter: function() {
+ return this.series.name +' produced <b>'+
+ Highcharts.numberFormat(this.y, 0) +'</b><br/>warheads in '+ this.x;
+ }
+ },
+ plotOptions: {
+ area: {
+ pointStart: 1940,
+ marker: {
+ enabled: false,
+ symbol: 'circle',
+ radius: 2,
+ states: {
+ hover: {
+ enabled: true
+ }
+ }
+ }
+ }
+ },
+ series: [{
+ name: 'USA',
+ data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640,
+ 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
+ 27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
+ 26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
+ 24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
+ 22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
+ 10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]
+ }, {
+ name: 'USSR/Russia',
+ data: [null, null, null, null, null, null, null , null , null ,null,
+ 5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
+ 4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
+ 15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
+ 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
+ 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
+ 21000, 20000, 19000, 18000, 18000, 17000, 16000]
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
91 census/highcharts/examples/area-inverted/index.htm
@@ -0,0 +1,91 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ type: 'area',
+ inverted: true
+ },
+ title: {
+ text: 'Average fruit consumption during one week'
+ },
+ subtitle: {
+ style: {
+ position: 'absolute',
+ right: '0px',
+ bottom: '10px'
+ }
+ },
+ legend: {
+ layout: 'vertical',
+ align: 'right',
+ verticalAlign: 'top',
+ x: -150,
+ y: 100,
+ floating: true,
+ borderWidth: 1,
+ backgroundColor: '#FFFFFF'
+ },
+ xAxis: {
+ categories: [
+ 'Monday',
+ 'Tuesday',
+ 'Wednesday',
+ 'Thursday',
+ 'Friday',
+ 'Saturday',
+ 'Sunday'
+ ]
+ },
+ yAxis: {
+ title: {
+ text: 'Number of units'
+ },
+ labels: {
+ formatter: function() {
+ return this.value;
+ }
+ },
+ min: 0
+ },
+ tooltip: {
+ formatter: function() {
+ return ''+
+ this.x +': '+ this.y;
+ }
+ },
+ plotOptions: {
+ area: {
+ fillOpacity: 0.5
+ }
+ },
+ series: [{
+ name: 'John',
+ data: [3, 4, 3, 5, 4, 10, 12]
+ }, {
+ name: 'Jane',
+ data: [1, 3, 4, 3, 3, 5, 4]
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
85 census/highcharts/examples/area-missing/index.htm
@@ -0,0 +1,85 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ type: 'area',
+ spacingBottom: 30
+ },
+ title: {
+ text: 'Fruit consumption *'
+ },
+ subtitle: {
+ text: '* Jane\'s banana consumption is unknown',
+ floating: true,
+ align: 'right',
+ verticalAlign: 'bottom',
+ y: 15
+ },
+ legend: {
+ layout: 'vertical',
+ align: 'left',
+ verticalAlign: 'top',
+ x: 150,
+ y: 100,
+ floating: true,
+ borderWidth: 1,
+ backgroundColor: '#FFFFFF'
+ },
+ xAxis: {
+ categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
+ },
+ yAxis: {
+ title: {
+ text: 'Y-Axis'
+ },
+ labels: {
+ formatter: function() {
+ return this.value;
+ }
+ }
+ },
+ tooltip: {
+ formatter: function() {
+ return '<b>'+ this.series.name +'</b><br/>'+
+ this.x +': '+ this.y;
+ }
+ },
+ plotOptions: {
+ area: {
+ fillOpacity: 0.5
+ }
+ },
+ credits: {
+ enabled: false
+ },
+ series: [{
+ name: 'John',
+ data: [0, 1, 4, 4, 5, 2, 3, 7]
+ }, {
+ name: 'Jane',
+ data: [1, 0, 3, null, 3, 1, 2, 1]
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
55 census/highcharts/examples/area-negative/index.htm
@@ -0,0 +1,55 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ type: 'area'
+ },
+ title: {
+ text: 'Area chart with negative values'
+ },
+ xAxis: {
+ categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
+ },
+ tooltip: {
+ formatter: function() {
+ return ''+
+ this.series.name +': '+ this.y +'';
+ }
+ },
+ credits: {
+ enabled: false
+ },
+ series: [{
+ name: 'John',
+ data: [5, 3, 4, 7, 2]
+ }, {
+ name: 'Jane',
+ data: [2, -2, -3, 2, 1]
+ }, {
+ name: 'Joe',
+ data: [3, 4, 4, -2, 5]
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
82 census/highcharts/examples/area-stacked-percent/index.htm
@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ type: 'area'
+ },
+ title: {
+ text: 'Historic and Estimated Worldwide Population Distribution by Region'
+ },
+ subtitle: {
+ text: 'Source: Wikipedia.org'
+ },
+ xAxis: {
+ categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
+ tickmarkPlacement: 'on',
+ title: {
+ enabled: false
+ }
+ },
+ yAxis: {
+ title: {
+ text: 'Percent'
+ }
+ },
+ tooltip: {
+ formatter: function() {
+ return ''+
+ this.x +': '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+
+ Highcharts.numberFormat(this.y, 0, ',') +' millions)';
+ }
+ },
+ plotOptions: {
+ area: {
+ stacking: 'percent',
+ lineColor: '#ffffff',
+ lineWidth: 1,
+ marker: {
+ lineWidth: 1,
+ lineColor: '#ffffff'
+ }
+ }
+ },
+ series: [{
+ name: 'Asia',
+ data: [502, 635, 809, 947, 1402, 3634, 5268]
+ }, {
+ name: 'Africa',
+ data: [106, 107, 111, 133, 221, 767, 1766]
+ }, {
+ name: 'Europe',
+ data: [163, 203, 276, 408, 547, 729, 628]
+ }, {
+ name: 'America',
+ data: [18, 31, 54, 156, 339, 818, 1201]
+ }, {
+ name: 'Oceania',
+ data: [2, 2, 2, 6, 13, 30, 46]
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
86 census/highcharts/examples/area-stacked/index.htm
@@ -0,0 +1,86 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ type: 'area'
+ },
+ title: {
+ text: 'Historic and Estimated Worldwide Population Growth by Region'
+ },
+ subtitle: {
+ text: 'Source: Wikipedia.org'
+ },
+ xAxis: {
+ categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
+ tickmarkPlacement: 'on',
+ title: {
+ enabled: false
+ }
+ },
+ yAxis: {
+ title: {
+ text: 'Billions'
+ },
+ labels: {
+ formatter: function() {
+ return this.value / 1000;
+ }
+ }
+ },
+ tooltip: {
+ formatter: function() {
+ return ''+
+ this.x +': '+ Highcharts.numberFormat(this.y, 0, ',') +' millions';
+ }
+ },
+ plotOptions: {
+ area: {
+ stacking: 'normal',
+ lineColor: '#666666',
+ lineWidth: 1,
+ marker: {
+ lineWidth: 1,
+ lineColor: '#666666'
+ }
+ }
+ },
+ series: [{
+ name: 'Asia',
+ data: [502, 635, 809, 947, 1402, 3634, 5268]
+ }, {
+ name: 'Africa',
+ data: [106, 107, 111, 133, 221, 767, 1766]
+ }, {
+ name: 'Europe',
+ data: [163, 203, 276, 408, 547, 729, 628]
+ }, {
+ name: 'America',
+ data: [18, 31, 54, 156, 339, 818, 1201]
+ }, {
+ name: 'Oceania',
+ data: [2, 2, 2, 6, 13, 30, 46]
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
85 census/highcharts/examples/areaspline/index.htm
@@ -0,0 +1,85 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ type: 'areaspline'
+ },
+ title: {
+ text: 'Average fruit consumption during one week'
+ },
+ legend: {
+ layout: 'vertical',
+ align: 'left',
+ verticalAlign: 'top',
+ x: 150,
+ y: 100,
+ floating: true,
+ borderWidth: 1,
+ backgroundColor: '#FFFFFF'
+ },
+ xAxis: {
+ categories: [
+ 'Monday',
+ 'Tuesday',
+ 'Wednesday',
+ 'Thursday',
+ 'Friday',
+ 'Saturday',
+ 'Sunday'
+ ],
+ plotBands: [{ // visualize the weekend
+ from: 4.5,
+ to: 6.5,
+ color: 'rgba(68, 170, 213, .2)'
+ }]
+ },
+ yAxis: {
+ title: {
+ text: 'Fruit units'
+ }
+ },
+ tooltip: {
+ formatter: function() {
+ return ''+
+ this.x +': '+ this.y +' units';
+ }
+ },
+ credits: {
+ enabled: false
+ },
+ plotOptions: {
+ areaspline: {
+ fillOpacity: 0.5
+ }
+ },
+ series: [{
+ name: 'John',
+ data: [3, 4, 3, 5, 4, 10, 12]
+ }, {
+ name: 'Jane',
+ data: [1, 3, 4, 3, 3, 5, 4]
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
86 census/highcharts/examples/bar-basic/index.htm
@@ -0,0 +1,86 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ type: 'bar'
+ },
+ title: {
+ text: 'Historic World Population by Region'
+ },
+ subtitle: {
+ text: 'Source: Wikipedia.org'
+ },
+ xAxis: {
+ categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
+ title: {
+ text: null
+ }
+ },
+ yAxis: {
+ min: 0,
+ title: {
+ text: 'Population (millions)',
+ align: 'high'
+ }
+ },
+ tooltip: {
+ formatter: function() {
+ return ''+
+ this.series.name +': '+ this.y +' millions';
+ }
+ },
+ plotOptions: {
+ bar: {
+ dataLabels: {
+ enabled: true
+ }
+ }
+ },
+ legend: {
+ layout: 'vertical',
+ align: 'right',
+ verticalAlign: 'top',
+ x: -100,
+ y: 100,
+ floating: true,
+ borderWidth: 1,
+ backgroundColor: '#FFFFFF',
+ shadow: true
+ },
+ credits: {
+ enabled: false
+ },
+ series: [{
+ name: 'Year 1800',
+ data: [107, 31, 635, 203, 2]
+ }, {
+ name: 'Year 1900',
+ data: [133, 156, 947, 408, 6]
+ }, {
+ name: 'Year 2008',
+ data: [973, 914, 4054, 732, 34]
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
87 census/highcharts/examples/bar-negative-stack/index.htm
@@ -0,0 +1,87 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart,
+ categories = ['0-4', '5-9', '10-14', '15-19',
+ '20-24', '25-29', '30-34', '35-39', '40-44',
+ '45-49', '50-54', '55-59', '60-64', '65-69',
+ '70-74', '75-79', '80-84', '85-89', '90-94',
+ '95-99', '100 +'];
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ type: 'bar'
+ },
+ title: {
+ text: 'Population pyramid for Germany, midyear 2010'
+ },
+ subtitle: {
+ text: 'Source: www.census.gov'
+ },
+ xAxis: [{
+ categories: categories,
+ reversed: false
+ }, { // mirror axis on right side
+ opposite: true,
+ reversed: false,
+ categories: categories,
+ linkedTo: 0
+ }],
+ yAxis: {
+ title: {
+ text: null
+ },
+ labels: {
+ formatter: function(){
+ return (Math.abs(this.value) / 1000000) + 'M';
+ }
+ },
+ min: -4000000,
+ max: 4000000
+ },
+
+ plotOptions: {
+ series: {
+ stacking: 'normal'
+ }
+ },
+
+ tooltip: {
+ formatter: function(){
+ return '<b>'+ this.series.name +', age '+ this.point.category +'</b><br/>'+
+ 'Population: '+ Highcharts.numberFormat(Math.abs(this.point.y), 0);
+ }
+ },
+
+ series: [{
+ name: 'Male',
+ data: [-1746181, -1884428, -2089758, -2222362, -2537431, -2507081, -2443179,
+ -2664537, -3556505, -3680231, -3143062, -2721122, -2229181, -2227768,
+ -2176300, -1329968, -836804, -354784, -90569, -28367, -3878]
+ }, {
+ name: 'Female',
+ data: [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874,
+ 3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638,
+ 1447162, 1005011, 330870, 130632, 21208]
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
67 census/highcharts/examples/bar-stacked/index.htm
@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ type: 'bar'
+ },
+ title: {
+ text: 'Stacked bar chart'
+ },
+ xAxis: {
+ categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
+ },
+ yAxis: {
+ min: 0,
+ title: {
+ text: 'Total fruit consumption'
+ }
+ },
+ legend: {
+ backgroundColor: '#FFFFFF',
+ reversed: true
+ },
+ tooltip: {
+ formatter: function() {
+ return ''+
+ this.series.name +': '+ this.y +'';
+ }
+ },
+ plotOptions: {
+ series: {
+ stacking: 'normal'
+ }
+ },
+ series: [{
+ name: 'John',
+ data: [5, 3, 4, 7, 2]
+ }, {
+ name: 'Jane',
+ data: [2, 2, 3, 2, 1]
+ }, {
+ name: 'Joe',
+ data: [3, 4, 4, 2, 5]
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
97 census/highcharts/examples/column-basic/index.htm
@@ -0,0 +1,97 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ type: 'column'
+ },
+ title: {
+ text: 'Monthly Average Rainfall'
+ },
+ subtitle: {
+ text: 'Source: WorldClimate.com'
+ },
+ xAxis: {
+ categories: [
+ 'Jan',
+ 'Feb',
+ 'Mar',
+ 'Apr',
+ 'May',
+ 'Jun',
+ 'Jul',
+ 'Aug',
+ 'Sep',
+ 'Oct',
+ 'Nov',
+ 'Dec'
+ ]
+ },
+ yAxis: {
+ min: 0,
+ title: {
+ text: 'Rainfall (mm)'
+ }
+ },
+ legend: {
+ layout: 'vertical',
+ backgroundColor: '#FFFFFF',
+ align: 'left',
+ verticalAlign: 'top',
+ x: 100,
+ y: 70,
+ floating: true,
+ shadow: true
+ },
+ tooltip: {
+ formatter: function() {
+ return ''+
+ this.x +': '+ this.y +' mm';
+ }
+ },
+ plotOptions: {
+ column: {
+ pointPadding: 0.2,
+ borderWidth: 0
+ }
+ },
+ series: [{
+ name: 'Tokyo',
+ data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
+
+ }, {
+ name: 'New York',
+ data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
+
+ }, {
+ name: 'London',
+ data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
+
+ }, {
+ name: 'Berlin',
+ data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
+
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
154 census/highcharts/examples/column-drilldown/index.htm
@@ -0,0 +1,154 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+
+ var colors = Highcharts.getOptions().colors,
+ categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
+ name = 'Browser brands',
+ data = [{
+ y: 55.11,
+ color: colors[0],
+ drilldown: {
+ name: 'MSIE versions',
+ categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
+ data: [10.85, 7.35, 33.06, 2.81],
+ color: colors[0]
+ }
+ }, {
+ y: 21.63,
+ color: colors[1],
+ drilldown: {
+ name: 'Firefox versions',
+ categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
+ data: [0.20, 0.83, 1.58, 13.12, 5.43],
+ color: colors[1]
+ }
+ }, {
+ y: 11.94,
+ color: colors[2],
+ drilldown: {
+ name: 'Chrome versions',
+ categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
+ 'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
+ data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
+ color: colors[2]
+ }
+ }, {
+ y: 7.15,
+ color: colors[3],
+ drilldown: {
+ name: 'Safari versions',
+ categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
+ 'Safari 3.1', 'Safari 4.1'],
+ data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
+ color: colors[3]
+ }
+ }, {
+ y: 2.14,
+ color: colors[4],
+ drilldown: {
+ name: 'Opera versions',
+ categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
+ data: [ 0.12, 0.37, 1.65],
+ color: colors[4]
+ }
+ }];
+
+ function setChart(name, categories, data, color) {
+ chart.xAxis[0].setCategories(categories);
+ chart.series[0].remove();
+ chart.addSeries({
+ name: name,
+ data: data,
+ color: color || 'white'
+ });
+ }
+
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ type: 'column'
+ },
+ title: {
+ text: 'Browser market share, April, 2011'
+ },
+ subtitle: {
+ text: 'Click the columns to view versions. Click again to view brands.'
+ },
+ xAxis: {
+ categories: categories
+ },
+ yAxis: {
+ title: {
+ text: 'Total percent market share'
+ }
+ },
+ plotOptions: {
+ column: {
+ cursor: 'pointer',
+ point: {
+ events: {
+ click: function() {
+ var drilldown = this.drilldown;
+ if (drilldown) { // drill down
+ setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
+ } else { // restore
+ setChart(name, categories, data);
+ }
+ }
+ }
+ },
+ dataLabels: {
+ enabled: true,
+ color: colors[0],
+ style: {
+ fontWeight: 'bold'
+ },
+ formatter: function() {
+ return this.y +'%';
+ }
+ }
+ }
+ },
+ tooltip: {
+ formatter: function() {
+ var point = this.point,
+ s = this.x +':<b>'+ this.y +'% market share</b><br/>';
+ if (point.drilldown) {
+ s += 'Click to view '+ point.category +' versions';
+ } else {
+ s += 'Click to return to browser brands';
+ }
+ return s;
+ }
+ },
+ series: [{
+ name: name,
+ data: data,
+ color: 'white'
+ }],
+ exporting: {
+ enabled: false
+ }
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
55 census/highcharts/examples/column-negative/index.htm
@@ -0,0 +1,55 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ type: 'column'
+ },
+ title: {
+ text: 'Column chart with negative values'
+ },
+ xAxis: {
+ categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
+ },
+ tooltip: {
+ formatter: function() {
+ return ''+
+ this.series.name +': '+ this.y +'';
+ }
+ },
+ credits: {
+ enabled: false
+ },
+ series: [{
+ name: 'John',
+ data: [5, 3, 4, 7, 2]
+ }, {
+ name: 'Jane',
+ data: [2, -2, -3, 2, 1]
+ }, {
+ name: 'Joe',
+ data: [3, 4, 4, -2, 5]
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
120 census/highcharts/examples/column-parsed/index.htm
@@ -0,0 +1,120 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ // On document ready, call visualize on the datatable.
+ $(document).ready(function() {
+ /**
+ * Visualize an HTML table using Highcharts. The top (horizontal) header
+ * is used for series names, and the left (vertical) header is used
+ * for category names. This function is based on jQuery.
+ * @param {Object} table The reference to the HTML table to visualize
+ * @param {Object} options Highcharts options
+ */
+ Highcharts.visualize = function(table, options) {
+ // the categories
+ options.xAxis.categories = [];
+ $('tbody th', table).each( function(i) {
+ options.xAxis.categories.push(this.innerHTML);
+ });
+
+ // the data series
+ options.series = [];
+ $('tr', table).each( function(i) {
+ var tr = this;
+ $('th, td', tr).each( function(j) {
+ if (j > 0) { // skip first column
+ if (i == 0) { // get the name and init the series
+ options.series[j - 1] = {
+ name: this.innerHTML,
+ data: []
+ };
+ } else { // add values
+ options.series[j - 1].data.push(parseFloat(this.innerHTML));
+ }
+ }
+ });
+ });
+
+ var chart = new Highcharts.Chart(options);
+ }
+
+ var table = document.getElementById('datatable'),
+ options = {
+ chart: {
+ renderTo: 'container',
+ type: 'column'
+ },
+ title: {
+ text: 'Data extracted from a HTML table in the page'
+ },
+ xAxis: {
+ },
+ yAxis: {
+ title: {
+ text: 'Units'
+ }
+ },
+ tooltip: {
+ formatter: function() {
+ return '<b>'+ this.series.name +'</b><br/>'+
+ this.y +' '+ this.x.toLowerCase();
+ }
+ }
+ };
+
+ Highcharts.visualize(table, options);
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+<table id="datatable">
+ <thead>
+ <tr>
+ <th></th>
+ <th>Jane</th>
+ <th>John</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th>Apples</th>
+ <td>3</td>
+ <td>4</td>
+ </tr>
+ <tr>
+ <th>Pears</th>
+ <td>2</td>
+ <td>0</td>
+ </tr>
+ <tr>
+ <th>Plums</th>
+ <td>5</td>
+ <td>11</td>
+ </tr>
+ <tr>
+ <th>Bananas</th>
+ <td>1</td>
+ <td>1</td>
+ </tr>
+ <tr>
+ <th>Oranges</th>
+ <td>2</td>
+ <td>4</td>
+ </tr>
+ </tbody>
+</table>
+ </body>
+</html>
View
103 census/highcharts/examples/column-rotated-labels/index.htm
@@ -0,0 +1,103 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ type: 'column',
+ margin: [ 50, 50, 100, 80]
+ },
+ title: {
+ text: 'World\'s largest cities per 2008'
+ },
+ xAxis: {
+ categories: [
+ 'Tokyo',
+ 'Jakarta',
+ 'New York',
+ 'Seoul',
+ 'Manila',
+ 'Mumbai',
+ 'Sao Paulo',
+ 'Mexico City',
+ 'Dehli',
+ 'Osaka',
+ 'Cairo',
+ 'Kolkata',
+ 'Los Angeles',
+ 'Shanghai',
+ 'Moscow',
+ 'Beijing',
+ 'Buenos Aires',
+ 'Guangzhou',
+ 'Shenzhen',
+ 'Istanbul'
+ ],
+ labels: {
+ rotation: -45,
+ align: 'right',
+ style: {
+ fontSize: '13px',
+ fontFamily: 'Verdana, sans-serif'
+ }
+ }
+ },
+ yAxis: {
+ min: 0,
+ title: {
+ text: 'Population (millions)'
+ }
+ },
+ legend: {
+ enabled: false
+ },
+ tooltip: {
+ formatter: function() {
+ return '<b>'+ this.x +'</b><br/>'+
+ 'Population in 2008: '+ Highcharts.numberFormat(this.y, 1) +
+ ' millions';
+ }
+ },
+ series: [{
+ name: 'Population',
+ data: [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18,
+ 17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,
+ 11.7, 11.2],
+ dataLabels: {
+ enabled: true,
+ rotation: -90,
+ color: '#FFFFFF',
+ align: 'right',
+ x: -3,
+ y: 10,
+ formatter: function() {
+ return this.y;
+ },
+ style: {
+ fontSize: '13px',
+ fontFamily: 'Verdana, sans-serif'
+ }
+ }
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
79 census/highcharts/examples/column-stacked-and-grouped/index.htm
@@ -0,0 +1,79 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+
+ chart: {
+ renderTo: 'container',
+ type: 'column'
+ },
+
+ title: {
+ text: 'Total fruit consumtion, grouped by gender'
+ },
+
+ xAxis: {
+ categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
+ },
+
+ yAxis: {
+ allowDecimals: false,
+ min: 0,
+ title: {
+ text: 'Number of fruits'
+ }
+ },
+
+ tooltip: {
+ formatter: function() {
+ return '<b>'+ this.x +'</b><br/>'+
+ this.series.name +': '+ this.y +'<br/>'+
+ 'Total: '+ this.point.stackTotal;
+ }
+ },
+
+ plotOptions: {
+ column: {
+ stacking: 'normal'
+ }
+ },
+
+ series: [{
+ name: 'John',
+ data: [5, 3, 4, 7, 2],
+ stack: 'male'
+ }, {
+ name: 'Joe',
+ data: [3, 4, 4, 2, 5],
+ stack: 'male'
+ }, {
+ name: 'Jane',
+ data: [2, 5, 6, 2, 1],
+ stack: 'female'
+ }, {
+ name: 'Janet',
+ data: [3, 0, 4, 4, 3],
+ stack: 'female'
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
63 census/highcharts/examples/column-stacked-percent/index.htm
@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ type: 'column'
+ },
+ title: {
+ text: 'Stacked column chart'
+ },
+ xAxis: {
+ categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
+ },
+ yAxis: {
+ min: 0,
+ title: {
+ text: 'Total fruit consumption'
+ }
+ },
+ tooltip: {
+ formatter: function() {
+ return ''+
+ this.series.name +': '+ this.y +' ('+ Math.round(this.percentage) +'%)';
+ }
+ },
+ plotOptions: {
+ column: {
+ stacking: 'percent'
+ }
+ },
+ series: [{
+ name: 'John',
+ data: [5, 3, 4, 7, 2]
+ }, {
+ name: 'Jane',
+ data: [2, 2, 3, 2, 1]
+ }, {
+ name: 'Joe',
+ data: [3, 4, 4, 2, 5]
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
86 census/highcharts/examples/column-stacked/index.htm
@@ -0,0 +1,86 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ type: 'column'
+ },
+ title: {
+ text: 'Stacked column chart'
+ },
+ xAxis: {
+ categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
+ },
+ yAxis: {
+ min: 0,
+ title: {
+ text: 'Total fruit consumption'
+ },
+ stackLabels: {
+ enabled: true,
+ style: {
+ fontWeight: 'bold',
+ color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
+ }
+ }
+ },
+ legend: {
+ align: 'right',
+ x: -100,
+ verticalAlign: 'top',
+ y: 20,
+ floating: true,
+ backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
+ borderColor: '#CCC',
+ borderWidth: 1,
+ shadow: false
+ },
+ tooltip: {
+ formatter: function() {
+ return '<b>'+ this.x +'</b><br/>'+
+ this.series.name +': '+ this.y +'<br/>'+
+ 'Total: '+ this.point.stackTotal;
+ }
+ },
+ plotOptions: {
+ column: {
+ stacking: 'normal',
+ dataLabels: {
+ enabled: true,
+ color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
+ }
+ }
+ },
+ series: [{
+ name: 'John',
+ data: [5, 3, 4, 7, 2]
+ }, {
+ name: 'Jane',
+ data: [2, 2, 3, 2, 1]
+ }, {
+ name: 'Joe',
+ data: [3, 4, 4, 2, 5]
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
101 census/highcharts/examples/combo-dual-axes/index.htm
@@ -0,0 +1,101 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ zoomType: 'xy'
+ },
+ title: {
+ text: 'Average Monthly Temperature and Rainfall in Tokyo'
+ },
+ subtitle: {
+ text: 'Source: WorldClimate.com'
+ },
+ xAxis: [{
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+ 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+ }],
+ yAxis: [{ // Primary yAxis
+ labels: {
+ formatter: function() {
+ return this.value +'°C';
+ },
+ style: {
+ color: '#89A54E'
+ }
+ },
+ title: {
+ text: 'Temperature',
+ style: {
+ color: '#89A54E'
+ }
+ }
+ }, { // Secondary yAxis
+ title: {
+ text: 'Rainfall',
+ style: {
+ color: '#4572A7'
+ }
+ },
+ labels: {
+ formatter: function() {
+ return this.value +' mm';
+ },
+ style: {
+ color: '#4572A7'
+ }
+ },
+ opposite: true
+ }],
+ tooltip: {
+ formatter: function() {
+ return ''+
+ this.x +': '+ this.y +
+ (this.series.name == 'Rainfall' ? ' mm' : '°C');
+ }
+ },
+ legend: {
+ layout: 'vertical',
+ align: 'left',
+ x: 120,
+ verticalAlign: 'top',
+ y: 100,
+ floating: true,
+ backgroundColor: '#FFFFFF'
+ },
+ series: [{
+ name: 'Rainfall',
+ color: '#4572A7',
+ type: 'column',
+ yAxis: 1,
+ data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
+
+ }, {
+ name: 'Temperature',
+ color: '#89A54E',
+ type: 'spline',
+ data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
137 census/highcharts/examples/combo-multi-axes/index.htm
@@ -0,0 +1,137 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ zoomType: 'xy'
+ },
+ title: {
+ text: 'Average Monthly Weather Data for Tokyo'
+ },
+ subtitle: {
+ text: 'Source: WorldClimate.com'
+ },
+ xAxis: [{
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+ 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+ }],
+ yAxis: [{ // Primary yAxis
+ labels: {
+ formatter: function() {
+ return this.value +'°C';
+ },
+ style: {
+ color: '#89A54E'
+ }
+ },
+ title: {
+ text: 'Temperature',
+ style: {
+ color: '#89A54E'
+ }
+ },
+ opposite: true
+
+ }, { // Secondary yAxis
+ gridLineWidth: 0,
+ title: {
+ text: 'Rainfall',
+ style: {
+ color: '#4572A7'
+ }
+ },
+ labels: {
+ formatter: function() {
+ return this.value +' mm';
+ },
+ style: {
+ color: '#4572A7'
+ }
+ }
+
+ }, { // Tertiary yAxis
+ gridLineWidth: 0,
+ title: {
+ text: 'Sea-Level Pressure',
+ style: {
+ color: '#AA4643'
+ }
+ },
+ labels: {
+ formatter: function() {
+ return this.value +' mb';
+ },
+ style: {
+ color: '#AA4643'
+ }
+ },
+ opposite: true
+ }],
+ tooltip: {
+ formatter: function() {
+ var unit = {
+ 'Rainfall': 'mm',
+ 'Temperature': '°C',
+ 'Sea-Level Pressure': 'mb'
+ }[this.series.name];
+
+ return ''+
+ this.x +': '+ this.y +' '+ unit;
+ }
+ },
+ legend: {
+ layout: 'vertical',
+ align: 'left',
+ x: 120,
+ verticalAlign: 'top',
+ y: 80,
+ floating: true,
+ backgroundColor: '#FFFFFF'
+ },
+ series: [{
+ name: 'Rainfall',
+ color: '#4572A7',
+ type: 'column',
+ yAxis: 1,
+ data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
+
+ }, {
+ name: 'Sea-Level Pressure',
+ type: 'spline',
+ color: '#AA4643',
+ yAxis: 2,
+ data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
+ marker: {
+ enabled: false
+ },
+ dashStyle: 'shortdot'
+
+ }, {
+ name: 'Temperature',
+ color: '#89A54E',
+ type: 'spline',
+ data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
60 census/highcharts/examples/combo-regression/index.htm
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container'
+ },
+ xAxis: {
+ min: -0.5,
+ max: 5.5
+ },
+ yAxis: {
+ min: 0
+ },
+ title: {
+ text: 'Scatter plot with regression line'
+ },
+ series: [{
+ type: 'line',
+ name: 'Regression Line',
+ data: [[0, 1.11], [5, 4.51]],
+ marker: {
+ enabled: false
+ },
+ states: {
+ hover: {
+ lineWidth: 0
+ }
+ },
+ enableMouseTracking: false
+ }, {
+ type: 'scatter',
+ name: 'Observations',
+ data: [1, 1.5, 2.8, 3.5, 3.9, 4.2],
+ marker: {
+ radius: 4
+ }
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
97 census/highcharts/examples/combo/index.htm
@@ -0,0 +1,97 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container'
+ },
+ title: {
+ text: 'Combination chart'
+ },
+ xAxis: {
+ categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
+ },
+ tooltip: {
+ formatter: function() {
+ var s;
+ if (this.point.name) { // the pie chart
+ s = ''+
+ this.point.name +': '+ this.y +' fruits';
+ } else {
+ s = ''+
+ this.x +': '+ this.y;
+ }
+ return s;
+ }
+ },
+ labels: {
+ items: [{
+ html: 'Total fruit consumption',
+ style: {
+ left: '40px',
+ top: '8px',
+ color: 'black'
+ }
+ }]
+ },
+ series: [{
+ type: 'column',
+ name: 'Jane',
+ data: [3, 2, 1, 3, 4]
+ }, {
+ type: 'column',
+ name: 'John',
+ data: [2, 3, 5, 7, 6]
+ }, {
+ type: 'column',
+ name: 'Joe',
+ data: [4, 3, 3, 9, 0]
+ }, {
+ type: 'spline',
+ name: 'Average',
+ data: [3, 2.67, 3, 6.33, 3.33]
+ }, {
+ type: 'pie',
+ name: 'Total consumption',
+ data: [{
+ name: 'Jane',
+ y: 13,
+ color: '#4572A7' // Jane's color
+ }, {
+ name: 'John',
+ y: 23,
+ color: '#AA4643' // John's color
+ }, {
+ name: 'Joe',
+ y: 19,
+ color: '#89A54E' // Joe's color
+ }],
+ center: [100, 80],
+ size: 100,
+ showInLegend: false,
+ dataLabels: {
+ enabled: false
+ }
+ }]
+ });
+ });
+
+});
+ </script>
+ </head>
+ <body>
+<script src="../../js/highcharts.js"></script>
+<script src="../../js/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+ </body>
+</html>
View
88 census/highcharts/examples/dynamic-click-to-add/index.htm
@@ -0,0 +1,88 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Highcharts Example</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+$(function () {
+ var chart;
+ $(document).ready(function() {
+ chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ type: 'scatter',
+ margin: [70, 50, 60, 80],
+ events: {
+ click: function(e) {
+ // find the clicked values and the series
+ var x = e.xAxis[0].value,
+ y = e.yAxis[0].value,
+ series = this.series[0];
+
+ // Add it
+ series.addPoint([x, y]);
+
+ }
+ }
+ },
+ title: {
+ text: 'User supplied data'
+ },
+ subtitle: {
+ text: 'Click the plot area to add a point. Click a point to remove it.'
+ },
+ xAxis: {
+ minPadding: 0.2,
+ maxPadding: 0.2,
+ maxZoom: 60
+ },
+ yAxis: {
+ title: {
+ text: 'Value'
+ },
+ minPadding: 0.2,
+ maxPadding: 0.2,
+ maxZoom: 60,
+ plotLines: [{
+ value: 0,
+ width: 1,
+ color: '#808080'
+ }]
+ },
+ legend: {
+ enabled: false
+ },
+ exporting: {
+ enabled: false
+ },
+ plotOptions: {
+ series: {
+ lineWidth: 1,
+ point: {
+ events: {
+ 'click': function() {
+ if (this.series.data.length > 1) this.remove();
+ }
+ }
+ }
+ }
+ },
+ series: [{
+