Inclusion des librairies de charts

Highcharts : all
Sigma : networks

config/dispatcher-tree.json

@@ -9,6 +9,9 @@
 	"css" : "/css",
 	"js" : "/js",
 
+	"highcharts": "/js/lib/highcharts", 
+	"sigma": "/js/lib/sigma", 
+
 	"cssview" : "/view/css",
 	"jsview" : "/view/js"
 }

js/lib/highcharts/api/css/ref.css

@@ -0,0 +1,594 @@
+.clearfix {
+	clear: both;
+}
+.hidden {
+	visibility: hidden;
+}
+.container {
+	width: auto;
+	padding: 30px;
+	margin: auto;
+}
+* {
+	font-family: 'Source Sans Pro', sans-serif;
+}
+
+body {
+	margin: 0;
+	background-color: #15151d;
+	font-size: 1em;
+	overflow-x: hidden;
+}
+h3 {
+	text-transform: uppercase;
+	margin-bottom: 3px;
+}
+
+p {
+	margin: 0 0 1em 0;
+}
+a {
+	color: #8085e8;
+	text-decoration: none;
+	font-weight: bold;
+}
+a:hover {
+	color: #90ee7e;
+}
+
+#nav a.dump {
+	padding: 0px;
+	margin: 0px;
+}
+
+/*
+==========
+=== Header
+==========
+*/
+#top {
+	background-color: #252530;
+}
+#top .container {
+	padding: 0;
+}
+#top h1 {
+	color: #eeeaea;
+	font-weight: 100;
+	margin: 0;
+	font-size: 1.5em;
+}
+.cell {
+	width: 33%;
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.cell:nth-child(4) {
+	text-align: right;
+	color:#eeeaea;
+	font-size: 0.9em;
+}
+
+#logo {
+	display: block;
+
+}
+#logo img {
+	max-width: 200px;
+	width: 100%;
+	margin: 15px;
+	margin-left: 33px;
+	height: 32px;
+}
+
+/* Search bar */
+#search-div {
+	color: #252530;
+	display: block;
+	margin-bottom: 20px;
+	border: 1px solid #252530;
+}
+
+div#search-div i {
+	margin: 5px;
+	color: #252530;
+	font-size: 14px;
+}
+
+input#search {
+	height: 18px;
+	font-family: "Courier New", Courier, monospace;
+	font-size: 0.9em;
+	background-color: transparent;
+	border: none;	
+	outline: none;
+	color: #252530;
+	width:80%;
+}
+
+.ui-autocomplete {
+	max-height: 500px;
+	max-width: 400px;
+	overflow-y: auto;
+	overflow-x: auto;
+}
+
+.ui-menu .ui-menu-item {
+	font-size:14px;
+	zoom:1;
+	font-family: "Courier New", Courier, monospace;
+}
+.ui-widget-content a {
+	color: #222222 /*{fcContent}*/;
+}
+
+/*
+==============
+=== END Header
+==============
+*/
+/*
+==========
+=== Footer
+==========
+*/
+#footer {
+	background-color: #15151d;
+	color: #eeeaea;
+}
+#footer-copy {
+	float: left;
+	font-size: 14px;
+	line-height: 18px;
+}
+#footer-social {
+	float: right;
+}
+#footer-social a {
+	color: #eeeaea;
+	font-size: 18px;
+	margin-left: 10px;
+}
+#footer-social a:hover {
+	color: #90ee7e;
+}
+#footer .container {
+	padding: 10px;
+}
+#scrollTop {
+	position: fixed;
+	bottom: 75px;
+	right: 50px;
+	background-color: #90ee7e;
+	padding: 10px;
+	border-radius: 2px;
+	color: white;
+	display: none;
+}
+#scrollTop:hover {
+	color: black;
+}
+/*
+==============
+=== END Footer
+==============
+*/
+
+#reference-loading {
+	margin-top: 300px;
+	text-align: center;
+}
+
+/*
+===========
+=== Wrapper
+===========
+*/
+#splashText {
+	display: none;
+}
+.nav-section h3 {
+	font-size: 24px;
+	margin-top: 0;
+}
+
+#wrapper{
+	background-color: #d6d1d1;
+}
+#wrapper .container {
+	padding: 0;
+}
+#wrapper-inner {
+	background-color: #ffffff;
+	/*border: 1px solid silver;*/
+}
+
+.tree a {
+	color: #252530;
+}
+
+#nav .tree, #nav .tree * {
+	font-family: "Courier New", Courier, monospace;
+}
+
+#nav .header p {
+	font-weight: normal;
+	color: #666;
+}
+
+#nav h1, 
+#details h1,
+#details h2 {
+	font-weight: 100;
+	margin-bottom: 1em;
+}
+
+#nav h1, 
+#details h2 {
+	text-transform: uppercase;
+}
+
+#nav {
+	min-height: 100%;
+	border-right: 1px solid silver;
+}
+
+#nav-wrap {
+	width: 30%;
+	float:left;
+	overflow: auto;
+}
+
+#nav a,#nav a:visited {
+	font-weight: bold;
+	padding: 0 2px;
+	margin: 1px;
+}
+
+.nav-section {
+	padding: 30px;
+	position: relative;
+}
+.nav-section:last-child {
+	border-bottom: none;
+}
+
+#nav .level {
+	margin-left: 13px;
+	display: none;
+}
+
+#nav .level-0 {
+	display: block;
+}
+
+#nav a.level-0 {
+	margin-left: 1em;
+}
+
+#nav .menuitem {
+	position: relative;
+}
+
+#nav .value {
+	width: 40%;
+	overflow: hidden;
+	color: silver;
+	position: absolute;
+	white-space: nowrap;
+}
+#nav .value-string, #nav .value-color {
+	color: #39A832;
+}
+#nav .value-number {
+	color: #297EA8;
+}
+
+a.hilighted {
+	background-color: #C5F7BE;
+}
+
+#nav .plus {
+	display: block;
+	position: absolute;
+	left: -12px;
+	top: 0;
+	width: 9px;
+	height: 9px;
+	font-family: FontAwesome;
+	color: gray;
+
+}
+#nav .plus:before {
+}
+
+#nav .collapsed>.plus:before {
+	content: "\f0da";
+}
+
+#nav .expanded>.plus:before {
+	content: "\f0d7";
+}
+
+#nav .dots {
+	padding: 0 4px;
+}
+#nav .expanded>.dots {
+	display: none;
+}
+
+#nav .dots.loading {
+	background: url(./../images/ajax-loader.gif) no-repeat center;
+}
+#nav .dots.error {
+	color: red;
+	font-weight: bold;
+}
+
+#nav .dots.loading span {
+	visibility: hidden;
+}
+
+#nav code {
+	color:#8085e8;
+	font-weight: bold;
+}
+
+#nav span.typed {
+	margin-left: 15px;
+}
+#nav .collapsed span.typed {
+	margin-left: 0;
+}
+#nav .collapsed br.typed {
+	display: none;
+}
+
+#methods-and-properties-toc ul {
+	margin-left: 0;
+	padding-left: 1em;
+}
+
+#options-tree,#global-options-tree,#objects-tree {
+	font-size: 0.9em;
+}
+
+pre,code {
+	font-family: "Courier New", Courier, monospace;
+}
+
+#overview {
+	margin-left: 420px;
+}
+
+#details-wrap {
+	float: right;
+	width: 70%;
+	overflow:auto;
+	margin:0px;
+	padding:0px;
+}
+
+/* Member styling */
+.member {
+	padding: 30px;
+	overflow-y: hidden;
+	position: relative;
+	border-top: 1px solid silver;
+}
+
+.member:first-child {
+	color:green;
+}
+
+.member.deprecated * {
+	color: silver !important;
+}
+
+.member.hilighted {
+	background-color: #eefdec;
+}
+
+.member .title, .member .title a, .member .returnType {
+	font-family: "Courier New", Courier, monospace;
+	font-size: 1.1em;
+	font-weight: bold;
+	margin-bottom: 5px;
+	display: inline-block;
+}
+
+.member .title a{
+	text-decoration: underline;
+}
+
+.member .default {
+	display: none;
+}
+
+.member .since {
+	float: right;
+	font-size: 0.8em;
+}
+
+.member .description {
+	color: #666;
+}
+.member .context {
+	padding: 1em 0;
+}
+
+.description code {
+	color: #666;
+	font-weight: normal;
+}
+
+.section {
+	padding-top: 25px;
+}
+
+.section .demo, .member .demo {
+	font-style: italic;
+	margin-top: 1.5em;
+	margin-bottom:0.5em;
+	margin-left: 1.5em;
+}
+
+.section .member .demo {
+	margin-left: 0em;
+}
+
+.section h1,
+.section h2,
+.section .section-description {
+	padding-left: 25px;
+}
+
+.section h1 {
+	margin: 0px;
+	font-family: "Courier New", Courier, monospace;
+}
+
+.section-description {
+	margin: 0 0 1em 0;
+}
+
+/*gert*/
+.menuitem div {
+	margin-left: 8px;
+}
+
+.tree {
+	padding-left: 24px;
+}
+
+div.edit {
+	float: right
+}
+
+/*edit form*/
+form#optionAttribute td.inp {
+	width: 450px;
+}
+
+form#optionAttribute td input {
+	width: 100%;
+}
+
+form#optionAttribute td textarea {
+	width: 100%;
+}
+
+form#optionAttribute td input[type="checkbox"] {
+	width: 20px;
+}
+
+.pencil {
+	background-image: url(./../images/edit.png);
+}
+
+.remove {
+	background-image: url(./../images/delete.gif);
+}
+
+.add {
+	background-image: url(./../images/add.png);
+}
+
+.copy {
+	background-image: url(./../images/copy.png);
+}
+
+.pencil, .add, .remove, .copy {
+	background-repeat: no-repeat;
+	background-position: center;
+	float: right;
+	position: relative;
+	width: 10px;
+	padding: 8px;
+}
+
+.pencil a,.add a,.remove a, .copy a {
+	text-decoration: none;
+	padding: 5px;
+}
+
+.deprecated, .error {
+	color: red;
+	font-weight: bold;
+}
+
+dl#inhMembers dd a,span.returnType {
+	margin-left: 3px;
+}
+
+/* fix for icons changing containers height, affects updateHeights, javascript function */
+#footer-social i:before {  
+  line-height: 1.5;
+}
+
+@media screen and (max-width: 767px) {
+	.nav-section-inner {
+		display: none;
+	}
+	#nav-wrap {
+		width: 100%;
+	}
+	#details-wrap {
+		width: 100%;
+	}
+	.nav-section {
+		padding: 0px;
+	}
+	#search-div{
+		margin:30px;
+	}
+	#wrapper,
+	#wrapper-inner,
+	#details-wrap {
+		height: auto !important;
+	}
+	.cell {
+		width: 48%;
+		text-align: center !important;
+	}
+	.cell:nth-child(1) {
+		width: 100%;
+	}
+	#splashText {
+		padding: 30px;
+		text-align: center;
+	}	
+	#splashText.section {
+		border: none;
+	}
+	#splashText img {
+		width: 100%;
+		max-width: 380px;
+	}
+	#scrollTop {
+		display: block;
+	}
+	.section {
+		padding-top: 0px;
+	}
+	#logo img {
+		margin-left:0px;
+		margin-right:0px;
+	}
+}
+@media screen and (max-width: 479px) {
+	#footer-copy,
+	#footer-social {
+		float: none;
+		text-align: center;
+		padding: 5px 0;
+	}
+	.cell {
+		width: 100%;
+	}
+	.ui-autocomplete {
+		max-height: 300px;
+		max-width: 275px;
+		overflow-x:auto;
+	}

js/lib/highcharts/api/css/source-sans-pro.css

@@ -0,0 +1,131 @@
+@font-face{
+    font-family: 'Source Sans Pro';
+    font-weight: 200;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('../fonts/sourcesanspro/EOT/SourceSansPro-ExtraLight.eot') format('embedded-opentype'),
+         url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-ExtraLight.otf.woff') format('woff'),
+         url('../fonts/sourcesanspro/OTF/SourceSansPro-ExtraLight.otf') format('opentype'),
+         url('../fonts/sourcesanspro/TTF/SourceSansPro-ExtraLight.ttf') format('truetype');
+}
+
+@font-face{
+    font-family: 'Source Sans Pro';
+    font-weight: 200;
+    font-style: italic;
+    font-stretch: normal;
+    src: url('../fonts/sourcesanspro/EOT/SourceSansPro-ExtraLightIt.eot') format('embedded-opentype'),
+         url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-ExtraLightIt.otf.woff') format('woff'),
+         url('../fonts/sourcesanspro/OTF/SourceSansPro-ExtraLightIt.otf') format('opentype'),
+         url('../fonts/sourcesanspro/TTF/SourceSansPro-ExtraLightIt.ttf') format('truetype');
+}
+
+@font-face{
+    font-family: 'Source Sans Pro';
+    font-weight: 300;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('../fonts/sourcesanspro/EOT/SourceSansPro-Light.eot') format('embedded-opentype'),
+         url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-Light.otf.woff') format('woff'),
+         url('../fonts/sourcesanspro/OTF/SourceSansPro-Light.otf') format('opentype'),
+         url('../fonts/sourcesanspro/TTF/SourceSansPro-Light.ttf') format('truetype');
+}
+
+@font-face{
+    font-family: 'Source Sans Pro';
+    font-weight: 300;
+    font-style: italic;
+    font-stretch: normal;
+    src: url('../fonts/sourcesanspro/EOT/SourceSansPro-LightIt.eot') format('embedded-opentype'),
+         url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-LightIt.otf.woff') format('woff'),
+         url('../fonts/sourcesanspro/OTF/SourceSansPro-LightIt.otf') format('opentype'),
+         url('../fonts/sourcesanspro/TTF/SourceSansPro-LightIt.ttf') format('truetype');
+}
+
+@font-face{
+    font-family: 'Source Sans Pro';
+    font-weight: 400;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('../fonts/sourcesanspro/EOT/SourceSansPro-Regular.eot') format('embedded-opentype'),
+         url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-Regular.otf.woff') format('woff'),
+         url('../fonts/sourcesanspro/OTF/SourceSansPro-Regular.otf') format('opentype'),
+         url('../fonts/sourcesanspro/TTF/SourceSansPro-Regular.ttf') format('truetype');
+}
+
+@font-face{
+    font-family: 'Source Sans Pro';
+    font-weight: 400;
+    font-style: italic;
+    font-stretch: normal;
+    src: url('../fonts/sourcesanspro/EOT/SourceSansPro-It.eot') format('embedded-opentype'),
+         url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-It.otf.woff') format('woff'),
+         url('../fonts/sourcesanspro/OTF/SourceSansPro-It.otf') format('opentype'),
+         url('../fonts/sourcesanspro/TTF/SourceSansPro-It.ttf') format('truetype');
+}
+
+@font-face{
+    font-family: 'Source Sans Pro';
+    font-weight: 600;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('../fonts/sourcesanspro/EOT/SourceSansPro-Semibold.eot') format('embedded-opentype'),
+         url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-Semibold.otf.woff') format('woff'),
+         url('../fonts/sourcesanspro/OTF/SourceSansPro-Semibold.otf') format('opentype'),
+         url('../fonts/sourcesanspro/TTF/SourceSansPro-Semibold.ttf') format('truetype');
+}
+
+@font-face{
+    font-family: 'Source Sans Pro';
+    font-weight: 600;
+    font-style: italic;
+    font-stretch: normal;
+    src: url('../fonts/sourcesanspro/EOT/SourceSansPro-SemiboldIt.eot') format('embedded-opentype'),
+         url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-SemiboldIt.otf.woff') format('woff'),
+         url('../fonts/sourcesanspro/OTF/SourceSansPro-SemiboldIt.otf') format('opentype'),
+         url('../fonts/sourcesanspro/TTF/SourceSansPro-SemiboldIt.ttf') format('truetype');
+}
+
+@font-face{
+    font-family: 'Source Sans Pro';
+    font-weight: 700;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('../fonts/sourcesanspro/EOT/SourceSansPro-Bold.eot') format('embedded-opentype'),
+         url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-Bold.otf.woff') format('woff'),
+         url('../fonts/sourcesanspro/OTF/SourceSansPro-Bold.otf') format('opentype'),
+         url('../fonts/sourcesanspro/TTF/SourceSansPro-Bold.ttf') format('truetype');
+}
+
+@font-face{
+    font-family: 'Source Sans Pro';
+    font-weight: 700;
+    font-style: italic;
+    font-stretch: normal;
+    src: url('../fonts/sourcesanspro/EOT/SourceSansPro-BoldIt.eot') format('embedded-opentype'),
+         url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-BoldIt.otf.woff') format('woff'),
+         url('../fonts/sourcesanspro/OTF/SourceSansPro-BoldIt.otf') format('opentype'),
+         url('../fonts/sourcesanspro/TTF/SourceSansPro-BoldIt.ttf') format('truetype');
+}
+
+@font-face{
+    font-family: 'Source Sans Pro';
+    font-weight: 900;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('../fonts/sourcesanspro/EOT/SourceSansPro-Black.eot') format('embedded-opentype'),
+         url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-Black.otf.woff') format('woff'),
+         url('../fonts/sourcesanspro/OTF/SourceSansPro-Black.otf') format('opentype'),
+         url('../fonts/sourcesanspro/TTF/SourceSansPro-Black.ttf') format('truetype');
+}
+
+@font-face{
+    font-family: 'Source Sans Pro';
+    font-weight: 900;
+    font-style: italic;
+    font-stretch: normal;
+    src: url('../fonts/sourcesanspro/EOT/SourceSansPro-BlackIt.eot') format('embedded-opentype'),
+         url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-BlackIt.otf.woff') format('woff'),
+         url('../fonts/sourcesanspro/OTF/SourceSansPro-BlackIt.otf') format('opentype'),
+         url('../fonts/sourcesanspro/TTF/SourceSansPro-BlackIt.ttf') format('truetype');
+}

js/lib/highcharts/api/highcharts.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+<title>Highcharts API Reference</title>
+<link href="css/source-sans-pro.css" rel="stylesheet" type="text/css">
+<link href="css/font-awesome.min.css" rel="stylesheet">
+<link rel="stylesheet" href="css/jquery-ui.min.css" />
+<link rel="apple-touch-icon" sizes="57x57" href="images/apple-touch-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="144x144" href="images/apple-touch-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="60x60" href="images/apple-touch-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="120x120" href="images/apple-touch-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="76x76" href="images/apple-touch-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="152x152" href="images/apple-touch-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon-180x180.png">
+<link rel="icon" type="image/png" href="images/favicon-192x192.png" sizes="192x192">
+<link rel="icon" type="image/png" href="images/favicon-160x160.png" sizes="160x160">
+<link rel="icon" type="image/png" href="images/favicon-96x96.png" sizes="96x96">
+<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16">
+<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32">
+<meta name="msapplication-TileColor" content="#2b5797">
+<meta name="msapplication-TileImage" content="/mstile-144x144.png">
+<link href="css/ref.css" rel="stylesheet"
+	type="text/css" />
+<script src="js/jquery-1.11.3.min.js"></script>
+<script src="js/jquery-ui.min.js"></script>
+<script type="text/javascript">
+	var PRODUCTNAME = 'Highcharts'.toLowerCase(),
+		runDB = false;
+</script>
+<script src="js/ref.js"
+	type="text/javascript"></script>
+</head>
+<body>
+	<div id="top">
+		<div class="container">
+			<div class="cell">
+				<a href="http://www.highcharts.com/products/highcharts" title="Highcharts Home Page" id="logo"><img
+					alt="Highcharts Home Page"
+					src="images/Highcharts.svg"
+					border="0"></a>
+			</div>
+			<div class="cell" style="text-align: center;">
+				<h1>Options Reference v4.2.4</h1>
+			</div>
+			<div class="cell hidden-offline">See also options for <a href="/highstock">Highstock</a>, <a href="/highmaps">Highmaps</a>
+			</div>
+			<div class="clearfix"></div>
+		</div>
+	</div>
+	<div id="wrapper">
+		<div class="container">
+			<div id="wrapper-inner">
+				<div id="nav-wrap">
+					<div id="nav">						
+						<div class="nav-section first">
+							<div class="ui-widget" id="search-div">
+								<div id="search-wrap">
+									<i class="fa fa-search"></i><input id="search"/>
+								</div>
+							</div>
+							<div class="nav-section-inner">
+								<h3 id="options-header">Configuration options</h3>
+								<p>For initial declarative chart setup. View as <a class="dump" href="highcharts/option/dump.json">JSON</a>.</p>
+								<div id="global-options-tree">
+									<code>Highcharts.setOptions({</code>
+									<div id="global-options" class="tree"></div>
+									<code>});</code>
+								</div>
+								<div id="options-tree">
+									<code>$("#container").highcharts({</code>
+									<div id="options" class="tree"></div>
+									<code>});</code>
+								</div>
+							</div>
+						</div>
+
+						<div class="nav-section">
+							<div class="nav-section-inner">
+								<h3>Methods and properties</h3>
+
+								<p>For dynamically modifying the chart. View as <a class="dump" href="highcharts/object/dump.json">JSON</a>. </p>
+								<div id="methods-and-properties-toc"></div>
+
+								<div id="objects-tree">
+									<div id="objects" class="tree"></div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div id="details-wrap">
+					<div id="details">
+					   <div id="splashText" class="section">
+						   <img src="images/splash.svg" />
+					   </div>
+				   </div>
+				</div>
+				<div class="clearfix"></div>
+			</div>
+		</div>
+	</div>
+	<div id="footer">
+		<div class="container">
+			<div id="footer-copy">
+				&copy;&nbsp;Highcharts 2016. All rights reserved.
+			</div>
+			<div id="footer-social">
+				<a href="https://www.facebook.com/Highcharts" title="Facebook" class="social-icon"><i class="fa fa-facebook"></i></a>
+				<a href="https://twitter.com/Highcharts" title="Twitter" class="social-icon"><i class="fa fa-twitter"></i></a>
+				<a href="http://www.linkedin.com/company/highsoft-solutions-as" title="LinkedIn" class="social-icon"><i class="fa fa-linkedin"></i></a>
+				<a href="https://github.com/highslide-software/highcharts.com" title="Github" class="social-icon"><i class="fa fa-github"></i></a>
+			</div>
+			<div class="clearfix"></div>
+		</div>
+	</div>
+	<a id="scrollTop" href="#top" style="display: none;"><i class="fa fa-arrow-up"></i></a>
+</body>
+</html>

js/lib/highcharts/api/images/Highcharts.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="380" height="70"
+	 xml:space="preserve">
+
+<g transform="translate(-25,-30)">
+<g>
+	<path fill="#eeeaea" d="M138.475,69.712h-17.02v9.77c0,1.037-0.813,1.851-1.849,1.851c-1.037,0-1.85-0.813-1.85-1.851V57.725
+		c0-1.037,0.813-1.852,1.85-1.852c1.036,0,1.849,0.813,1.849,1.852v8.436h17.02v-8.436c0-1.037,0.814-1.852,1.85-1.852
+		c1.036,0,1.85,0.813,1.85,1.852v21.754c0,1.037-0.814,1.851-1.85,1.851c-1.036,0-1.85-0.813-1.85-1.851V69.712z"/>
+	<path fill="#eeeaea" d="M156.973,79.479c0,1.037-0.814,1.851-1.852,1.851s-1.852-0.813-1.852-1.851V57.725
+		c0-1.037,0.814-1.852,1.852-1.852s1.852,0.813,1.852,1.852V79.479z"/>
+	<path fill="#eeeaea" d="M184.125,70.378c0-1.036,0.814-1.774,1.852-1.774c1.034,0,1.852,0.813,1.852,1.849v5.847
+		c0,0.444-0.226,1.109-0.595,1.479c-2.367,2.369-5.549,3.773-9.176,3.773c-7.178,0-12.949-5.771-12.949-12.948
+		c0-7.181,5.771-12.949,12.949-12.949c3.627,0,6.809,1.405,9.176,3.771c0.738,0.74,0.738,1.852,0,2.592
+		c-0.741,0.738-1.922,0.813-2.663,0.072c-1.702-1.699-3.923-2.736-6.513-2.736c-5.104,0-9.249,4.144-9.249,9.25
+		c0,5.104,4.146,9.25,9.249,9.25c2.367,0,4.441-0.813,6.067-2.222V70.378z"/>
+	<path fill="#eeeaea" d="M218.162,69.712h-17.019v9.77c0,1.037-0.817,1.851-1.852,1.851c-1.037,0-1.849-0.813-1.849-1.851V57.725
+		c0-1.037,0.812-1.852,1.849-1.852c1.034,0,1.852,0.813,1.852,1.852v8.436h17.019v-8.436c0-1.037,0.813-1.852,1.849-1.852
+		c1.037,0,1.852,0.813,1.852,1.852v21.754c0,1.037-0.813,1.851-1.852,1.851c-1.033,0-1.849-0.813-1.849-1.851V69.712z"/>
+	<path fill="#eeeaea" d="M242.948,81.552c-7.182,0-12.949-5.771-12.949-12.948c0-7.181,5.77-12.949,12.949-12.949
+		c3.627,0,6.809,1.405,9.176,3.771c0.738,0.74,0.738,1.852,0,2.592c-0.741,0.738-1.925,0.813-2.666,0.072
+		c-1.699-1.699-3.92-2.736-6.51-2.736c-5.106,0-9.249,4.144-9.249,9.25c0,5.104,4.143,9.25,9.249,9.25
+		c2.59,0,4.884-0.962,6.586-2.664c0.74-0.741,1.849-0.741,2.59,0c0.738,0.738,0.738,1.85,0,2.589
+		C249.756,80.146,246.574,81.552,242.948,81.552z"/>
+	<path fill="#eeeaea" d="M281.569,69.712h-17.02v9.77c0,1.037-0.813,1.851-1.852,1.851c-1.034,0-1.85-0.813-1.85-1.851V57.725
+		c0-1.037,0.813-1.852,1.85-1.852c1.035,0,1.852,0.813,1.852,1.852v8.436h17.02v-8.436c0-1.037,0.813-1.852,1.853-1.852
+		c1.034,0,1.849,0.813,1.849,1.852v21.754c0,1.037-0.813,1.851-1.849,1.851c-1.037,0-1.853-0.813-1.853-1.851V69.712z"/>
+	<path fill="#eeeaea" d="M308.758,57.503l10.507,20.646c0.223,0.443,0.445,1.036,0.445,1.554c0,1.036-0.668,1.628-1.702,1.628
+		c-0.741,0-1.481-0.222-2.001-1.258l-3.253-6.438h-13.547l-3.183,6.438c-0.517,1.036-1.256,1.258-1.994,1.258
+		c-1.037,0-1.702-0.593-1.702-1.628c0-0.519,0.22-1.109,0.442-1.554l10.506-20.646c0.668-1.405,2.002-1.628,2.74-1.628
+		C306.76,55.875,308.09,56.096,308.758,57.503z M300.985,70.083h9.988l-4.957-9.99L300.985,70.083z"/>
+	<path fill="#eeeaea" d="M340.159,56.023c4.441,0,8.064,3.255,8.064,7.694c0,3.923-2.813,6.884-6.511,7.549l6.731,7.104
+		c0.664,0.666,0.889,1.85,0.146,2.516c-0.736,0.741-2.145,0.521-2.886-0.296l-8.729-9.176h-6.511v8.142
+		c0,1.034-0.815,1.774-1.854,1.774c-1.033,0-1.85-0.813-1.85-1.851V57.873c0-1.035,0.814-1.85,1.85-1.85H340.159z M330.468,59.575
+		v8.288h9.691c2.59,0,4.367-1.776,4.367-4.146c0-2.365-1.777-4.144-4.367-4.144L330.468,59.575L330.468,59.575z"/>
+	<path fill="#eeeaea" d="M365.047,59.575h-9.249c-1.033,0-1.849-0.74-1.849-1.776c0-1.034,0.813-1.773,1.849-1.773h22.201
+		c1.037,0,1.852,0.74,1.852,1.773c0,1.037-0.813,1.776-1.852,1.776h-9.249V79.48c0,1.037-0.813,1.851-1.849,1.851
+		c-1.037,0-1.854-0.813-1.854-1.851V59.575z"/>
+	<path fill="#eeeaea" d="M388.724,66.013c0-9.25,5.698-10.359,9.99-10.359c1.035,0,1.85,0.813,1.85,1.85
+		c0,1.036-0.813,1.851-1.85,1.851c-3.479,0-6.29,0.738-6.29,6.66v5.18c0,9.25-5.698,10.358-9.989,10.358
+		c-1.035,0-1.85-0.813-1.85-1.85s0.814-1.85,1.85-1.85c3.479,0,6.289-0.74,6.289-6.66V66.013z"/>
+</g>
+<polygon fill="#8087E8" points="67.981,30.52 56.757,56.73 42.009,91.171 76.301,76.685 94.465,69.013 "/>
+<polygon fill="#30426B" points="73.7,62.25 76.302,76.685 94.466,69.013 "/>
+<polygon fill="#6699A1" points="67.981,30.52 73.7,62.251 94.465,69.013 "/>
+<polygon fill="#78758C" points="73.7,62.25 94.466,69.013 56.758,56.729 42.009,91.171 76.302,76.685 "/>
+<polygon fill="#A3EDBA" points="42.009,91.171 56.757,56.73 26.442,46.855 "/>
+<polygon fill="#6699A1" points="76.302,76.685 79.628,95.13 94.466,69.013 "/>
+<polygon fill="#8087E8" points="67.981,30.52 56.757,56.73 73.7,62.251 "/>
+</g>
+</svg>

js/lib/highcharts/api/images/splash.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="256" width="1020" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+<metadata>
+<rdf:RDF>
+<cc:Work rdf:about="">
+<dc:format>image/svg+xml</dc:format>
+<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+<dc:title/>
+</cc:Work>
+</rdf:RDF>
+</metadata>
+<g transform="translate(0,-796.36218)">
+<g transform="matrix(1.6460977,0,0,1.6460984,-8.1132563,652.37875)">
+<g style="letter-spacing:0px;word-spacing:0px;" font-weight="normal" font-size="68.34341431px" font-style="normal" font-stretch="normal" line-height="125%" font-variant="normal" font-family="Reenie Beanie" fill="#8085e8">
+<path d="m39.2,174c-0.00003,2.05-0.365,3.66-1.09,4.82-0.729,1.16-1.8,2.24-3.21,3.25-0.364,0.228-0.865,0.502-1.5,0.821-0.638,0.319-1.34,0.615-2.12,0.888-0.775,0.273-1.59,0.501-2.46,0.683-0.866,0.182-1.66,0.273-2.39,0.273-2.05,0-3.6-0.216-4.65-0.649-1.05-0.432-1.57-0.945-1.57-1.54-0.000011-0.638,0.182-1.16,0.546-1.57s0.683-0.638,0.957-0.684l0.753,0.546c0.227,0.228,0.545,0.468,0.955,0.719s1.07,0.376,1.98,0.376c0.865,0.00001,1.91-0.148,3.14-0.444s2.4-0.752,3.52-1.37c1.12-0.615,2.07-1.38,2.87-2.29,0.797-0.911,1.2-1.96,1.2-3.14-0.000027-1.05-0.786-2.01-2.36-2.9-1.57-0.888-4.04-1.49-7.42-1.81-1.73-0.136-3.44-0.352-5.13-0.649-1.69-0.296-3.2-0.706-4.54-1.23s-2.43-1.18-3.25-1.98c-0.82-0.797-1.23-1.79-1.23-2.97-0.000004-1.14,0.319-2.23,0.957-3.28s1.42-2.02,2.36-2.9c0.934-0.888,1.9-1.67,2.9-2.36,1-0.683,1.85-1.25,2.53-1.71,0.546-0.318,1.31-0.74,2.29-1.26,0.98-0.524,2.03-1.03,3.14-1.5,1.12-0.478,2.23-0.888,3.35-1.23,1.12-0.341,2.06-0.512,2.84-0.512,0.912,0.00004,1.53,0.251,1.85,0.752,0.318,0.501,0.478,1.21,0.478,2.12-0.000026,0.775-0.0911,1.59-0.273,2.46-0.182,0.866-0.387,1.71-0.615,2.53s-0.444,1.54-0.649,2.15c-0.204,0.615-0.353,1.01-0.444,1.2-0.182,0.41-0.387,0.683-0.615,0.82-0.228,0.136-0.387,0.204-0.478,0.204-0.182,0.00002-0.273-0.114-0.273-0.342-0.000022-0.136,0.034-0.398,0.102-0.785,0.0681-0.387,0.159-0.854,0.273-1.4,0.114-0.547,0.205-1.14,0.273-1.78,0.0681-0.637,0.102-1.28,0.102-1.91-0.000023-1-0.0456-1.73-0.137-2.19-0.0911-0.455-0.456-0.683-1.09-0.683-0.637,0.00004-1.5,0.171-2.6,0.512-1.09,0.341-2.21,0.763-3.35,1.26-1.23,0.546-2.42,1.25-3.59,2.12-1.16,0.866-2.2,1.75-3.11,2.67-0.911,0.911-1.65,1.79-2.22,2.63-0.569,0.843-0.854,1.51-0.854,2.02-0.000006,0.546,0.376,1.06,1.13,1.54,0.752,0.478,1.71,0.9,2.87,1.26,1.16,0.365,2.45,0.684,3.86,0.957s2.8,0.478,4.17,0.614c1.14,0.136,2.39,0.318,3.76,0.546s2.64,0.593,3.83,1.09c1.18,0.501,2.19,1.17,3.01,2.02,0.82,0.843,1.23,1.93,1.23,3.25z"/>
+<path d="m61.9,177c0.0459,0.0918,0.0688,0.229,0.0688,0.411-0.000022,0.274-0.205,0.684-0.615,1.23-0.136,0.182-0.432,0.478-0.888,0.888s-1.07,0.82-1.85,1.23c-0.774,0.41-1.72,0.774-2.84,1.09-1.12,0.318-2.43,0.478-3.93,0.478-1.05,0-2.07-0.239-3.07-0.717s-1.89-1.18-2.67-2.12c-0.774-0.934-1.41-2.1-1.91-3.49-0.501-1.39-0.752-3.02-0.752-4.89-0.000003-1.78,0.228-3.44,0.683-4.99s1.04-2.92,1.74-4.1c0.706-1.18,1.49-2.12,2.36-2.8,0.866-0.683,1.71-1.03,2.53-1.03,0.729,0.00003,1.47,0.148,2.22,0.444,0.752,0.296,1.44,0.672,2.05,1.13,0.615,0.456,1.1,0.969,1.47,1.54,0.365,0.569,0.547,1.15,0.547,1.74-0.000017,0.683-0.308,1.39-0.923,2.12-0.615,0.729-1.36,1.4-2.22,2.02-0.866,0.615-1.73,1.12-2.6,1.5-0.866,0.387-1.55,0.581-2.05,0.581-0.273,0.00001-0.511-0.125-0.716-0.376s-0.308-0.559-0.308-0.923c-0.000008-0.638,0.285-1.14,0.854-1.5,0.569-0.364,1.2-0.695,1.88-0.991,0.683-0.296,1.31-0.649,1.88-1.06,0.569-0.41,0.854-0.98,0.854-1.71-0.000013-0.0918-0.114-0.32-0.342-0.684s-0.843-0.546-1.85-0.546c-0.455,0.00002-0.978,0.262-1.57,0.786s-1.16,1.23-1.71,2.12c-0.547,0.889-1,1.94-1.37,3.14-0.364,1.21-0.546,2.52-0.546,3.93-0.000006,1.18,0.217,2.26,0.65,3.21,0.433,0.957,0.991,1.77,1.67,2.43,0.683,0.661,1.48,1.17,2.39,1.54,0.911,0.364,1.85,0.546,2.8,0.546,0.683,0,1.42-0.148,2.22-0.444,0.797-0.296,1.55-0.615,2.26-0.957,0.706-0.342,1.32-0.661,1.84-0.957,0.523-0.296,0.854-0.444,0.992-0.444,0.136,0.00001,0.284,0.0685,0.443,0.205,0.159,0.137,0.262,0.274,0.308,0.41z"/>
+<path d="m99.3,170c-0.000036,0.82-0.376,1.83-1.13,3.04-0.752,1.21-1.77,2.38-3.04,3.52-1.28,1.14-2.76,2.11-4.44,2.9-1.69,0.797-3.44,1.2-5.26,1.2-0.82,0.00001-1.69-0.137-2.6-0.41-0.911-0.273-1.8-0.672-2.67-1.2-0.866-0.524-1.64-1.16-2.32-1.91-0.683-0.752-1.19-1.61-1.5-2.56-0.273,0.273-0.602,0.728-0.99,1.37-0.387,0.638-0.809,1.29-1.26,1.95-0.456,0.66-0.957,1.23-1.5,1.71-0.546,0.478-1.12,0.717-1.71,0.717-0.592,0.00001-1.08-0.308-1.47-0.923-0.387-0.615-0.695-1.3-0.923-2.05-0.228-0.752-0.388-1.47-0.479-2.15-0.0911-0.683-0.137-1.07-0.137-1.16-0.000003-0.548,0.16-1.58,0.479-3.11s0.797-3.11,1.43-4.75c0.638-1.64,1.45-3.1,2.43-4.37,0.98-1.28,2.13-1.91,3.45-1.91,0.501,0.00003,0.831,0.216,0.991,0.649,0.16,0.432,0.24,0.854,0.24,1.26v2.05c0.227,0.182,0.465,0.308,0.716,0.376,0.251,0.0688,0.479,0.16,0.684,0.273s0.365,0.284,0.479,0.512,0.171,0.592,0.171,1.09c-0.000015,0.32-0.023,0.605-0.0688,0.855-0.0459,0.25-0.0688,0.489-0.0688,0.717-0.000015,1.18,0.0911,2.35,0.273,3.49s0.547,2.15,1.09,3.04c0.547,0.888,1.3,1.62,2.26,2.19,0.957,0.57,2.23,0.855,3.83,0.855,2.01,0.00001,3.7-0.422,5.09-1.26,1.39-0.843,2.55-1.78,3.49-2.8,0.934-1.02,1.67-1.96,2.22-2.8,0.546-0.843,1-1.26,1.37-1.26,0.592,0.00002,0.888,0.296,0.888,0.888zm-24-3.01c-0.000011-0.182-0.0456-0.353-0.137-0.512-0.0911-0.159-0.137-0.307-0.137-0.443-0.000011-0.182,0.0455-0.342,0.137-0.479,0.0911-0.137,0.137-0.319,0.137-0.547-0.000011-0.136-0.0456-0.238-0.137-0.307-0.0911-0.0681-0.137-0.148-0.137-0.24-0.41,0.0918-0.832,0.479-1.26,1.16-0.433,0.683-0.843,1.48-1.23,2.39-0.387,0.911-0.695,1.83-0.922,2.77-0.227,0.934-0.341,1.7-0.341,2.29-0.000008,0.318,0.0911,0.842,0.273,1.57,0.182,0.729,0.387,1.21,0.615,1.44,0.774-1.59,1.49-3.14,2.15-4.65,0.66-1.5,0.991-2.98,0.991-4.44z"/>
+<path d="m116,163c-0.00001,0.318-0.137,0.58-0.41,0.785s-0.592,0.376-0.957,0.513-0.73,0.24-1.09,0.308c-0.364,0.0682-0.66,0.102-0.888,0.102-0.683,0.00002-1.14-0.0455-1.37-0.137-0.228-0.091-0.41-0.137-0.546-0.137-1.14,0.00002-2.05,0.0911-2.73,0.273-0.683,0.182-1.22,0.478-1.61,0.888-0.387,0.41-0.638,0.923-0.752,1.54-0.114,0.615-0.171,1.36-0.171,2.22-0.00001,1.46,0.057,2.62,0.171,3.49,0.114,0.866,0.228,1.57,0.341,2.12,0.113,0.546,0.227,0.968,0.341,1.26,0.114,0.296,0.171,0.581,0.171,0.855-0.00001,0.364-0.194,0.752-0.581,1.16-0.387,0.41-0.74,0.615-1.06,0.615-0.546,0-1.04-0.49-1.47-1.47-0.433-0.98-0.798-2.14-1.09-3.49-0.296-1.34-0.535-2.68-0.717-4s-0.273-2.32-0.273-3.01c0-0.776,0.0681-1.52,0.204-2.22,0.136-0.706,0.318-1.32,0.546-1.84,0.228-0.524,0.479-0.946,0.752-1.26,0.273-0.319,0.547-0.479,0.821-0.479,0.228,0.00003,0.41,0.08,0.546,0.24s0.25,0.342,0.341,0.547c0.0911,0.205,0.194,0.387,0.308,0.546s0.262,0.239,0.444,0.239c0.41,0.00003,1.07-0.205,1.98-0.615,0.911-0.41,2.03-0.615,3.35-0.615,1.23,0.00002,2.15,0.0341,2.77,0.102,0.615,0.0682,1.22,0.216,1.81,0.444,0.136,0.0459,0.307,0.148,0.512,0.308,0.205,0.159,0.308,0.399,0.308,0.719z"/>
+<path d="m141,172c-0.00002,0.456-0.0685,0.923-0.205,1.4-0.137,0.478-0.274,0.877-0.41,1.2-0.0918,0.138-0.513,0.605-1.26,1.4-0.752,0.797-1.69,1.63-2.8,2.49-1.12,0.866-2.37,1.65-3.76,2.36-1.39,0.706-2.72,1.06-4,1.06-0.774,0-1.56-0.137-2.36-0.411-0.797-0.274-1.54-0.718-2.22-1.33-0.683-0.615-1.24-1.38-1.67-2.29-0.432-0.911-0.649-2.03-0.649-3.35,0-2.19,0.364-4.17,1.09-5.95,0.729-1.78,1.46-3.19,2.19-4.24,0.32-0.501,0.741-1.01,1.26-1.54,0.524-0.524,1.04-1,1.54-1.43,0.501-0.432,0.968-0.786,1.4-1.06,0.433-0.274,0.741-0.411,0.923-0.411,0.41,0.00002,0.786,0.114,1.13,0.342,0.341,0.228,0.512,0.456,0.512,0.684-0.00001,0.364-0.102,0.672-0.307,0.922-0.204,0.25-0.489,0.524-0.854,0.82s-0.798,0.684-1.3,1.16c-0.501,0.479-1.03,1.11-1.57,1.88-1.09,1.5-1.9,3.04-2.43,4.61-0.524,1.57-0.786,2.95-0.786,4.13s0.444,2.13,1.33,2.84c0.888,0.706,1.81,1.06,2.77,1.06,1.73,0,3.27-0.387,4.61-1.16,1.34-0.774,2.5-1.64,3.45-2.6,0.957-0.957,1.73-1.82,2.32-2.6,0.592-0.774,1.02-1.16,1.3-1.16,0.502,0.00001,0.753,0.387,0.753,1.16z"/>
+<path d="m169,171c0.228,0.228,0.342,0.365,0.342,0.411-0.00003,0.0904-0.125,0.363-0.375,0.819-0.25,0.455-0.581,0.934-0.991,1.43-0.41,0.501-0.854,0.946-1.33,1.33-0.478,0.387-0.946,0.581-1.4,0.581-0.957,0.00001-1.73-0.194-2.32-0.581-0.592-0.387-1.08-0.877-1.47-1.47-0.387-0.592-0.683-1.24-0.888-1.95-0.205-0.706-0.376-1.38-0.512-2.02-0.0918-0.32-0.183-0.48-0.273-0.48-0.138,0.00002-0.411,0.49-0.821,1.47s-0.853,2.05-1.33,3.21c-0.478,1.16-0.934,2.23-1.37,3.21-0.433,0.98-0.718,1.47-0.854,1.47-0.82,0.00001-1.52-0.353-2.08-1.06-0.569-0.706-1.03-1.53-1.37-2.46-0.342-0.934-0.604-1.89-0.786-2.87s-0.296-1.74-0.342-2.29c-0.136-1.23-0.432-3.28-0.887-6.15s-0.843-6.36-1.16-10.5c-0.0904-0.865-0.193-1.65-0.307-2.36-0.114-0.706-0.24-1.49-0.376-2.36-0.137-0.866-0.251-1.85-0.342-2.94-0.0911-1.09-0.137-2.44-0.137-4.03,0-0.0903,0.0229-0.386,0.0688-0.887s0.114-1.05,0.205-1.64c0.0911-0.592,0.239-1.12,0.444-1.57,0.205-0.456,0.444-0.684,0.716-0.684,0.32,0.00005,0.616,0.194,0.89,0.581,0.273,0.387,0.512,0.832,0.717,1.33,0.205,0.501,0.353,0.98,0.444,1.44,0.0911,0.456,0.137,0.775,0.137,0.957-0.00001,0.683-0.0455,1.32-0.137,1.91-0.0911,0.592-0.137,1.14-0.137,1.64,0,0.683,0.057,1.55,0.171,2.6s0.262,2.12,0.444,3.21,0.341,2.15,0.478,3.18c0.136,1.03,0.25,1.86,0.342,2.5-0.00001,0.0445,0.0455,0.363,0.137,0.955,0.0911,0.592,0.194,1.33,0.308,2.22,0.114,0.889,0.228,1.85,0.342,2.87,0.114,1.03,0.239,2.03,0.375,3.01s0.261,1.85,0.375,2.6c0.114,0.752,0.194,1.29,0.24,1.61-0.00001,0.136,0.0341,0.33,0.102,0.58,0.0681,0.25,0.136,0.535,0.204,0.854,0.0681,0.319,0.148,0.615,0.24,0.888,0.0918,0.273,0.206,0.479,0.342,0.616,0.273-0.546,0.625-1.39,1.06-2.53,0.433-1.14,0.889-2.3,1.37-3.49,0.478-1.18,0.934-2.22,1.37-3.11,0.433-0.888,0.809-1.33,1.13-1.33,0.364,0.00002,0.66,0.0685,0.888,0.205,0.228,0.137,0.524,0.251,0.888,0.341,0.456,0.182,0.684,0.421,0.684,0.717-0.00002,0.296,0.0452,0.649,0.136,1.06,0.0918,0.548,0.24,1.27,0.445,2.15,0.205,0.889,0.444,1.75,0.717,2.6,0.273,0.843,0.592,1.56,0.956,2.15,0.364,0.592,0.729,0.889,1.09,0.888,0.182,0.00001,0.433-0.239,0.752-0.717s0.752-0.74,1.3-0.786c0.0917,0.00001,0.252,0.057,0.48,0.171s0.455,0.262,0.682,0.444z"/>
+<path d="m224,135c0.0459,0.0918,0.0688,0.252,0.0688,0.48-0.00003,0.228-0.00003,0.478,0,0.751-0.00003,0.32-0.114,0.48-0.342,0.48-0.0918,0.00005-0.206-0.0229-0.342-0.0688-0.136-0.0458-0.25-0.0917-0.342-0.138-0.82-0.364-1.81-0.831-2.97-1.4s-2.47-0.854-3.93-0.854c-1.64,0.00005-2.96,0.615-3.96,1.84-1,1.23-1.77,2.65-2.29,4.27-0.524,1.62-0.866,3.2-1.03,4.75-0.159,1.55-0.239,2.67-0.239,3.35-0.00001,0.501,0.0796,1.29,0.239,2.36s0.376,2.18,0.65,3.32,0.593,2.18,0.957,3.11c0.364,0.934,0.729,1.51,1.09,1.74,0.274,0.00002,0.764-0.0229,1.47-0.0688s1.29-0.0688,1.74-0.0688c0.774,0.00003,1.5,0.0685,2.19,0.205,0.683,0.137,1.39,0.205,2.12,0.205,0.182,0.00003,0.455,0.00003,0.82,0,0.364,0.00003,0.74,0.023,1.13,0.0688,0.387,0.0459,0.717,0.126,0.991,0.239,0.273,0.113,0.41,0.261,0.41,0.443-0.00002,0.228-0.16,0.433-0.479,0.615s-0.683,0.33-1.09,0.444c-0.41,0.114-0.819,0.194-1.23,0.24-0.41,0.0459-0.729,0.0688-0.957,0.0688-0.228,0.00002-0.524-0.0114-0.888-0.0344-0.364-0.0229-0.763-0.0573-1.2-0.103-0.433-0.0459-0.843-0.0799-1.23-0.102-0.387-0.0222-0.717-0.0333-0.99-0.0334-0.73,0.00002-1.17,0.0796-1.33,0.239-0.159,0.159-0.239,0.467-0.239,0.923-0.00001,0.683,0.308,1.6,0.923,2.77,0.615,1.16,1.29,2.4,2.02,3.73,0.729,1.32,1.4,2.69,2.02,4.1,0.615,1.41,0.923,2.71,0.923,3.9-0.00002,0.227-0.057,0.648-0.171,1.26-0.114,0.615-0.274,1.24-0.479,1.88-0.205,0.638-0.49,1.21-0.854,1.71-0.364,0.501-0.774,0.752-1.23,0.752-0.364,0.00001-0.695-0.103-0.991-0.308s-0.444-0.559-0.444-1.06c-0.00001-0.729,0.194-1.41,0.581-2.05,0.387-0.638,0.581-1.32,0.581-2.05-0.00001-0.364-0.171-0.979-0.512-1.84-0.341-0.866-0.763-1.83-1.26-2.9-0.501-1.07-1.05-2.2-1.64-3.38-0.592-1.18-1.15-2.27-1.67-3.25-0.524-0.98-0.968-1.79-1.33-2.43-0.364-0.638-0.569-0.98-0.615-1.03-0.911,0.32-1.84,0.639-2.8,0.958-0.957,0.319-1.82,0.797-2.6,1.43-0.318,0.32-0.615,0.48-0.888,0.48-0.455,0.00002-0.876-0.182-1.26-0.547-0.387-0.365-0.581-0.775-0.581-1.23,0-0.502,0.148-0.901,0.444-1.2,0.296-0.296,0.581-0.512,0.853-0.649,0.41-0.228,1.05-0.479,1.91-0.752,0.866-0.273,1.73-0.501,2.6-0.683,0.318-0.0917,0.615-0.172,0.888-0.24,0.274-0.0681,0.411-0.216,0.411-0.444-0.138-0.455-0.332-1.06-0.582-1.81-0.25-0.752-0.501-1.65-0.752-2.7s-0.468-2.22-0.65-3.52-0.273-2.7-0.273-4.2c-0.00001-1.64,0.194-3.37,0.581-5.19s1-3.5,1.85-5.02c0.843-1.53,1.9-2.78,3.18-3.76s2.8-1.47,4.58-1.47c0.819,0.00005,1.73,0.08,2.73,0.24s1.93,0.388,2.77,0.684c0.843,0.296,1.55,0.661,2.12,1.09,0.569,0.432,0.854,0.922,0.854,1.47z"/>
+<path d="m240,169c-0.00002,1-0.137,1.96-0.41,2.87-0.273,0.911-0.638,1.71-1.09,2.39-0.455,0.683-0.991,1.22-1.61,1.61-0.615,0.387-1.29,0.581-2.02,0.581-1.28,0-2.28-0.365-3.01-1.09-0.729-0.729-1.29-1.57-1.67-2.53-0.388-0.957-0.639-1.92-0.752-2.9s-0.17-1.72-0.17-2.22c0-0.82,0.125-1.74,0.375-2.77s0.592-1.97,1.03-2.84c0.433-0.866,0.923-1.59,1.47-2.19,0.546-0.592,1.12-0.888,1.71-0.888,0.136,0.00003,0.352,0.0456,0.649,0.137,0.296,0.0911,0.604,0.228,0.923,0.41s0.604,0.41,0.855,0.683,0.422,0.593,0.512,0.958c0.502,0.0445,1,0.226,1.5,0.545,0.501,0.319,0.774,0.57,0.82,0.752,0.364,1.18,0.603,2.37,0.717,3.55s0.171,2.16,0.171,2.94zm-3.07-1.23c-0.00001-0.683-0.0685-1.4-0.205-2.15-0.137-0.752-0.411-1.52-0.821-2.29-0.0904,0.0459-0.204,0.0688-0.342,0.0688-0.182,0.00002-0.33-0.0226-0.444-0.0678s-0.216-0.0678-0.307-0.0678c-0.546,0.00002-0.979,0.148-1.3,0.444-0.319,0.296-0.559,0.683-0.719,1.16-0.16,0.478-0.262,0.991-0.308,1.54-0.0452,0.546-0.0678,1.07-0.0678,1.57,0,0.501,0.0226,1.06,0.0678,1.67,0.0452,0.615,0.148,1.2,0.308,1.74,0.16,0.546,0.376,1.01,0.65,1.4,0.273,0.387,0.638,0.581,1.09,0.581,0.455,0.00001,0.842-0.239,1.16-0.717,0.319-0.478,0.57-1.04,0.752-1.67,0.182-0.638,0.308-1.26,0.376-1.88,0.0688-0.615,0.103-1.06,0.103-1.33z"/>
+<path d="m263,163c-0.00002,0.318-0.137,0.58-0.41,0.785s-0.592,0.376-0.957,0.513-0.73,0.24-1.09,0.308c-0.364,0.0682-0.66,0.102-0.888,0.102-0.683,0.00002-1.14-0.0455-1.37-0.137-0.228-0.091-0.41-0.137-0.546-0.137-1.14,0.00002-2.05,0.0911-2.73,0.273-0.683,0.182-1.22,0.478-1.61,0.888-0.387,0.41-0.638,0.923-0.752,1.54-0.114,0.615-0.171,1.36-0.171,2.22,0,1.46,0.057,2.62,0.171,3.49,0.114,0.866,0.228,1.57,0.341,2.12,0.113,0.546,0.227,0.968,0.341,1.26,0.114,0.296,0.171,0.581,0.171,0.855-0.00001,0.364-0.194,0.752-0.581,1.16-0.387,0.41-0.74,0.615-1.06,0.615-0.546,0-1.04-0.49-1.47-1.47-0.433-0.98-0.798-2.14-1.09-3.49-0.296-1.34-0.535-2.68-0.717-4s-0.273-2.32-0.273-3.01c-0.00001-0.776,0.0681-1.52,0.204-2.22,0.136-0.706,0.318-1.32,0.546-1.84,0.228-0.524,0.479-0.946,0.752-1.26,0.273-0.319,0.547-0.479,0.821-0.479,0.228,0.00003,0.41,0.08,0.546,0.24s0.25,0.342,0.341,0.547c0.0911,0.205,0.194,0.387,0.308,0.546s0.262,0.239,0.444,0.239c0.41,0.00003,1.07-0.205,1.98-0.615,0.911-0.41,2.03-0.615,3.35-0.615,1.23,0.00002,2.15,0.0341,2.77,0.102,0.615,0.0682,1.22,0.216,1.81,0.444,0.136,0.0459,0.307,0.148,0.512,0.308,0.205,0.159,0.308,0.399,0.308,0.719z"/>
+<path d="m309,169c-0.00001,1-0.137,1.96-0.41,2.87-0.273,0.911-0.638,1.71-1.09,2.39-0.455,0.683-0.991,1.22-1.61,1.61-0.615,0.387-1.29,0.581-2.02,0.581-1.28,0-2.28-0.365-3.01-1.09-0.729-0.729-1.29-1.57-1.67-2.53-0.388-0.957-0.639-1.92-0.752-2.9s-0.17-1.72-0.17-2.22c-0.00001-0.82,0.125-1.74,0.375-2.77s0.592-1.97,1.03-2.84c0.433-0.866,0.923-1.59,1.47-2.19,0.546-0.592,1.12-0.888,1.71-0.888,0.136,0.00003,0.352,0.0456,0.649,0.137,0.296,0.0911,0.604,0.228,0.923,0.41s0.604,0.41,0.855,0.683,0.422,0.593,0.512,0.958c0.502,0.0445,1,0.226,1.5,0.545,0.501,0.319,0.774,0.57,0.82,0.752,0.364,1.18,0.603,2.37,0.717,3.55s0.171,2.16,0.171,2.94zm-3.07-1.23c-0.00001-0.683-0.0685-1.4-0.205-2.15-0.137-0.752-0.411-1.52-0.821-2.29-0.0904,0.0459-0.204,0.0688-0.342,0.0688-0.182,0.00002-0.33-0.0226-0.444-0.0678s-0.216-0.0678-0.307-0.0678c-0.546,0.00002-0.979,0.148-1.3,0.444-0.319,0.296-0.559,0.683-0.719,1.16-0.16,0.478-0.262,0.991-0.308,1.54-0.0452,0.546-0.0678,1.07-0.0678,1.57-0.00001,0.501,0.0226,1.06,0.0678,1.67,0.0452,0.615,0.148,1.2,0.308,1.74,0.16,0.546,0.376,1.01,0.65,1.4,0.273,0.387,0.638,0.581,1.09,0.581,0.455,0.00001,0.842-0.239,1.16-0.717,0.319-0.478,0.57-1.04,0.752-1.67,0.182-0.638,0.308-1.26,0.376-1.88,0.0688-0.615,0.103-1.06,0.103-1.33z"/>
+<path d="m338,164c-0.00002,1.18-0.33,2.32-0.991,3.42-0.66,1.09-1.47,2.11-2.43,3.04-0.957,0.934-2,1.8-3.14,2.6-1.14,0.797-2.19,1.49-3.14,2.08-0.911,0.638-1.66,1.16-2.25,1.57-0.592,0.41-0.889,0.729-0.888,0.957-0.00001,0.592,0.0681,1.42,0.204,2.49s0.307,2.23,0.512,3.49c0.205,1.25,0.41,2.54,0.615,3.86s0.354,2.53,0.445,3.62c-0.00002,0.0459,0.034,0.251,0.102,0.615,0.0681,0.364,0.159,0.774,0.273,1.23,0.114,0.455,0.205,0.877,0.273,1.26,0.0681,0.387,0.102,0.627,0.102,0.719-0.00001,0.318-0.0111,0.671-0.0334,1.06-0.0223,0.387-0.0904,0.752-0.204,1.09-0.114,0.342-0.285,0.627-0.513,0.855s-0.524,0.342-0.888,0.342c-0.502-0.00001-0.867-0.217-1.09-0.65-0.227-0.433-0.341-0.855-0.341-1.26-0.00001-0.0904,0.0111-0.181,0.0334-0.273,0.0222-0.0918,0.0333-0.206,0.0334-0.342-0.00002-0.501-0.182-1.84-0.546-4.03s-0.774-4.8-1.23-7.83c-0.455-3.03-0.865-6.29-1.23-9.77-0.364-3.49-0.546-6.78-0.546-9.88-0.00001-0.228,0.0226-0.49,0.0678-0.786s0.0678-0.558,0.0678-0.786c-0.456,0.0459-1.13,0.251-2.02,0.616-0.888,0.365-1.77,0.809-2.63,1.33-0.866,0.524-1.63,1.07-2.29,1.64-0.66,0.569-0.991,1.08-0.991,1.54h-0.478c-0.138,0.00002-0.309-0.0911-0.514-0.273s-0.387-0.387-0.546-0.615-0.307-0.456-0.444-0.683-0.205-0.387-0.205-0.479c0.00001-0.957,0.57-1.86,1.71-2.7,1.14-0.843,2.56-1.6,4.27-2.26s3.59-1.18,5.64-1.57c2.05-0.387,3.99-0.581,5.81-0.581,1.78,0.00003,3.27,0.205,4.48,0.615s2.18,0.9,2.9,1.47c0.729,0.569,1.25,1.15,1.57,1.74,0.319,0.592,0.479,1.09,0.479,1.5zm-3.35-0.204c-0.00002-0.456-0.57-0.923-1.71-1.4-1.14-0.478-2.48-0.717-4.03-0.717-1.37,0.00002-2.37,0.0456-3.01,0.137-0.638,0.0911-1.07,0.183-1.3,0.274-0.0918,0.729-0.16,1.59-0.205,2.6-0.0452,1-0.0678,2.03-0.0678,3.07-0.00001,1.09,0.0341,2.15,0.102,3.18,0.0681,1.02,0.147,1.88,0.238,2.56,0.638-0.41,1.52-0.968,2.63-1.67,1.12-0.706,2.22-1.5,3.32-2.39,1.09-0.888,2.04-1.82,2.84-2.8,0.797-0.98,1.2-1.92,1.2-2.84z"/>
+<path d="m360,153c-0.592,0.683-1.44,1.35-2.53,2.02-1.09,0.661-2.19,1.26-3.28,1.81-1.09,0.546-2.05,1.01-2.87,1.4-0.82,0.387-1.23,0.649-1.23,0.785-0.00001,0.138,0.0911,0.548,0.273,1.23,0.182,0.683,0.398,1.49,0.649,2.43,0.25,0.934,0.512,1.9,0.786,2.9s0.502,1.89,0.684,2.67c0.0904,0.456,0.204,1.05,0.341,1.78,0.137,0.729,0.262,1.46,0.376,2.19,0.114,0.729,0.217,1.38,0.308,1.95,0.0911,0.569,0.137,0.877,0.137,0.923-0.00001,0.683-0.114,1.39-0.342,2.12-0.228,0.729-0.592,1.09-1.09,1.09-0.274,0-0.525-0.114-0.753-0.342s-0.433-0.49-0.615-0.786-0.319-0.581-0.41-0.854c-0.0911-0.273-0.137-0.478-0.137-0.614-0.00001-0.0918,0.0115-0.229,0.0344-0.411s0.0344-0.387,0.0344-0.615c-0.00002-0.865-0.137-2.12-0.411-3.76-0.0904-0.501-0.272-1.28-0.545-2.32-0.273-1.05-0.547-2.12-0.821-3.21-0.318-1.28-0.683-2.67-1.09-4.17-0.182-0.638-0.296-0.957-0.342-0.957-0.32,0.00002-0.855,0.194-1.61,0.581-0.752,0.387-1.61,0.866-2.56,1.44-0.957,0.57-1.96,1.19-3.01,1.85s-2.03,1.28-2.94,1.84c-0.911,0.569-1.7,1.05-2.36,1.43-0.66,0.387-1.06,0.581-1.2,0.581-0.592,0.00002-1.07-0.205-1.43-0.615-0.364-0.41-0.546-0.866-0.546-1.37,0-0.274,0.376-0.673,1.13-1.2,0.752-0.523,1.69-1.1,2.8-1.74,1.12-0.638,2.32-1.3,3.62-1.98,1.3-0.683,2.51-1.3,3.62-1.84,1.12-0.546,2.05-1,2.8-1.37,0.752-0.365,1.13-0.547,1.13-0.547-0.41-2.1-0.752-3.96-1.03-5.6-0.228-1.41-0.445-2.71-0.65-3.9-0.205-1.18-0.308-1.82-0.308-1.91,0-0.592,0.125-1.04,0.376-1.33,0.251-0.296,0.536-0.444,0.854-0.444,0.502,0.00004,0.821,0.342,0.957,1.03,0.501,2.46,0.967,4.65,1.4,6.56s0.855,3.46,1.26,4.65c0.41-0.0904,1.12-0.352,2.12-0.785s2.05-0.9,3.14-1.4c1.09-0.501,2.08-0.945,2.97-1.33,0.888-0.387,1.4-0.581,1.54-0.581,0.273,0.00003,0.443,0.0914,0.512,0.274,0.0688,0.183,0.148,0.342,0.239,0.479z"/>
+<path d="m368,153c-0.00001,0.0904-0.16,0.272-0.479,0.545s-0.695,0.558-1.13,0.854c-0.432,0.296-0.877,0.558-1.33,0.786-0.456,0.228-0.82,0.342-1.09,0.342-0.182,0.00003-0.421-0.0114-0.717-0.0344-0.296-0.0229-0.592-0.103-0.888-0.239s-0.558-0.33-0.786-0.581-0.342-0.582-0.342-0.992c0-0.637,0.228-1.24,0.683-1.81s1.05-0.855,1.78-0.855c0.136,0.00004,0.444,0.057,0.922,0.171s0.968,0.262,1.47,0.444c0.501,0.182,0.946,0.387,1.33,0.615,0.387,0.228,0.581,0.479,0.581,0.753zm2.25,25.6c-0.00001,0.318-0.239,0.592-0.717,0.82s-0.832,0.342-1.06,0.342c-0.455,0.00001-0.865-0.296-1.23-0.888s-0.684-1.28-0.957-2.05c-0.273-0.774-0.501-1.51-0.683-2.22-0.182-0.706-0.318-1.2-0.409-1.47-0.138-0.456-0.32-1-0.547-1.64-0.227-0.638-0.444-1.25-0.649-1.85-0.205-0.592-0.376-1.12-0.513-1.57-0.137-0.455-0.205-0.706-0.205-0.752-0.00001-0.638,0.125-1.23,0.375-1.78,0.25-0.546,0.558-0.82,0.924-0.82,0.41,0.00002,0.843,0.319,1.3,0.957,0.455,0.638,0.899,1.45,1.33,2.43,0.432,0.98,0.831,2.05,1.2,3.21,0.365,1.16,0.684,2.25,0.957,3.28,0.273,1.02,0.489,1.91,0.649,2.67,0.159,0.752,0.239,1.2,0.239,1.33z"/>
+<path d="m386,169c-0.00001,1-0.137,1.96-0.41,2.87-0.273,0.911-0.638,1.71-1.09,2.39-0.455,0.683-0.991,1.22-1.61,1.61-0.615,0.387-1.29,0.581-2.02,0.581-1.28,0-2.28-0.365-3.01-1.09-0.729-0.729-1.29-1.57-1.67-2.53-0.388-0.957-0.639-1.92-0.752-2.9s-0.17-1.72-0.17-2.22c-0.00001-0.82,0.125-1.74,0.375-2.77s0.592-1.97,1.03-2.84c0.433-0.866,0.923-1.59,1.47-2.19,0.546-0.592,1.12-0.888,1.71-0.888,0.136,0.00003,0.352,0.0456,0.649,0.137,0.296,0.0911,0.604,0.228,0.923,0.41s0.604,0.41,0.855,0.683,0.422,0.593,0.512,0.958c0.502,0.0445,1,0.226,1.5,0.545,0.501,0.319,0.774,0.57,0.82,0.752,0.364,1.18,0.603,2.37,0.717,3.55s0.171,2.16,0.171,2.94zm-3.07-1.23c-0.00001-0.683-0.0685-1.4-0.205-2.15-0.137-0.752-0.411-1.52-0.821-2.29-0.0904,0.0459-0.204,0.0688-0.342,0.0688-0.182,0.00002-0.33-0.0226-0.444-0.0678s-0.216-0.0678-0.307-0.0678c-0.546,0.00002-0.979,0.148-1.3,0.444-0.319,0.296-0.559,0.683-0.719,1.16-0.16,0.478-0.262,0.991-0.308,1.54-0.0452,0.546-0.0678,1.07-0.0678,1.57-0.00001,0.501,0.0226,1.06,0.0678,1.67,0.0452,0.615,0.148,1.2,0.308,1.74,0.16,0.546,0.376,1.01,0.65,1.4,0.273,0.387,0.638,0.581,1.09,0.581,0.455,0.00001,0.842-0.239,1.16-0.717,0.319-0.478,0.57-1.04,0.752-1.67,0.182-0.638,0.308-1.26,0.376-1.88,0.0688-0.615,0.103-1.06,0.103-1.33z"/>
+<path d="m414,176c-0.00003,0.273-0.0911,0.545-0.273,0.819-0.182,0.273-0.398,0.524-0.649,0.752-0.25,0.228-0.524,0.422-0.82,0.581s-0.558,0.239-0.786,0.239c-0.774,0-1.77-0.171-2.97-0.512-1.21-0.341-2.18-0.876-2.9-1.6-0.774-0.774-1.46-1.7-2.05-2.77-0.592-1.07-1.25-2.65-1.98-4.75-0.501,2.01-1.08,3.99-1.74,5.95s-1.72,3.76-3.18,5.4c-0.0904,0.0904-0.227,0.136-0.411,0.136-0.318,0-0.66-0.16-1.02-0.479-0.364-0.319-0.546-0.638-0.546-0.956-0.00001-0.318-0.0344-1.06-0.103-2.22-0.0688-1.16-0.149-2.46-0.24-3.9-0.0911-1.43-0.171-2.89-0.239-4.37-0.0681-1.48-0.102-2.7-0.102-3.66-0.00001-0.456,0.0229-1.06,0.0688-1.81,0.0459-0.752,0.182-1.4,0.409-1.95,0.0459-0.0917,0.217-0.274,0.513-0.547s0.626-0.41,0.991-0.41c0.32,0.00002,0.502,0.205,0.547,0.615,0.0452,0.41,0.0678,0.866,0.0678,1.37v10.8c0,0.228,0.0344,0.547,0.103,0.956,0.0688,0.41,0.171,0.705,0.308,0.887,0.501-1.09,0.967-2.38,1.4-3.86s0.855-2.89,1.26-4.24c0.41-1.34,0.82-2.48,1.23-3.42,0.41-0.934,0.82-1.4,1.23-1.4,0.456,0.00003,0.821,0.0911,1.09,0.273,0.273,0.182,0.501,0.547,0.683,1.09,0.228,1.32,0.411,2.49,0.547,3.52,0.137,1.02,0.308,1.95,0.513,2.77s0.501,1.58,0.888,2.29c0.387,0.706,0.922,1.36,1.6,1.95,0.638,0.592,1.36,1.03,2.15,1.3,0.797,0.273,1.49,0.41,2.08,0.41,0.274,0.00001,0.57-0.057,0.888-0.171s0.546-0.171,0.684-0.171c0.182,0.00001,0.353,0.16,0.512,0.479s0.239,0.525,0.239,0.616z"/>
+<path d="m433,175c-0.00002,0.774-0.262,1.45-0.786,2.02-0.524,0.569-1.19,1.05-1.98,1.43-0.797,0.387-1.67,0.695-2.63,0.923-0.957,0.228-1.87,0.399-2.73,0.512-0.866,0.113-1.63,0.181-2.29,0.204-0.661,0.023-1.08,0.0344-1.26,0.0344-1,0.00001-1.78-0.16-2.32-0.479-0.546-0.319-0.82-0.888-0.82-1.71,0-0.274,0.0226-0.513,0.0678-0.719,0.0452-0.205,0.228-0.308,0.547-0.308,0.136,0.00001,0.364,0.0341,0.683,0.102,0.319,0.0681,0.57,0.102,0.752,0.102,0.182,0.00001,0.763-0.0341,1.74-0.102,0.98-0.0681,2.03-0.193,3.14-0.375,1.12-0.182,2.12-0.444,3.01-0.786,0.888-0.342,1.33-0.786,1.33-1.33-0.00001-0.0904-0.467-0.375-1.4-0.853-0.934-0.478-2.34-1.29-4.2-2.43-1.46-0.911-2.48-1.83-3.08-2.77-0.592-0.934-0.888-2.2-0.888-3.79,0-1,0.217-1.82,0.65-2.46,0.433-0.638,1.03-1.14,1.78-1.5,0.752-0.364,1.62-0.626,2.6-0.785s2.02-0.239,3.11-0.239c0.0918,0.00003,0.377,0.0456,0.855,0.137,0.478,0.0911,0.991,0.239,1.54,0.444,0.547,0.205,1.04,0.456,1.47,0.752,0.432,0.296,0.649,0.626,0.649,0.991-0.00002,0.0904-0.0796,0.227-0.239,0.409s-0.421,0.524-0.785,1.03c-0.138-0.0459-0.377-0.114-0.719-0.205-0.341-0.091-0.729-0.194-1.16-0.308-0.433-0.114-0.877-0.205-1.33-0.273-0.455-0.0681-0.82-0.102-1.09-0.102-1.18,0.00002-2.14,0.216-2.87,0.649-0.729,0.432-1.09,1.26-1.09,2.49-0.00001,0.592,0.239,1.14,0.717,1.64,0.478,0.501,1.08,0.968,1.81,1.4,0.729,0.433,1.51,0.866,2.36,1.3,0.843,0.432,1.63,0.899,2.36,1.4,0.729,0.501,1.33,1.04,1.81,1.61,0.479,0.569,0.718,1.22,0.719,1.95z"/>
+<path d="m489,171c0.228,0.228,0.342,0.365,0.342,0.411-0.00002,0.0904-0.125,0.363-0.375,0.819-0.25,0.455-0.581,0.934-0.991,1.43-0.41,0.501-0.854,0.946-1.33,1.33-0.478,0.387-0.946,0.581-1.4,0.581-0.957,0.00001-1.73-0.194-2.32-0.581-0.592-0.387-1.08-0.877-1.47-1.47-0.387-0.592-0.683-1.24-0.888-1.95-0.205-0.706-0.376-1.38-0.512-2.02-0.0918-0.32-0.183-0.48-0.273-0.48-0.138,0.00002-0.411,0.49-0.821,1.47s-0.853,2.05-1.33,3.21c-0.478,1.16-0.934,2.23-1.37,3.21-0.433,0.98-0.718,1.47-0.854,1.47-0.82,0.00001-1.52-0.353-2.08-1.06-0.569-0.706-1.03-1.53-1.37-2.46-0.342-0.934-0.604-1.89-0.786-2.87s-0.296-1.74-0.342-2.29c-0.136-1.23-0.432-3.28-0.887-6.15s-0.843-6.36-1.16-10.5c-0.0904-0.865-0.193-1.65-0.307-2.36-0.114-0.706-0.24-1.49-0.376-2.36-0.137-0.866-0.251-1.85-0.342-2.94-0.0911-1.09-0.137-2.44-0.137-4.03,0-0.0903,0.0229-0.386,0.0688-0.887s0.114-1.05,0.205-1.64c0.0911-0.592,0.239-1.12,0.444-1.57,0.205-0.456,0.444-0.684,0.716-0.684,0.32,0.00005,0.616,0.194,0.89,0.581,0.273,0.387,0.512,0.832,0.717,1.33,0.205,0.501,0.353,0.98,0.444,1.44,0.0911,0.456,0.137,0.775,0.137,0.957-0.00001,0.683-0.0455,1.32-0.137,1.91-0.0911,0.592-0.137,1.14-0.137,1.64-0.00001,0.683,0.057,1.55,0.171,2.6s0.262,2.12,0.444,3.21,0.341,2.15,0.478,3.18c0.136,1.03,0.25,1.86,0.342,2.5-0.00001,0.0445,0.0455,0.363,0.137,0.955,0.0911,0.592,0.194,1.33,0.308,2.22,0.114,0.889,0.228,1.85,0.342,2.87,0.114,1.03,0.239,2.03,0.375,3.01s0.261,1.85,0.375,2.6c0.114,0.752,0.194,1.29,0.24,1.61-0.00001,0.136,0.034,0.33,0.102,0.58,0.0681,0.25,0.136,0.535,0.204,0.854,0.0681,0.319,0.148,0.615,0.24,0.888,0.0917,0.273,0.206,0.479,0.342,0.616,0.273-0.546,0.625-1.39,1.06-2.53,0.433-1.14,0.889-2.3,1.37-3.49,0.478-1.18,0.934-2.22,1.37-3.11,0.433-0.888,0.809-1.33,1.13-1.33,0.364,0.00002,0.66,0.0685,0.888,0.205,0.228,0.137,0.524,0.251,0.888,0.341,0.456,0.182,0.684,0.421,0.684,0.717-0.00002,0.296,0.0452,0.649,0.136,1.06,0.0918,0.548,0.24,1.27,0.445,2.15,0.205,0.889,0.444,1.75,0.717,2.6,0.273,0.843,0.592,1.56,0.956,2.15,0.364,0.592,0.729,0.889,1.09,0.888,0.182,0.00001,0.433-0.239,0.752-0.717s0.752-0.74,1.3-0.786c0.0918,0.00001,0.252,0.057,0.48,0.171s0.455,0.262,0.682,0.444z"/>
+<path d="m512,177c0.0459,0.0918,0.0688,0.229,0.0688,0.411-0.00002,0.274-0.205,0.684-0.615,1.23-0.136,0.182-0.432,0.478-0.888,0.888s-1.07,0.82-1.85,1.23c-0.774,0.41-1.72,0.774-2.84,1.09-1.12,0.318-2.43,0.478-3.93,0.478-1.05,0-2.07-0.239-3.07-0.717s-1.89-1.18-2.67-2.12c-0.774-0.934-1.41-2.1-1.91-3.49-0.501-1.39-0.752-3.02-0.752-4.89,0-1.78,0.228-3.44,0.683-4.99s1.04-2.92,1.74-4.1c0.706-1.18,1.49-2.12,2.36-2.8,0.866-0.683,1.71-1.03,2.53-1.03,0.729,0.00003,1.47,0.148,2.22,0.444,0.752,0.296,1.44,0.672,2.05,1.13,0.615,0.456,1.1,0.969,1.47,1.54,0.365,0.569,0.547,1.15,0.547,1.74-0.00001,0.683-0.308,1.39-0.923,2.12-0.615,0.729-1.36,1.4-2.22,2.02-0.866,0.615-1.73,1.12-2.6,1.5-0.866,0.387-1.55,0.581-2.05,0.581-0.273,0.00001-0.511-0.125-0.716-0.376s-0.308-0.559-0.308-0.923c-0.00001-0.638,0.285-1.14,0.854-1.5,0.569-0.364,1.2-0.695,1.88-0.991,0.683-0.296,1.31-0.649,1.88-1.06,0.569-0.41,0.854-0.98,0.854-1.71-0.00002-0.0918-0.114-0.32-0.342-0.684s-0.843-0.546-1.85-0.546c-0.455,0.00002-0.978,0.262-1.57,0.786s-1.16,1.23-1.71,2.12c-0.547,0.889-1,1.94-1.37,3.14-0.364,1.21-0.546,2.52-0.546,3.93,0,1.18,0.217,2.26,0.65,3.21,0.433,0.957,0.991,1.77,1.67,2.43,0.683,0.661,1.48,1.17,2.39,1.54,0.911,0.364,1.85,0.546,2.8,0.546,0.683,0,1.42-0.148,2.22-0.444,0.797-0.296,1.55-0.615,2.26-0.957,0.706-0.342,1.32-0.661,1.84-0.957,0.523-0.296,0.854-0.444,0.992-0.444,0.136,0.00001,0.284,0.0685,0.443,0.205,0.159,0.137,0.262,0.274,0.308,0.41z"/>
+<path d="m533,163c-0.00002,0.318-0.137,0.58-0.41,0.785s-0.592,0.376-0.957,0.513-0.73,0.24-1.09,0.308c-0.364,0.0682-0.66,0.102-0.888,0.102-0.683,0.00002-1.14-0.0455-1.37-0.137-0.228-0.091-0.41-0.137-0.546-0.137-1.14,0.00002-2.05,0.0911-2.73,0.273-0.683,0.182-1.22,0.478-1.61,0.888-0.387,0.41-0.638,0.923-0.752,1.54-0.114,0.615-0.171,1.36-0.171,2.22-0.00001,1.46,0.057,2.62,0.171,3.49,0.114,0.866,0.228,1.57,0.341,2.12,0.113,0.546,0.227,0.968,0.341,1.26,0.114,0.296,0.171,0.581,0.171,0.855-0.00001,0.364-0.194,0.752-0.581,1.16-0.387,0.41-0.74,0.615-1.06,0.615-0.546,0-1.04-0.49-1.47-1.47-0.433-0.98-0.798-2.14-1.09-3.49-0.296-1.34-0.535-2.68-0.717-4s-0.273-2.32-0.273-3.01c0-0.776,0.0681-1.52,0.204-2.22,0.136-0.706,0.318-1.32,0.546-1.84,0.228-0.524,0.479-0.946,0.752-1.26,0.273-0.319,0.547-0.479,0.821-0.479,0.228,0.00003,0.41,0.08,0.546,0.24s0.25,0.342,0.341,0.547c0.0911,0.205,0.194,0.387,0.308,0.546s0.262,0.239,0.444,0.239c0.41,0.00003,1.07-0.205,1.98-0.615,0.911-0.41,2.03-0.615,3.35-0.615,1.23,0.00002,2.15,0.0341,2.77,0.102,0.615,0.0682,1.22,0.216,1.81,0.444,0.136,0.0459,0.307,0.148,0.512,0.308,0.205,0.159,0.308,0.399,0.308,0.719z"/>
+<path d="m558,177c0.0459,0.0918,0.0688,0.229,0.0688,0.411-0.00002,0.274-0.205,0.684-0.615,1.23-0.136,0.182-0.432,0.478-0.888,0.888s-1.07,0.82-1.85,1.23c-0.774,0.41-1.72,0.774-2.84,1.09-1.12,0.318-2.43,0.478-3.93,0.478-1.05,0-2.07-0.239-3.07-0.717s-1.89-1.18-2.67-2.12c-0.774-0.934-1.41-2.1-1.91-3.49-0.501-1.39-0.752-3.02-0.752-4.89,0-1.78,0.228-3.44,0.683-4.99s1.04-2.92,1.74-4.1c0.706-1.18,1.49-2.12,2.36-2.8,0.866-0.683,1.71-1.03,2.53-1.03,0.729,0.00003,1.47,0.148,2.22,0.444,0.752,0.296,1.44,0.672,2.05,1.13,0.615,0.456,1.1,0.969,1.47,1.54,0.365,0.569,0.547,1.15,0.547,1.74-0.00001,0.683-0.308,1.39-0.923,2.12-0.615,0.729-1.36,1.4-2.22,2.02-0.866,0.615-1.73,1.12-2.6,1.5-0.866,0.387-1.55,0.581-2.05,0.581-0.273,0.00001-0.511-0.125-0.716-0.376s-0.308-0.559-0.308-0.923c0-0.638,0.285-1.14,0.854-1.5,0.569-0.364,1.2-0.695,1.88-0.991,0.683-0.296,1.31-0.649,1.88-1.06,0.569-0.41,0.854-0.98,0.854-1.71-0.00001-0.0918-0.114-0.32-0.342-0.684s-0.843-0.546-1.85-0.546c-0.455,0.00002-0.978,0.262-1.57,0.786s-1.16,1.23-1.71,2.12c-0.547,0.889-1,1.94-1.37,3.14-0.364,1.21-0.546,2.52-0.546,3.93,0,1.18,0.217,2.26,0.65,3.21,0.433,0.957,0.991,1.77,1.67,2.43,0.683,0.661,1.48,1.17,2.39,1.54,0.911,0.364,1.85,0.546,2.8,0.546,0.683,0,1.42-0.148,2.22-0.444,0.797-0.296,1.55-0.615,2.26-0.957,0.706-0.342,1.32-0.661,1.84-0.957,0.523-0.296,0.854-0.444,0.992-0.444,0.136,0.00001,0.284,0.0685,0.443,0.205,0.159,0.137,0.262,0.274,0.308,0.41z"/>
+</g>
+<g stroke-linejoin="miter" transform="translate(77.31638,-1.3284405)" stroke="#8085e8" stroke-linecap="butt" stroke-dasharray="none" stroke-miterlimit="4" fill="none">
+<path d="m786,141c75.8,1.01,67.7-26.3,62.6-68.7-6-42.6-6-42.6-6-42.6" transform="matrix(0.60749736,0,0,0.6074971,4.9287817,87.469516)" stroke-width="4"/>
+<path d="m498,126c12.9-8.59,19.6-22.1,19.6-22.1s0.614,3.07,12.9,9.2c12.3,6.14,10.4,5.52,10.4,5.52" stroke-width="2.42998885999999990"/>
+</g>
+</g>
+</g>
+</svg>

js/lib/highcharts/api/js/ref.js

@@ -0,0 +1,863 @@
+var $hilighted,
+	$hilightedMenuItem,
+	optionDictionary = {},
+	names = [],
+	buildApiOffline,
+	initOffline,
+	offline = {},
+	API = {},
+	buildPage;
+
+function loadScript(url, callback) {
+	//http://www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/
+	var script = document.createElement("script");
+	script.type = "text/javascript";
+	if (script.readyState){  //IE
+		script.onreadystatechange = function(){
+			if (script.readyState == "loaded" ||
+					script.readyState == "complete"){
+				script.onreadystatechange = null;
+				callback();
+			}
+		};
+	} else {  //Others
+		script.onload = function() {
+			callback();
+		};
+	}
+
+	script.src = url;
+	document.getElementsByTagName("head")[0].appendChild(script);
+}
+
+function toDot (id){
+	return id.replace(/[-]+/g,'.');
+};
+
+function escapeHTML(html) {
+	if (typeof html === 'string') {
+		html = html
+			.replace('\u25CF', '\\u25CF')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;');
+	}
+	return html;
+}
+
+function escapeSelector (name) {
+	return name.replace('<', '\\<').replace('>', '\\>');
+}
+
+function activateInternalLinks($parent) {
+	$('a[href^="#"]', $parent).each(function (i, anchor) {
+		$(anchor).click(function () {
+			gotoSection(anchor.href.split('#')[1], true);
+			return false;
+		});
+	});
+}
+
+
+/**
+ * Highligth a specific option by coloring it in the menu view and section view
+ */
+function hilight (id) {
+	var linkId, $el, $detailsWrap = $('#details-wrap');
+
+	$el = $('div.member#' + escapeSelector(id));
+
+	// clear old
+	if ($hilighted) {
+		$hilighted.removeClass('hilighted');
+	}
+	if ($hilightedMenuItem) {
+		$hilightedMenuItem.removeClass('hilighted');
+	}
+
+	if ($el.length === 0) {
+		$detailsWrap.scrollTop(0);
+	} else {
+		// hilight new
+		$hilighted = $el;
+		$hilighted.addClass('hilighted');
+		$detailsWrap.scrollTop($hilighted.offset().top + $detailsWrap.scrollTop() - 160);
+	}
+	linkId = id.replace(/[^a-z0-9<>\\]+/gi,'.');
+
+	$hilightedMenuItem = $('a[href="#'+ linkId +'"]').not('.plus');
+	$hilightedMenuItem.addClass('hilighted');
+
+}
+
+/**
+ * Expand and load children when necessary of current level
+ */
+function toggleExpand($elem, callback) {
+	var $_menu = $elem.find('div[id$="-menu"]').first(),
+		_id = $_menu.attr('id').replace("-menu",""),
+		displayChildrenCallback = function () {
+
+			$('.dots', $elem).removeClass('loading');
+			$elem.removeClass("collapsed");
+			$elem.addClass("expanded");
+			$_menu.slideDown();
+			// show relevant section
+
+			if (/[A-Z]/.test(_id[0])) {
+				_id = 'object-' + _id;
+			}
+			toggleSection(_id);
+
+			if (callback) {
+				callback();
+			}
+
+		};
+
+
+	if ($elem.hasClass('collapsed')) {
+
+		/* if not loaded, load children, standard we have three children */
+		if ($_menu.children().size() == 1) {
+			$('.dots', $elem).addClass('loading');
+			loadChildren(_id, false, displayChildrenCallback);
+
+		} else {
+			displayChildrenCallback();
+		}
+	} else {
+		// hide children
+		$_menu.slideUp('normal',function(){
+			$elem.removeClass("expanded");
+			$elem.addClass("collapsed");
+		});
+	}
+};
+
+function toggleSection(sectionId) {
+	$section = $("#details > div.section:visible");
+
+	// hide current section
+	if($section){
+		$section.hide();
+	}
+	if (/[^\\]</.test(sectionId)) {
+		sectionId = sectionId.replace('<', '\\<').replace('>', '\\>');
+	}
+	$('#details > div.section#' + sectionId).show();
+}
+
+
+function addSectionOption(val){
+	$section = $('<div class="section" id="' + val.name + '" style="display:none;"></div>').appendTo('#details');
+	$('<h1>' + val.fullname.replace('<', '&lt;').replace('>', '&gt;') + '</h1>'
+	+ (val.description ? '<div class="section-description">' + val.description + '</div>': '')
+	+ (val.demo ? '<div class="demo"><h4>Try it:</h4> ' + val.demo + '</div>': '' )).appendTo($section);
+
+	activateInternalLinks($section);
+	$(document).triggerHandler({ type:"xtra.btn.section.event",id: optionDictionary[val.fullname], table: 'option' });
+}
+
+function addSectionObject(val){
+	$section = $('<div class="section" id="object-' + val.name + '" style="display:none;"></div>').appendTo('#details');
+	$('<h1>' + val.title + '</h1>').appendTo($section);
+	$('<div class="section-description">' + val.description + '</div>').appendTo($section);
+
+	activateInternalLinks($section);
+	$(document).triggerHandler({ type:"xtra.btn.section.event",id: 'object-'+ val.name, table: 'object'});
+}
+
+function markupReturnType(s) {
+	s = s.replace(/[<>]/g, function (a) {
+		return {
+			'<': '&lt;',
+			'>': '&gt;'
+		}[a];
+	});
+	s = s.replace(/(Axis|Chart|Element|Highcharts|Point|Renderer|Series)/g, '<a href="#$1">$1</a>');
+	return s;
+}
+
+function loadOptionMemberInSection(obj, isParent){
+	//add member to section in div#details
+	var $_section = $('div#' + obj.parent.replace('<', '\\<').replace('>', '\\>') + '.section'),
+		$_inheritedLink,
+		$memberDiv,
+		contextClass = obj.description && obj.description.indexOf('<p>') > -1 ? '' : ' context';
+
+	$memberDiv = $('<div class="member" id="' + obj.name + '"><span class="title">' + obj.title + '</span>'
+			+ (obj.returnType ? '<span class="returnType">: ' + markupReturnType(obj.returnType) + '</span>' : '')
+			+ (obj.deprecated ? '<div class="deprecated"><p>Deprecated</p></div>' : '' )
+			+ (obj.since ? '<div class="since">Since ' + obj.since + '</div>' : '' )
+			+ (obj.description ? '<div class="description">' + obj.description
+					+ (obj.defaults ? ' Defaults to <code>' + escapeHTML(obj.defaults) + '</code>.'  : '')
+					+ '</div>' : '')
+			+ (obj.context ? '<div class="description' + contextClass + '">The <code>this</code> keyword refers to the '+ markupReturnType(obj.context) +' object.</div>' : '')
+			+ (obj.demo ? '<div class="demo"><h4>Try it:</h4> ' + obj.demo + '</div>': '' )
+			+ (obj.seeAlso ? '<div class="seeAlso">See also: ' + obj.seeAlso + '</div>': '' )
+			+ '</div>').appendTo($_section);
+
+	activateInternalLinks($memberDiv);
+
+	if (isParent) {
+		$('div#' + escapeSelector(obj.name) + '.member span.title').html(function() {
+			var title = $.trim($(this).text());
+			return $('<a href="#' + obj.fullname + '">' + title + '</a>').click(function(){
+				gotoSection(obj.fullname, true);
+			});
+		});
+	}
+}
+
+function loadObjectMemberInSection(obj) {
+	$memberDiv = $('<div class="member" id="' + obj.name + '">'
+			+ '<span class="title">' + obj.title + '</span> '
+			+ (obj.params ? '<span class="parameters">' + obj.params + '</span>' : '')
+			+ (obj.since ? '<div class="since">Since ' + obj.since + '</div>' : '' )
+			+ (obj.deprecated ? '<div class="deprecated"><p>Deprecated</p></div>' : '' )
+			+ '<div class="description"><p>' + obj.description +  '</p>'
+			+ (obj.paramsDescription ? '<h4>Parameters</h4><ul id="paramdesc"><li>' +
+					obj.paramsDescription.replace(/\|\|/g,'</li><li>') + '</li></ul>' : '')
+			+ (obj.returnType ? '<h4>Returns</h4><ul id="returns"><li>' + markupReturnType(obj.returnType) + '</li></ul>' : '')
+			+ '</div>'
+			+ (obj.demo ? '<div class="demo"><h4>Try it:</h4> ' + obj.demo + '</div>': '' )
+			+ '</div>').appendTo('div#object-' + obj.parent + '.section');
+
+	activateInternalLinks($memberDiv);
+}
+
+function loadChildren(name, silent, callback) {
+
+	var isObject = /[A-Z]/.test(name[0]),
+		url = isObject ?
+			'object/'+ PRODUCTNAME + '-obj/child/' + name :
+			'option/'+ PRODUCTNAME + '/child/' + name;
+
+	$.ajax({
+		type: "GET",
+		url: url,
+		dataType: "json",
+		error: function () {
+			var $menu;
+			$menu = $('div#' + escapeSelector(name) + '-menu');
+			$('.dots', $menu.parent()).removeClass('loading').addClass('error').html('Error');
+		},
+		success: function (data) {
+			var display = 'block',
+			display, $menu, $menuItem;
+
+			if (silent){
+				display = 'none';
+			}
+
+			name = name.replace('<', '\\<').replace('>', '\\>');
+			$menu = $('div#' + name + '-menu');
+
+
+			$.each(data, function (key, val) {
+				var $div = $('<div></div>').appendTo($menu), $plus, $menuLink, parts,
+				tie, dottedName, internalName,
+				name,
+				title,
+				defaults,
+				cls;
+
+				/*if (val.type === 'method') {
+					name = val.name.replace('--', '.') + '()';
+				} else if (val.type === 'property') {
+					name = val.name.replace('--', '.');
+				} else {
+					name = val.fullname;
+				}*/
+				name = val.fullname;
+
+				if (val.isParent) {
+					var preBracket = '{',
+						postBracket = '}';
+
+					if (val.returnType && val.returnType.indexOf('Array') === 0 ) {
+						preBracket = '[{';
+						postBracket = '}]';
+					}
+
+
+
+					$menuItem = $('<div class="menuitem collapsed"></div>');
+					$menuLink = $('<a href="#' + name + '">' + val.title + '</a>').appendTo($menuItem);
+
+					$menuLink.click(function(){
+						gotoSection(val.fullname, true);
+					});
+					$plus = $('<a href="#' + name + '" class="plus"></a>').appendTo($menuItem);
+					$plus.click(function () {
+						toggleExpand($plus.parent());
+					});
+					$menuItem.append(':&nbsp;'+ preBracket +'<span class="dots"><span>…</span></span>');
+					// add empty submenu
+					$subMenu = $('<div id="' + val.name + '-menu" style="display:none"><div>').appendTo($menuItem);
+					$menuItem.append(postBracket);
+					$menuItem.appendTo($menu);
+					addSectionOption(val);
+				} else {
+					if (val.type === 'method') {
+						title = val.title + '()';
+					} else {
+						title = val.title;
+					}
+
+					$menuLink = $('<a href="#' + name + '">' + title + '</a>').appendTo($div);
+					$menuLink.click(function() {
+						gotoSection(name, true);
+					});
+					if (val.type === 'method') {
+						defaults = '[function]';
+					} else if (val.type === 'property') {
+						defaults = '[' + val.returnType + ']';
+					} else if (val.defaults === 'null' || val.defaults === 'undefined' || val.defaults === '' || val.defaults === undefined) {
+						defaults = val.defaults;
+					} else if (val.returnType === 'String' || val.returnType === 'Color') {
+						defaults = '"' + val.defaults + '"';
+
+					} else {
+						defaults = val.defaults;
+					}
+
+					if (val.returnType) {
+						cls = val.returnType.toLowerCase();
+					} else {
+						cls = '';
+						console.warn('Missing returnType for ' + val.fullname);
+					}
+						
+
+					$('<span class="value value-' + cls + '">: ' + escapeHTML(defaults) + '</span>').appendTo($div);
+				}
+				if (isObject) {
+					loadObjectMemberInSection(val);
+				} else {
+					loadOptionMemberInSection(val, val.isParent);
+				}
+			});
+
+			$(document).triggerHandler({
+				type:"xtra.btn.member.event",
+				id: isObject ? 'object-' + name : name,
+				table: isObject ? 'object' : 'option'
+			});
+
+			if (callback) {
+				callback();
+			}
+		}
+	});
+};
+
+function loadObjectMembers(name){
+	$.ajax({
+		type: "GET",
+		url: 'object/'+ PRODUCTNAME + '-obj/child/' + name,
+		async: false,
+		dataType: "json",
+		success: function (data) {
+			$.each(data, function (key, val) {
+				loadObjectMemberInSection(val);
+			});
+		}
+	});
+	$(document).triggerHandler({ type:"xtra.btn.member.event", id: 'object-' + name,table:'object'});
+};
+
+function gotoSection(anchor, hilighted) {
+
+	var name, levels, member, isObjectArr, isObject, parts, $_parent, $_parentparent, $_menu,
+		sectionId, parent,
+		i,
+		callbackStack = [];
+
+	// is it an option-section or an object-section?
+	parts = anchor.split("-");
+
+	// Handle typed parent item, like series<line>
+	name = anchor.split('.');
+	if (name.length > 1) {
+		name[name.length - 1] = '-' + name[name.length - 1];
+	}
+	name = name.join('-');
+
+	levels = name.split(/[-]{1,2}/);
+
+	isObject = (parts.length > 1 && parts[0] == 'object' || /[A-Z]/.test(name[0]));
+
+	// Asyncronously expand parent elements of selected item
+	$.each(levels, function(i) {
+		callbackStack.push(function () {
+			var proceed = true,
+				level,
+				$_menu,
+				$_parent;
+
+			if (levels[i]) {
+				level = levels.slice(0, i + 1).join('-');
+
+				if (level.indexOf('<') > -1) {
+					$_parentparent = $('#' + level.split('<')[0] + '-menu').parent();
+					level = escapeSelector(level);
+				}
+
+				$_menu = $('#' + level + '-menu');
+				$_parent = $_menu.parent();
+
+				if ($_menu && $_parent.hasClass('collapsed')) {
+
+					if ($_parentparent && $_parentparent.hasClass('collapsed')) {
+						toggleExpand($_parentparent);
+					}
+
+					// Do the toggle, and pass the next level as the callback argument
+					toggleExpand($_parent, callbackStack[i + 1]);
+					proceed = false;
+
+				}
+			}
+
+			// For the last path item, show the section etc
+			if (/[A-Z]/.test(level[0])) {
+				level = 'object-' + level;
+			}
+			if ($('#details > div.section#' + level).length) {
+				toggleSection(level);
+
+				// empty search
+				$("#search").val("");
+				window.location.hash = anchor;
+			}
+
+			if (proceed && callbackStack[i + 1]) {
+				callbackStack[i + 1]();
+			}
+		});
+	});
+
+	// Hilighting is the last operation in the async stack
+	if (hilighted) {
+		callbackStack.push(function () {
+			hilight(name);
+		});
+	}
+
+	// Start the recursive iteration
+	callbackStack[0]();
+
+
+
+}
+/*
+function addToSelectBox(key, val, type) {
+
+	var $menuItem = $('<div class="menuitem collapsed"></div>').appendTo('#' + type + 's'),
+		splut = val.fullname.split('<'),
+		commonName = splut[0],
+		templateName = splut[1].split('>')[0],
+		$menuLink = $('#' + commonName + '-menulink'),
+		$selectbox = $('#' + commonName + '-selectbox');
+
+	// The first time we encounter the series, generate the menu item for it.
+	if ($menuLink.length === 0) {
+		$menuLink = $('<a href="#' + commonName + '" id="' + commonName + '-menulink">' + commonName + '</a>')
+			.appendTo($menuItem);
+
+		$menuItem.append(': { type: ');
+
+		$selectbox = $('<select id="'+ commonName +'-selectbox">')
+			.bind('change', function () {
+				console.log(this.value);
+			})
+			.appendTo($menuItem);
+
+		$menuItem.append(' }');
+
+	}
+
+	$selectbox.append('<option>' + templateName + '</option>')
+		.attr({
+			name: templateName
+		});
+}
+*/
+/**
+ * Add the first level menu items on page load
+ */
+function addFirstLevelMenuItem(key, val, type) {
+
+
+	var $menuItem = $('<div class="menuitem collapsed"></div>').appendTo('#' + type + 's'),
+		$plus, anchor, $menu, levels, level, member, $menuLink,
+		sectionId = val.fullname || val.name,
+		title = escapeHTML(val.title),
+		mainSection,
+		name = val.name,
+		recurseToType = false,
+		menuItemPrefix = '';
+		prefix = ': {',
+		suffix = '}';
+
+	if (val.returnType && val.returnType.indexOf('Array') === 0) {
+		if (val.returnType === 'Array<Object>') {
+			prefix = ': [{';
+			suffix = '}]';
+		} else {
+			prefix = ': [';
+			suffix = ']';
+		}		
+	}
+	
+	// Global options
+	if ($.inArray(val.name, ['global', 'lang']) !== -1) {
+		$menuItem = $('<div class="menuitem collapsed"></div>').appendTo('#global-options');
+	}
+
+
+	// Handle the series<line> syntax
+	if (sectionId.indexOf('<') > -1) {
+		mainSection = sectionId.split('<')[0];
+
+		// The first time we encounter a menu item on the syntax series<line>, add the series menu item
+		if ($('#' + mainSection + '-menu').length === 0) {
+			sectionId = title = name = mainSection;
+			prefix = ': [';
+			suffix = ']';
+			recurseToType = true; // run this method again, but now for the { type: "line" } menu item
+		} else {
+			$menuItem.appendTo($('#' + mainSection + '-menu'));
+			menuItemPrefix = '{<br class="typed"/>';
+			title = '<span class="typed">type: "' + sectionId.split('<')[1].split('>')[0] + '"</span>';
+			prefix = ', ';
+		}
+
+
+	}
+
+	if (menuItemPrefix) {
+		$menuItem.append(menuItemPrefix);
+	}
+
+	$menuLink = $('<a href="#' + sectionId + '">' + title + '</a>')
+		.appendTo($menuItem)
+		.click(function(){
+			gotoSection(sectionId, true);
+			return false;
+		});
+
+	if (val.isParent) {
+		$plus = $('<a href="#' + sectionId + '" class="plus"></a>')
+			.appendTo($menuItem)
+			.click(function () {
+				toggleExpand($plus.parent());
+			});
+	}
+
+	$menuItem.append(prefix);
+
+	$('<span class="dots"><span>…</span></span>').appendTo($menuItem);
+
+	if(val.isParent) {
+		$subMenu = $('<div id="' + name + '-menu" style="display:none"><div>').appendTo($menuItem);
+	}
+	
+	$menuItem.append(suffix);
+
+
+	// create sections in div#details
+	if (type === 'option') {
+		addSectionOption(val);
+	} else {
+		addSectionObject(val);
+	}
+
+	if (recurseToType) {
+		addFirstLevelMenuItem.apply(null, arguments);
+	}
+}
+
+prepareOffline = function(callback) {
+
+	offline = {highcharts: {}, highstock: {}, highmaps: {}};
+
+	// now we have the data loaded we rewrite $.ajax for offline use
+	$.ajax = function(obj) {
+		var result,
+			type,
+			splitted;
+
+		if (obj.url === PRODUCTNAME + '/names') {
+			result = API[PRODUCTNAME].names;
+		}
+
+		var type = obj.url.split('/');		
+
+		if (obj.url === 'option/'+ PRODUCTNAME + '/main') {
+			result = API[PRODUCTNAME].main.option;
+		}
+
+		if (obj.url === 'object/'+ PRODUCTNAME + '-obj/main') {
+			result = API[PRODUCTNAME].main.object;
+		}
+
+		splitted = obj.url.split('object/' + PRODUCTNAME + '-obj/child/');
+		if (splitted.length > 1) {
+			result = API[PRODUCTNAME].object[splitted[1]].children;
+		}
+		splitted = obj.url.split('option/' + PRODUCTNAME + '/child/');
+		if (splitted.length > 1) {
+			result = API[PRODUCTNAME].option[splitted[1]].children;
+		}
+		
+		// result to handler
+		obj.success(result);
+	};
+
+	callback();
+}
+
+// build dictionary for offline use
+buildApiOffline = function(data, callback) {
+
+	var option,		
+		main,
+		names,
+		type,
+		i = 0;
+
+	API[PRODUCTNAME] = { option: [], object: [], main: {}, names: [] };
+		
+	names = API[PRODUCTNAME].names;
+
+	function fillWithType(type) {
+		var idx,
+			slot = API[PRODUCTNAME][type],
+			main = API[PRODUCTNAME].main[type] = [];
+			name,
+			parent;
+		
+		// Loop over options in dump file
+		for (idx = 0; idx < data[type].length; idx++) {
+			option = data[type][idx];
+			name = option.name;
+			names.push(name);
+
+			if (option.isParent) {
+		
+				// Store main options separately
+				if (!/-/.test(name)) {	  
+					main.push(option);
+				}
+		
+				if (slot[name] == undefined) {
+					slot[name] = {details: option, children: []};
+				} else {
+					/* In case the parent option was already 
+					 * deducted from a child option 
+					 */            	
+					slot[name].details = option;
+				}            
+			}
+
+			// we have a child!
+			if (slot.hasOwnProperty(option.parent)) {
+				slot[option.parent].children.push(option);
+			} else {
+				slot[option.parent] = {details: null, children: [option]};
+			}
+		}	
+	}
+
+	while(i < 2) {
+		type = ['option', 'object'][i];
+		fillWithType(type);
+		i++
+	}
+
+	callback();
+
+};
+
+buildPage = function() {
+
+		// autocomplete
+		$.ajax({
+			type: "GET",
+			url: PRODUCTNAME + '/names',
+			async: false,
+			dataType: "json",
+			success: function (data) {
+				$.each(data, function (key, val) {
+					var dotted = toDot(val);
+					names.push(dotted);
+					optionDictionary[dotted] = val;
+				});
+
+				$("#search" ).autocomplete({
+					source: names,
+					autoFocus: true,
+					minLength: 2,
+					select: function( event, ui ) {
+							gotoSection(ui.item.value, true);
+					},
+					position: {
+						my: 'left top',
+						of: '#search-wrap'
+					}
+				});
+			}
+		});
+
+		// load main options and build folded menu tree
+		$.ajax({
+			type: "GET",
+			url: 'option/' + PRODUCTNAME + '/main',
+			async: false,
+			dataType: "json",
+			success: function (data) {
+				$.each(data, function (key, val) {
+					addFirstLevelMenuItem(key, val, 'option');
+				});
+			}
+		});
+
+		// load objects of product
+		$.ajax({
+			type: "GET",
+			url: 'object/' + PRODUCTNAME + '-obj/main',
+			async: false,
+			dataType: "json",
+
+			success: function (data) {
+
+				$.each(data, function (key, val) {
+					addFirstLevelMenuItem(key, val, 'object');
+				});
+			}
+		});
+
+		 // check url for anchor, remove also '()' from old links for object.method().
+		 anchor = window.location.hash.replace('#', '').replace('()','');
+		 if (anchor) {
+			gotoSection(anchor, true);
+		 }
+
+		if (/\?object_not_found=true/.test(window.location.search)) {
+				dottedName = window.location.hash.split('#').pop();
+				internalName = optionDictionary[dottedName];
+				$('div#' + internalName).append('<div class="error">The object/option wasn\'t found in the database, maybe iẗ́\'s inherited??</div>');
+		}
+
+		 // focus search
+		 $("#search")[0].focus();
+	}
+
+// Startup
+$(document).ready( function () {
+	
+	if (runDB) {
+		buildPage();		
+	} else {
+		// prepare dump object
+		prepareOffline(function () {
+			// load offline data
+			loadScript('./js/' + PRODUCTNAME + '.json', function() { 
+				buildApiOffline(offline[PRODUCTNAME], buildPage);
+			});
+		});
+		// hide elements that don't make sence in offline mode
+		$('.hidden-offline').hide();
+	};
+
+	// convert hash from redirected dash syntax to new dot syntax
+	if (/-/.test(location.hash)) {
+		location.hash = location.hash.replace(/(--|-)/g, '.');
+	}
+
+	// Add scrollanimation to button
+	$("a[href='#top']").click(function() {
+		$("html, body").animate({ scrollTop: 0 }, "slow");
+		return false;
+	});
+
+	$(window).on('scroll', function() {
+		button = $("#scrollTop");
+		if (!$("#top").isOnScreen()) {
+			if (button.css('display') == 'none') {
+				button.fadeIn("slow");
+			}
+		} else {
+			if (button.css('display') == 'block') {
+				button.fadeOut("slow");
+			} 
+		}
+	});
+
+	$.fn.isOnScreen = function(){
+		var win = $(window),
+			viewport = {
+				top : win.scrollTop(),
+				left : win.scrollLeft()
+			};
+		
+		viewport.right = viewport.left + win.width();
+		viewport.bottom = viewport.top + win.height();
+		
+		var bounds = this.offset();
+		bounds.right = bounds.left + this.outerWidth();
+		bounds.bottom = bounds.top + this.outerHeight();
+		
+		return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
+		
+	};
+
+	function updateHeight() {
+		if (jQuery(window).width() >= 768) {
+			// Disable 
+			var padding,
+			height = $(window).height() - $('#top').height() - $('#footer').height();
+			$("#wrapper").height(height);
+			padding = $("#wrapper .container").innerHeight() - $("#wrapper .container").height();
+			height = $("#wrapper").height() - padding;
+			$("#wrapper-inner").height(height);
+			$("#nav-wrap").height(height);
+			$("#details-wrap").height(height);
+		} else {
+			// no height defined on the element for mobile devices
+			$('#nav-wrap').removeAttr('style');
+		}
+	};      
+	
+	updateHeight();
+
+	$(window).resize(updateHeight);
+
+	// Make the Highcharts/Highstock links dynamic
+	$('#highstock-link, #highcharts-link').click(function () {
+		this.href += location.hash;
+	});
+
+	// Login shortcut (hot corner)
+	$("<div>")
+		.css({
+			position: 'absolute',
+			display: 'block',
+			width: '10px',
+			height: '10px',
+			right: 0,
+			cursor: 'pointer'
+		})
+		.click(function () {
+				$('<iframe src="auth/login">').dialog({
+					height: 300
+				});
+		})
+		.prependTo('#top .container');
+	
+});
+
+
+

js/lib/highcharts/examples/3d-column-interactive/index.htm

@@ -0,0 +1,89 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+#container, #sliders {
+    min-width: 310px; 
+    max-width: 800px;
+    margin: 0 auto;
+}
+#container {
+    height: 400px; 
+}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    // Set up the chart
+    var chart = new Highcharts.Chart({
+        chart: {
+            renderTo: 'container',
+            type: 'column',
+            options3d: {
+                enabled: true,
+                alpha: 15,
+                beta: 15,
+                depth: 50,
+                viewDistance: 25
+            }
+        },
+        title: {
+            text: 'Chart rotation demo'
+        },
+        subtitle: {
+            text: 'Test options by dragging the sliders below'
+        },
+        plotOptions: {
+            column: {
+                depth: 25
+            }
+        },
+        series: [{
+            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
+        }]
+    });
+
+    function showValues() {
+        $('#alpha-value').html(chart.options.chart.options3d.alpha);
+        $('#beta-value').html(chart.options.chart.options3d.beta);
+        $('#depth-value').html(chart.options.chart.options3d.depth);
+    }
+
+    // Activate the sliders
+    $('#sliders input').on('input change', function () {
+        chart.options.chart.options3d[this.id] = this.value;
+        showValues();
+        chart.redraw(false);
+    });
+
+    showValues();
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/highcharts-3d.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container"></div>
+<div id="sliders">
+    <table>
+        <tr>
+        	<td>Alpha Angle</td>
+        	<td><input id="alpha" type="range" min="0" max="45" value="15"/> <span id="alpha-value" class="value"></span></td>
+        </tr>
+        <tr>
+        	<td>Beta Angle</td>
+        	<td><input id="beta" type="range" min="-45" max="45" value="15"/> <span id="beta-value" class="value"></span></td>
+        </tr>
+        <tr>
+        	<td>Depth</td>
+        	<td><input id="depth" type="range" min="20" max="100" value="50"/> <span id="depth-value" class="value"></span></td>
+        </tr>
+    </table>
+</div>
+	</body>
+</html>

js/lib/highcharts/examples/3d-column-null-values/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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+#container {
+    height: 400px; 
+    min-width: 310px; 
+    max-width: 800px;
+    margin: 0 auto;
+}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            type: 'column',
+            options3d: {
+                enabled: true,
+                alpha: 10,
+                beta: 25,
+                depth: 70
+            }
+        },
+        title: {
+            text: '3D chart with null values'
+        },
+        subtitle: {
+            text: 'Notice the difference between a 0 value and a null point'
+        },
+        plotOptions: {
+            column: {
+                depth: 25
+            }
+        },
+        xAxis: {
+            categories: Highcharts.getOptions().lang.shortMonths
+        },
+        yAxis: {
+            title: {
+                text: null
+            }
+        },
+        series: [{
+            name: 'Sales',
+            data: [2, 3, null, 4, 0, 5, 1, 4, 6, 3]
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/highcharts-3d.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="height: 400px"></div>
+	</body>
+</html>

js/lib/highcharts/examples/3d-column-stacking-grouping/index.htm

@@ -0,0 +1,89 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+#container {
+    height: 400px; 
+    min-width: 310px; 
+    max-width: 800px;
+    margin: 0 auto;
+}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            type: 'column',
+            options3d: {
+                enabled: true,
+                alpha: 15,
+                beta: 15,
+                viewDistance: 25,
+                depth: 40
+            }
+        },
+
+        title: {
+            text: 'Total fruit consumption, grouped by gender'
+        },
+
+        xAxis: {
+            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
+        },
+
+        yAxis: {
+            allowDecimals: false,
+            min: 0,
+            title: {
+                text: 'Number of fruits'
+            }
+        },
+
+        tooltip: {
+            headerFormat: '<b>{point.key}</b><br>',
+            pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
+        },
+
+        plotOptions: {
+            column: {
+                stacking: 'normal',
+                depth: 40
+            }
+        },
+
+        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="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/highcharts-3d.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="height: 400px"></div>
+	</body>
+</html>

js/lib/highcharts/examples/3d-pie-donut/index.htm

@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            type: 'pie',
+            options3d: {
+                enabled: true,
+                alpha: 45
+            }
+        },
+        title: {
+            text: 'Contents of Highsoft\'s weekly fruit delivery'
+        },
+        subtitle: {
+            text: '3D donut in Highcharts'
+        },
+        plotOptions: {
+            pie: {
+                innerSize: 100,
+                depth: 45
+            }
+        },
+        series: [{
+            name: 'Delivered amount',
+            data: [
+                ['Bananas', 8],
+                ['Kiwi', 3],
+                ['Mixed nuts', 1],
+                ['Oranges', 6],
+                ['Apples', 8],
+                ['Pears', 4],
+                ['Clementines', 4],
+                ['Reddish (bag)', 1],
+                ['Grapes (bunch)', 1]
+            ]
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/highcharts-3d.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="height: 400px"></div>
+	</body>
+</html>

js/lib/highcharts/examples/3d-pie/index.htm

@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            type: 'pie',
+            options3d: {
+                enabled: true,
+                alpha: 45,
+                beta: 0
+            }
+        },
+        title: {
+            text: 'Browser market shares at a specific website, 2014'
+        },
+        tooltip: {
+            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+        },
+        plotOptions: {
+            pie: {
+                allowPointSelect: true,
+                cursor: 'pointer',
+                depth: 35,
+                dataLabels: {
+                    enabled: true,
+                    format: '{point.name}'
+                }
+            }
+        },
+        series: [{
+            type: 'pie',
+            name: 'Browser share',
+            data: [
+                ['Firefox', 45.0],
+                ['IE', 26.8],
+                {
+                    name: 'Chrome',
+                    y: 12.8,
+                    sliced: true,
+                    selected: true
+                },
+                ['Safari', 8.5],
+                ['Opera', 6.2],
+                ['Others', 0.7]
+            ]
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/highcharts-3d.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="height: 400px"></div>
+	</body>
+</html>

js/lib/highcharts/examples/3d-scatter-draggable/index.htm

@@ -0,0 +1,134 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+#container {
+    height: 400px; 
+    min-width: 310px; 
+    max-width: 800px;
+    margin: 0 auto;
+}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    // Give the points a 3D feel by adding a radial gradient
+    Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
+        return {
+            radialGradient: {
+                cx: 0.4,
+                cy: 0.3,
+                r: 0.5
+            },
+            stops: [
+                [0, color],
+                [1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
+            ]
+        };
+    });
+
+    // Set up the chart
+    var chart = new Highcharts.Chart({
+        chart: {
+            renderTo: 'container',
+            margin: 100,
+            type: 'scatter',
+            options3d: {
+                enabled: true,
+                alpha: 10,
+                beta: 30,
+                depth: 250,
+                viewDistance: 5,
+                fitToPlot: false,
+                frame: {
+                    bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
+                    back: { size: 1, color: 'rgba(0,0,0,0.04)' },
+                    side: { size: 1, color: 'rgba(0,0,0,0.06)' }
+                }
+            }
+        },
+        title: {
+            text: 'Draggable box'
+        },
+        subtitle: {
+            text: 'Click and drag the plot area to rotate in space'
+        },
+        plotOptions: {
+            scatter: {
+                width: 10,
+                height: 10,
+                depth: 10
+            }
+        },
+        yAxis: {
+            min: 0,
+            max: 10,
+            title: null
+        },
+        xAxis: {
+            min: 0,
+            max: 10,
+            gridLineWidth: 1
+        },
+        zAxis: {
+            min: 0,
+            max: 10,
+            showFirstLabel: false
+        },
+        legend: {
+            enabled: false
+        },
+        series: [{
+            name: 'Reading',
+            colorByPoint: true,
+            data: [[1, 6, 5], [8, 7, 9], [1, 3, 4], [4, 6, 8], [5, 7, 7], [6, 9, 6], [7, 0, 5], [2, 3, 3], [3, 9, 8], [3, 6, 5], [4, 9, 4], [2, 3, 3], [6, 9, 9], [0, 7, 0], [7, 7, 9], [7, 2, 9], [0, 6, 2], [4, 6, 7], [3, 7, 7], [0, 1, 7], [2, 8, 6], [2, 3, 7], [6, 4, 8], [3, 5, 9], [7, 9, 5], [3, 1, 7], [4, 4, 2], [3, 6, 2], [3, 1, 6], [6, 8, 5], [6, 6, 7], [4, 1, 1], [7, 2, 7], [7, 7, 0], [8, 8, 9], [9, 4, 1], [8, 3, 4], [9, 8, 9], [3, 5, 3], [0, 2, 4], [6, 0, 2], [2, 1, 3], [5, 8, 9], [2, 1, 1], [9, 7, 6], [3, 0, 2], [9, 9, 0], [3, 4, 8], [2, 6, 1], [8, 9, 2], [7, 6, 5], [6, 3, 1], [9, 3, 1], [8, 9, 3], [9, 1, 0], [3, 8, 7], [8, 0, 0], [4, 9, 7], [8, 6, 2], [4, 3, 0], [2, 3, 5], [9, 1, 4], [1, 1, 4], [6, 0, 2], [6, 1, 6], [3, 8, 8], [8, 8, 7], [5, 5, 0], [3, 9, 6], [5, 4, 3], [6, 8, 3], [0, 1, 5], [6, 7, 3], [8, 3, 2], [3, 8, 3], [2, 1, 6], [4, 6, 7], [8, 9, 9], [5, 4, 2], [6, 1, 3], [6, 9, 5], [4, 8, 2], [9, 7, 4], [5, 4, 2], [9, 6, 1], [2, 7, 3], [4, 5, 4], [6, 8, 1], [3, 4, 0], [2, 2, 6], [5, 1, 2], [9, 9, 7], [6, 9, 9], [8, 4, 3], [4, 1, 7], [6, 2, 5], [0, 4, 9], [3, 5, 9], [6, 9, 1], [1, 9, 2]]
+        }]
+    });
+
+
+    // Add mouse events for rotation
+    $(chart.container).bind('mousedown.hc touchstart.hc', function (eStart) {
+        eStart = chart.pointer.normalize(eStart);
+
+        var posX = eStart.pageX,
+            posY = eStart.pageY,
+            alpha = chart.options.chart.options3d.alpha,
+            beta = chart.options.chart.options3d.beta,
+            newAlpha,
+            newBeta,
+            sensitivity = 5; // lower is more sensitive
+
+        $(document).bind({
+            'mousemove.hc touchdrag.hc': function (e) {
+                // Run beta
+                newBeta = beta + (posX - e.pageX) / sensitivity;
+                chart.options.chart.options3d.beta = newBeta;
+
+                // Run alpha
+                newAlpha = alpha + (e.pageY - posY) / sensitivity;
+                chart.options.chart.options3d.alpha = newAlpha;
+
+                chart.redraw(false);
+            },
+            'mouseup touchend': function () {
+                $(document).unbind('.hc');
+            }
+        });
+    });
+
+});
+		</script>
+	</head>
+	<body>
+
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/highcharts-3d.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="height: 400px"></div>
+	</body>
+</html>

js/lib/highcharts/examples/area-basic/index.htm

@@ -0,0 +1,90 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            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: {
+            allowDecimals: false,
+            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: {
+            pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.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="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/area-inverted/index.htm

@@ -0,0 +1,83 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            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: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
+        },
+        xAxis: {
+            categories: [
+                'Monday',
+                'Tuesday',
+                'Wednesday',
+                'Thursday',
+                'Friday',
+                'Saturday',
+                'Sunday'
+            ]
+        },
+        yAxis: {
+            title: {
+                text: 'Number of units'
+            },
+            labels: {
+                formatter: function () {
+                    return this.value;
+                }
+            },
+            min: 0
+        },
+        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="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/area-missing/index.htm

@@ -0,0 +1,83 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            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: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#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="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/area-negative/index.htm

@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            type: 'area'
+        },
+        title: {
+            text: 'Area chart with negative values'
+        },
+        xAxis: {
+            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
+        },
+        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="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/area-stacked-percent/index.htm

@@ -0,0 +1,77 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            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: {
+            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
+            shared: true
+        },
+        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="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/area-stacked/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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            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: {
+            shared: true,
+            valueSuffix: ' 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="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/arearange-line/index.htm

@@ -0,0 +1,138 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    var ranges = [
+            [1246406400000, 14.3, 27.7],
+            [1246492800000, 14.5, 27.8],
+            [1246579200000, 15.5, 29.6],
+            [1246665600000, 16.7, 30.7],
+            [1246752000000, 16.5, 25.0],
+            [1246838400000, 17.8, 25.7],
+            [1246924800000, 13.5, 24.8],
+            [1247011200000, 10.5, 21.4],
+            [1247097600000, 9.2, 23.8],
+            [1247184000000, 11.6, 21.8],
+            [1247270400000, 10.7, 23.7],
+            [1247356800000, 11.0, 23.3],
+            [1247443200000, 11.6, 23.7],
+            [1247529600000, 11.8, 20.7],
+            [1247616000000, 12.6, 22.4],
+            [1247702400000, 13.6, 19.6],
+            [1247788800000, 11.4, 22.6],
+            [1247875200000, 13.2, 25.0],
+            [1247961600000, 14.2, 21.6],
+            [1248048000000, 13.1, 17.1],
+            [1248134400000, 12.2, 15.5],
+            [1248220800000, 12.0, 20.8],
+            [1248307200000, 12.0, 17.1],
+            [1248393600000, 12.7, 18.3],
+            [1248480000000, 12.4, 19.4],
+            [1248566400000, 12.6, 19.9],
+            [1248652800000, 11.9, 20.2],
+            [1248739200000, 11.0, 19.3],
+            [1248825600000, 10.8, 17.8],
+            [1248912000000, 11.8, 18.5],
+            [1248998400000, 10.8, 16.1]
+        ],
+        averages = [
+            [1246406400000, 21.5],
+            [1246492800000, 22.1],
+            [1246579200000, 23],
+            [1246665600000, 23.8],
+            [1246752000000, 21.4],
+            [1246838400000, 21.3],
+            [1246924800000, 18.3],
+            [1247011200000, 15.4],
+            [1247097600000, 16.4],
+            [1247184000000, 17.7],
+            [1247270400000, 17.5],
+            [1247356800000, 17.6],
+            [1247443200000, 17.7],
+            [1247529600000, 16.8],
+            [1247616000000, 17.7],
+            [1247702400000, 16.3],
+            [1247788800000, 17.8],
+            [1247875200000, 18.1],
+            [1247961600000, 17.2],
+            [1248048000000, 14.4],
+            [1248134400000, 13.7],
+            [1248220800000, 15.7],
+            [1248307200000, 14.6],
+            [1248393600000, 15.3],
+            [1248480000000, 15.3],
+            [1248566400000, 15.8],
+            [1248652800000, 15.2],
+            [1248739200000, 14.8],
+            [1248825600000, 14.4],
+            [1248912000000, 15],
+            [1248998400000, 13.6]
+        ];
+
+
+    $('#container').highcharts({
+
+        title: {
+            text: 'July temperatures'
+        },
+
+        xAxis: {
+            type: 'datetime'
+        },
+
+        yAxis: {
+            title: {
+                text: null
+            }
+        },
+
+        tooltip: {
+            crosshairs: true,
+            shared: true,
+            valueSuffix: '°C'
+        },
+
+        legend: {
+        },
+
+        series: [{
+            name: 'Temperature',
+            data: averages,
+            zIndex: 1,
+            marker: {
+                fillColor: 'white',
+                lineWidth: 2,
+                lineColor: Highcharts.getOptions().colors[0]
+            }
+        }, {
+            name: 'Range',
+            data: ranges,
+            type: 'arearange',
+            lineWidth: 0,
+            linkedTo: ':previous',
+            color: Highcharts.getOptions().colors[0],
+            fillOpacity: 0.3,
+            zIndex: 0
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+<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 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/arearange/index.htm

@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function (data) {
+
+        $('#container').highcharts({
+
+            chart: {
+                type: 'arearange',
+                zoomType: 'x'
+            },
+
+            title: {
+                text: 'Temperature variation by day'
+            },
+
+            xAxis: {
+                type: 'datetime'
+            },
+
+            yAxis: {
+                title: {
+                    text: null
+                }
+            },
+
+            tooltip: {
+                crosshairs: true,
+                shared: true,
+                valueSuffix: '°C'
+            },
+
+            legend: {
+                enabled: false
+            },
+
+            series: [{
+                name: 'Temperatures',
+                data: data
+            }]
+
+        });
+    });
+
+});
+		</script>
+	</head>
+	<body>
+<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 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/areaspline/index.htm

@@ -0,0 +1,81 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            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: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#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: {
+            shared: true,
+            valueSuffix: ' 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="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/bar-basic/index.htm

@@ -0,0 +1,84 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            type: 'bar'
+        },
+        title: {
+            text: 'Historic World Population by Region'
+        },
+        subtitle: {
+            text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
+        },
+        xAxis: {
+            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
+            title: {
+                text: null
+            }
+        },
+        yAxis: {
+            min: 0,
+            title: {
+                text: 'Population (millions)',
+                align: 'high'
+            },
+            labels: {
+                overflow: 'justify'
+            }
+        },
+        tooltip: {
+            valueSuffix: ' millions'
+        },
+        plotOptions: {
+            bar: {
+                dataLabels: {
+                    enabled: true
+                }
+            }
+        },
+        legend: {
+            layout: 'vertical',
+            align: 'right',
+            verticalAlign: 'top',
+            x: -40,
+            y: 80,
+            floating: true,
+            borderWidth: 1,
+            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#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 2012',
+            data: [1052, 954, 4250, 740, 38]
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/bar-negative-stack/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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+// Data gathered from http://populationpyramid.net/germany/2015/
+$(function () {
+    // Age categories
+    var 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 () {
+        $('#container').highcharts({
+            chart: {
+                type: 'bar'
+            },
+            title: {
+                text: 'Population pyramid for Germany, 2015'
+            },
+            subtitle: {
+                text: 'Source: <a href="http://populationpyramid.net/germany/2015/">Population Pyramids of the World from 1950 to 2100</a>'
+            },
+            xAxis: [{
+                categories: categories,
+                reversed: false,
+                labels: {
+                    step: 1
+                }
+            }, { // mirror axis on right side
+                opposite: true,
+                reversed: false,
+                categories: categories,
+                linkedTo: 0,
+                labels: {
+                    step: 1
+                }
+            }],
+            yAxis: {
+                title: {
+                    text: null
+                },
+                labels: {
+                    formatter: function () {
+                        return Math.abs(this.value) + '%';
+                    }
+                }
+            },
+
+            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: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
+                    -3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
+                    -2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
+            }, {
+                name: 'Female',
+                data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
+                    3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
+                    1.8, 1.2, 0.6, 0.1, 0.0]
+            }]
+        });
+    });
+
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/bar-stacked/index.htm

@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            type: 'bar'
+        },
+        title: {
+            text: 'Stacked bar chart'
+        },
+        xAxis: {
+            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
+        },
+        yAxis: {
+            min: 0,
+            title: {
+                text: 'Total fruit consumption'
+            }
+        },
+        legend: {
+            reversed: true
+        },
+        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="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/box-plot/index.htm

@@ -0,0 +1,95 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+
+        chart: {
+            type: 'boxplot'
+        },
+
+        title: {
+            text: 'Highcharts Box Plot Example'
+        },
+
+        legend: {
+            enabled: false
+        },
+
+        xAxis: {
+            categories: ['1', '2', '3', '4', '5'],
+            title: {
+                text: 'Experiment No.'
+            }
+        },
+
+        yAxis: {
+            title: {
+                text: 'Observations'
+            },
+            plotLines: [{
+                value: 932,
+                color: 'red',
+                width: 1,
+                label: {
+                    text: 'Theoretical mean: 932',
+                    align: 'center',
+                    style: {
+                        color: 'gray'
+                    }
+                }
+            }]
+        },
+
+        series: [{
+            name: 'Observations',
+            data: [
+                [760, 801, 848, 895, 965],
+                [733, 853, 939, 980, 1080],
+                [714, 762, 817, 870, 918],
+                [724, 802, 806, 871, 950],
+                [834, 836, 864, 882, 910]
+            ],
+            tooltip: {
+                headerFormat: '<em>Experiment No {point.key}</em><br/>'
+            }
+        }, {
+            name: 'Outlier',
+            color: Highcharts.getOptions().colors[0],
+            type: 'scatter',
+            data: [ // x, y positions where 0 is the first category
+                [0, 644],
+                [4, 718],
+                [4, 951],
+                [4, 969]
+            ],
+            marker: {
+                fillColor: 'white',
+                lineWidth: 1,
+                lineColor: Highcharts.getOptions().colors[0]
+            },
+            tooltip: {
+                pointFormat: 'Observation: {point.y}'
+            }
+        }]
+
+    });
+});
+		</script>
+	</head>
+	<body>
+<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="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
+	</body>
+</html>

js/lib/highcharts/examples/bubble-3d/index.htm

@@ -0,0 +1,98 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+
+        chart: {
+            type: 'bubble',
+            plotBorderWidth: 1,
+            zoomType: 'xy'
+        },
+
+        title: {
+            text: 'Highcharts bubbles with radial gradient fill'
+        },
+
+        xAxis: {
+            gridLineWidth: 1
+        },
+
+        yAxis: {
+            startOnTick: false,
+            endOnTick: false
+        },
+
+        series: [{
+            data: [
+                [9, 81, 63],
+                [98, 5, 89],
+                [51, 50, 73],
+                [41, 22, 14],
+                [58, 24, 20],
+                [78, 37, 34],
+                [55, 56, 53],
+                [18, 45, 70],
+                [42, 44, 28],
+                [3, 52, 59],
+                [31, 18, 97],
+                [79, 91, 63],
+                [93, 23, 23],
+                [44, 83, 22]
+            ],
+            marker: {
+                fillColor: {
+                    radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
+                    stops: [
+                        [0, 'rgba(255,255,255,0.5)'],
+                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
+                    ]
+                }
+            }
+        }, {
+            data: [
+                [42, 38, 20],
+                [6, 18, 1],
+                [1, 93, 55],
+                [57, 2, 90],
+                [80, 76, 22],
+                [11, 74, 96],
+                [88, 56, 10],
+                [30, 47, 49],
+                [57, 62, 98],
+                [4, 16, 16],
+                [46, 10, 11],
+                [22, 87, 89],
+                [57, 91, 82],
+                [45, 15, 98]
+            ],
+            marker: {
+                fillColor: {
+                    radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
+                    stops: [
+                        [0, 'rgba(255,255,255,0.5)'],
+                        [1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
+                    ]
+                }
+            }
+        }]
+
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/highcharts-more.js"></script>
+
+<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
+	</body>
+</html>

js/lib/highcharts/examples/bubble/index.htm

@@ -0,0 +1,138 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+.highcharts-tooltip h3 {
+    margin: 0.3em 0;
+}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+
+        chart: {
+            type: 'bubble',
+            plotBorderWidth: 1,
+            zoomType: 'xy'
+        },
+
+        legend: {
+            enabled: false
+        },
+
+        title: {
+            text: 'Sugar and fat intake per country'
+        },
+
+        subtitle: {
+            text: 'Source: <a href="http://www.euromonitor.com/">Euromonitor</a> and <a href="https://data.oecd.org/">OECD</a>'
+        },
+
+        xAxis: {
+            gridLineWidth: 1,
+            title: {
+                text: 'Daily fat intake'
+            },
+            labels: {
+                format: '{value} gr'
+            },
+            plotLines: [{
+                color: 'black',
+                dashStyle: 'dot',
+                width: 2,
+                value: 65,
+                label: {
+                    rotation: 0,
+                    y: 15,
+                    style: {
+                        fontStyle: 'italic'
+                    },
+                    text: 'Safe fat intake 65g/day'
+                },
+                zIndex: 3
+            }]
+        },
+
+        yAxis: {
+            startOnTick: false,
+            endOnTick: false,
+            title: {
+                text: 'Daily sugar intake'
+            },
+            labels: {
+                format: '{value} gr'
+            },
+            maxPadding: 0.2,
+            plotLines: [{
+                color: 'black',
+                dashStyle: 'dot',
+                width: 2,
+                value: 50,
+                label: {
+                    align: 'right',
+                    style: {
+                        fontStyle: 'italic'
+                    },
+                    text: 'Safe sugar intake 50g/day',
+                    x: -10
+                },
+                zIndex: 3
+            }]
+        },
+
+        tooltip: {
+            useHTML: true,
+            headerFormat: '<table>',
+            pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
+                '<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
+                '<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
+                '<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
+            footerFormat: '</table>',
+            followPointer: true
+        },
+
+        plotOptions: {
+            series: {
+                dataLabels: {
+                    enabled: true,
+                    format: '{point.name}'
+                }
+            }
+        },
+
+        series: [{
+            data: [
+                { x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' },
+                { x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' },
+                { x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' },
+                { x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' },
+                { x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' },
+                { x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' },
+                { x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' },
+                { x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' },
+                { x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' },
+                { x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' },
+                { x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' },
+                { x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' },
+                { x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' },
+                { x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' },
+                { x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' }
+            ]
+        }]
+
+    });
+});
+		</script>
+	</head>
+	<body>
+<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="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
+	</body>
+</html>

js/lib/highcharts/examples/column-basic/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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            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'
+            ],
+            crosshair: true
+        },
+        yAxis: {
+            min: 0,
+            title: {
+                text: 'Rainfall (mm)'
+            }
+        },
+        tooltip: {
+            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
+            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
+                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
+            footerFormat: '</table>',
+            shared: true,
+            useHTML: true
+        },
+        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="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/column-drilldown/index.htm

@@ -0,0 +1,275 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    // Create the chart
+    $('#container').highcharts({
+        chart: {
+            type: 'column'
+        },
+        title: {
+            text: 'Browser market shares. January, 2015 to May, 2015'
+        },
+        subtitle: {
+            text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
+        },
+        xAxis: {
+            type: 'category'
+        },
+        yAxis: {
+            title: {
+                text: 'Total percent market share'
+            }
+
+        },
+        legend: {
+            enabled: false
+        },
+        plotOptions: {
+            series: {
+                borderWidth: 0,
+                dataLabels: {
+                    enabled: true,
+                    format: '{point.y:.1f}%'
+                }
+            }
+        },
+
+        tooltip: {
+            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
+            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
+        },
+
+        series: [{
+            name: 'Brands',
+            colorByPoint: true,
+            data: [{
+                name: 'Microsoft Internet Explorer',
+                y: 56.33,
+                drilldown: 'Microsoft Internet Explorer'
+            }, {
+                name: 'Chrome',
+                y: 24.03,
+                drilldown: 'Chrome'
+            }, {
+                name: 'Firefox',
+                y: 10.38,
+                drilldown: 'Firefox'
+            }, {
+                name: 'Safari',
+                y: 4.77,
+                drilldown: 'Safari'
+            }, {
+                name: 'Opera',
+                y: 0.91,
+                drilldown: 'Opera'
+            }, {
+                name: 'Proprietary or Undetectable',
+                y: 0.2,
+                drilldown: null
+            }]
+        }],
+        drilldown: {
+            series: [{
+                name: 'Microsoft Internet Explorer',
+                id: 'Microsoft Internet Explorer',
+                data: [
+                    [
+                        'v11.0',
+                        24.13
+                    ],
+                    [
+                        'v8.0',
+                        17.2
+                    ],
+                    [
+                        'v9.0',
+                        8.11
+                    ],
+                    [
+                        'v10.0',
+                        5.33
+                    ],
+                    [
+                        'v6.0',
+                        1.06
+                    ],
+                    [
+                        'v7.0',
+                        0.5
+                    ]
+                ]
+            }, {
+                name: 'Chrome',
+                id: 'Chrome',
+                data: [
+                    [
+                        'v40.0',
+                        5
+                    ],
+                    [
+                        'v41.0',
+                        4.32
+                    ],
+                    [
+                        'v42.0',
+                        3.68
+                    ],
+                    [
+                        'v39.0',
+                        2.96
+                    ],
+                    [
+                        'v36.0',
+                        2.53
+                    ],
+                    [
+                        'v43.0',
+                        1.45
+                    ],
+                    [
+                        'v31.0',
+                        1.24
+                    ],
+                    [
+                        'v35.0',
+                        0.85
+                    ],
+                    [
+                        'v38.0',
+                        0.6
+                    ],
+                    [
+                        'v32.0',
+                        0.55
+                    ],
+                    [
+                        'v37.0',
+                        0.38
+                    ],
+                    [
+                        'v33.0',
+                        0.19
+                    ],
+                    [
+                        'v34.0',
+                        0.14
+                    ],
+                    [
+                        'v30.0',
+                        0.14
+                    ]
+                ]
+            }, {
+                name: 'Firefox',
+                id: 'Firefox',
+                data: [
+                    [
+                        'v35',
+                        2.76
+                    ],
+                    [
+                        'v36',
+                        2.32
+                    ],
+                    [
+                        'v37',
+                        2.31
+                    ],
+                    [
+                        'v34',
+                        1.27
+                    ],
+                    [
+                        'v38',
+                        1.02
+                    ],
+                    [
+                        'v31',
+                        0.33
+                    ],
+                    [
+                        'v33',
+                        0.22
+                    ],
+                    [
+                        'v32',
+                        0.15
+                    ]
+                ]
+            }, {
+                name: 'Safari',
+                id: 'Safari',
+                data: [
+                    [
+                        'v8.0',
+                        2.56
+                    ],
+                    [
+                        'v7.1',
+                        0.77
+                    ],
+                    [
+                        'v5.1',
+                        0.42
+                    ],
+                    [
+                        'v5.0',
+                        0.3
+                    ],
+                    [
+                        'v6.1',
+                        0.29
+                    ],
+                    [
+                        'v7.0',
+                        0.26
+                    ],
+                    [
+                        'v6.2',
+                        0.17
+                    ]
+                ]
+            }, {
+                name: 'Opera',
+                id: 'Opera',
+                data: [
+                    [
+                        'v12.x',
+                        0.34
+                    ],
+                    [
+                        'v28',
+                        0.24
+                    ],
+                    [
+                        'v27',
+                        0.17
+                    ],
+                    [
+                        'v29',
+                        0.16
+                    ]
+                ]
+            }]
+        }
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/data.js"></script>
+<script src="https://code.highcharts.com/modules/drilldown.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+	</body>
+</html>

js/lib/highcharts/examples/column-negative/index.htm

@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            type: 'column'
+        },
+        title: {
+            text: 'Column chart with negative values'
+        },
+        xAxis: {
+            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
+        },
+        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="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/column-parsed/index.htm

@@ -0,0 +1,83 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        data: {
+            table: 'datatable'
+        },
+        chart: {
+            type: 'column'
+        },
+        title: {
+            text: 'Data extracted from a HTML table in the page'
+        },
+        yAxis: {
+            allowDecimals: false,
+            title: {
+                text: 'Units'
+            }
+        },
+        tooltip: {
+            formatter: function () {
+                return '<b>' + this.series.name + '</b><br/>' +
+                    this.point.y + ' ' + this.point.name.toLowerCase();
+            }
+        }
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/data.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; 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>

js/lib/highcharts/examples/column-placement/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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            type: 'column'
+        },
+        title: {
+            text: 'Efficiency Optimization by Branch'
+        },
+        xAxis: {
+            categories: [
+                'Seattle HQ',
+                'San Francisco',
+                'Tokyo'
+            ]
+        },
+        yAxis: [{
+            min: 0,
+            title: {
+                text: 'Employees'
+            }
+        }, {
+            title: {
+                text: 'Profit (millions)'
+            },
+            opposite: true
+        }],
+        legend: {
+            shadow: false
+        },
+        tooltip: {
+            shared: true
+        },
+        plotOptions: {
+            column: {
+                grouping: false,
+                shadow: false,
+                borderWidth: 0
+            }
+        },
+        series: [{
+            name: 'Employees',
+            color: 'rgba(165,170,217,1)',
+            data: [150, 73, 20],
+            pointPadding: 0.3,
+            pointPlacement: -0.2
+        }, {
+            name: 'Employees Optimized',
+            color: 'rgba(126,86,134,.9)',
+            data: [140, 90, 40],
+            pointPadding: 0.4,
+            pointPlacement: -0.2
+        }, {
+            name: 'Profit',
+            color: 'rgba(248,161,63,1)',
+            data: [183.6, 178.8, 198.5],
+            tooltip: {
+                valuePrefix: '$',
+                valueSuffix: ' M'
+            },
+            pointPadding: 0.3,
+            pointPlacement: 0.2,
+            yAxis: 1
+        }, {
+            name: 'Profit Optimized',
+            color: 'rgba(186,60,61,.9)',
+            data: [203.6, 198.8, 208.5],
+            tooltip: {
+                valuePrefix: '$',
+                valueSuffix: ' M'
+            },
+            pointPadding: 0.4,
+            pointPlacement: 0.2,
+            yAxis: 1
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/column-rotated-labels/index.htm

@@ -0,0 +1,93 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            type: 'column'
+        },
+        title: {
+            text: 'World\'s largest cities per 2014'
+        },
+        subtitle: {
+            text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
+        },
+        xAxis: {
+            type: 'category',
+            labels: {
+                rotation: -45,
+                style: {
+                    fontSize: '13px',
+                    fontFamily: 'Verdana, sans-serif'
+                }
+            }
+        },
+        yAxis: {
+            min: 0,
+            title: {
+                text: 'Population (millions)'
+            }
+        },
+        legend: {
+            enabled: false
+        },
+        tooltip: {
+            pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
+        },
+        series: [{
+            name: 'Population',
+            data: [
+                ['Shanghai', 23.7],
+                ['Lagos', 16.1],
+                ['Istanbul', 14.2],
+                ['Karachi', 14.0],
+                ['Mumbai', 12.5],
+                ['Moscow', 12.1],
+                ['São Paulo', 11.8],
+                ['Beijing', 11.7],
+                ['Guangzhou', 11.1],
+                ['Delhi', 11.1],
+                ['Shenzhen', 10.5],
+                ['Seoul', 10.4],
+                ['Jakarta', 10.0],
+                ['Kinshasa', 9.3],
+                ['Tianjin', 9.3],
+                ['Tokyo', 9.0],
+                ['Cairo', 8.9],
+                ['Dhaka', 8.9],
+                ['Mexico City', 8.9],
+                ['Lima', 8.9]
+            ],
+            dataLabels: {
+                enabled: true,
+                rotation: -90,
+                color: '#FFFFFF',
+                align: 'right',
+                format: '{point.y:.1f}', // one decimal
+                y: 10, // 10 pixels down from the top
+                style: {
+                    fontSize: '13px',
+                    fontFamily: 'Verdana, sans-serif'
+                }
+            }
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 300px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/column-stacked-and-grouped/index.htm

@@ -0,0 +1,77 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+
+        chart: {
+            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="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/column-stacked-percent/index.htm

@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            type: 'column'
+        },
+        title: {
+            text: 'Stacked column chart'
+        },
+        xAxis: {
+            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
+        },
+        yAxis: {
+            min: 0,
+            title: {
+                text: 'Total fruit consumption'
+            }
+        },
+        tooltip: {
+            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
+            shared: true
+        },
+        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="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/column-stacked/index.htm

@@ -0,0 +1,84 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            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: -30,
+            verticalAlign: 'top',
+            y: 25,
+            floating: true,
+            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
+            borderColor: '#CCC',
+            borderWidth: 1,
+            shadow: false
+        },
+        tooltip: {
+            headerFormat: '<b>{point.x}</b><br/>',
+            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
+        },
+        plotOptions: {
+            column: {
+                stacking: 'normal',
+                dataLabels: {
+                    enabled: true,
+                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
+                    style: {
+                        textShadow: '0 0 3px black'
+                    }
+                }
+            }
+        },
+        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="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/columnrange/index.htm

@@ -0,0 +1,89 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    $('#container').highcharts({
+
+        chart: {
+            type: 'columnrange',
+            inverted: true
+        },
+
+        title: {
+            text: 'Temperature variation by month'
+        },
+
+        subtitle: {
+            text: 'Observed in Vik i Sogn, Norway'
+        },
+
+        xAxis: {
+            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+        },
+
+        yAxis: {
+            title: {
+                text: 'Temperature ( °C )'
+            }
+        },
+
+        tooltip: {
+            valueSuffix: '°C'
+        },
+
+        plotOptions: {
+            columnrange: {
+                dataLabels: {
+                    enabled: true,
+                    formatter: function () {
+                        return this.y + '°C';
+                    }
+                }
+            }
+        },
+
+        legend: {
+            enabled: false
+        },
+
+        series: [{
+            name: 'Temperatures',
+            data: [
+                [-9.7, 9.4],
+                [-8.7, 6.5],
+                [-3.5, 9.4],
+                [-1.4, 19.9],
+                [0.0, 22.6],
+                [2.9, 29.5],
+                [9.2, 30.7],
+                [7.3, 26.5],
+                [4.4, 18.0],
+                [-3.1, 11.4],
+                [-5.2, 10.4],
+                [-13.5, 9.8]
+            ]
+        }]
+
+    });
+
+});
+		</script>
+	</head>
+	<body>
+<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 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/combo-dual-axes/index.htm

@@ -0,0 +1,96 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            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'],
+            crosshair: true
+        }],
+        yAxis: [{ // Primary yAxis
+            labels: {
+                format: '{value}°C',
+                style: {
+                    color: Highcharts.getOptions().colors[1]
+                }
+            },
+            title: {
+                text: 'Temperature',
+                style: {
+                    color: Highcharts.getOptions().colors[1]
+                }
+            }
+        }, { // Secondary yAxis
+            title: {
+                text: 'Rainfall',
+                style: {
+                    color: Highcharts.getOptions().colors[0]
+                }
+            },
+            labels: {
+                format: '{value} mm',
+                style: {
+                    color: Highcharts.getOptions().colors[0]
+                }
+            },
+            opposite: true
+        }],
+        tooltip: {
+            shared: true
+        },
+        legend: {
+            layout: 'vertical',
+            align: 'left',
+            x: 120,
+            verticalAlign: 'top',
+            y: 100,
+            floating: true,
+            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
+        },
+        series: [{
+            name: 'Rainfall',
+            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],
+            tooltip: {
+                valueSuffix: ' mm'
+            }
+
+        }, {
+            name: 'Temperature',
+            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],
+            tooltip: {
+                valueSuffix: '°C'
+            }
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/combo-meteogram/index.htm

@@ -0,0 +1,791 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+/**
+ * This is a complex demo of how to set up a Highcharts chart, coupled to a
+ * dynamic source and extended by drawing image sprites, wind arrow paths
+ * and a second grid on top of the chart. The purpose of the demo is to inpire
+ * developers to go beyond the basic chart types and show how the library can
+ * be extended programmatically. This is what the demo does:
+ *
+ * - Loads weather forecast from www.yr.no in form of an XML service. The XML
+ *   is translated on the Higcharts website into JSONP for the sake of the demo
+ *   being shown on both our website and JSFiddle.
+ * - When the data arrives async, a Meteogram instance is created. We have
+ *   created the Meteogram prototype to provide an organized structure of the different
+ *   methods and subroutines associated with the demo.
+ * - The parseYrData method parses the data from www.yr.no into several parallel arrays. These
+ *   arrays are used directly as the data option for temperature, precipitation
+ *   and air pressure. As the temperature data gives only full degrees, we apply
+ *   some smoothing on the graph, but keep the original data in the tooltip.
+ * - After this, the options structure is build, and the chart generated with the
+ *   parsed data.
+ * - In the callback (on chart load), we weather icons on top of the temperature series.
+ *   The icons are sprites from a single PNG image, placed inside a clipped 30x30
+ *   SVG <g> element. VML interprets this as HTML images inside a clipped div.
+ * - Lastly, the wind arrows are built and added below the plot area, and a grid is
+ *   drawn around them. The wind arrows are basically drawn north-south, then rotated
+ *   as per the wind direction.
+ */
+
+function Meteogram(xml, container) {
+    // Parallel arrays for the chart data, these are populated as the XML/JSON file
+    // is loaded
+    this.symbols = [];
+    this.symbolNames = [];
+    this.precipitations = [];
+    this.windDirections = [];
+    this.windDirectionNames = [];
+    this.windSpeeds = [];
+    this.windSpeedNames = [];
+    this.temperatures = [];
+    this.pressures = [];
+
+    // Initialize
+    this.xml = xml;
+    this.container = container;
+
+    // Run
+    this.parseYrData();
+}
+/**
+ * Return weather symbol sprites as laid out at http://om.yr.no/forklaring/symbol/
+ */
+Meteogram.prototype.getSymbolSprites = function (symbolSize) {
+    return {
+        '01d': {
+            x: 0,
+            y: 0
+        },
+        '01n': {
+            x: symbolSize,
+            y: 0
+        },
+        '16': {
+            x: 2 * symbolSize,
+            y: 0
+        },
+        '02d': {
+            x: 0,
+            y: symbolSize
+        },
+        '02n': {
+            x: symbolSize,
+            y: symbolSize
+        },
+        '03d': {
+            x: 0,
+            y: 2 * symbolSize
+        },
+        '03n': {
+            x: symbolSize,
+            y: 2 * symbolSize
+        },
+        '17': {
+            x: 2 * symbolSize,
+            y: 2 * symbolSize
+        },
+        '04': {
+            x: 0,
+            y: 3 * symbolSize
+        },
+        '05d': {
+            x: 0,
+            y: 4 * symbolSize
+        },
+        '05n': {
+            x: symbolSize,
+            y: 4 * symbolSize
+        },
+        '18': {
+            x: 2 * symbolSize,
+            y: 4 * symbolSize
+        },
+        '06d': {
+            x: 0,
+            y: 5 * symbolSize
+        },
+        '06n': {
+            x: symbolSize,
+            y: 5 * symbolSize
+        },
+        '07d': {
+            x: 0,
+            y: 6 * symbolSize
+        },
+        '07n': {
+            x: symbolSize,
+            y: 6 * symbolSize
+        },
+        '08d': {
+            x: 0,
+            y: 7 * symbolSize
+        },
+        '08n': {
+            x: symbolSize,
+            y: 7 * symbolSize
+        },
+        '19': {
+            x: 2 * symbolSize,
+            y: 7 * symbolSize
+        },
+        '09': {
+            x: 0,
+            y: 8 * symbolSize
+        },
+        '10': {
+            x: 0,
+            y: 9 * symbolSize
+        },
+        '11': {
+            x: 0,
+            y: 10 * symbolSize
+        },
+        '12': {
+            x: 0,
+            y: 11 * symbolSize
+        },
+        '13': {
+            x: 0,
+            y: 12 * symbolSize
+        },
+        '14': {
+            x: 0,
+            y: 13 * symbolSize
+        },
+        '15': {
+            x: 0,
+            y: 14 * symbolSize
+        },
+        '20d': {
+            x: 0,
+            y: 15 * symbolSize
+        },
+        '20n': {
+            x: symbolSize,
+            y: 15 * symbolSize
+        },
+        '20m': {
+            x: 2 * symbolSize,
+            y: 15 * symbolSize
+        },
+        '21d': {
+            x: 0,
+            y: 16 * symbolSize
+        },
+        '21n': {
+            x: symbolSize,
+            y: 16 * symbolSize
+        },
+        '21m': {
+            x: 2 * symbolSize,
+            y: 16 * symbolSize
+        },
+        '22': {
+            x: 0,
+            y: 17 * symbolSize
+        },
+        '23': {
+            x: 0,
+            y: 18 * symbolSize
+        }
+    };
+};
+
+
+/**
+ * Function to smooth the temperature line. The original data provides only whole degrees,
+ * which makes the line graph look jagged. So we apply a running mean on it, but preserve
+ * the unaltered value in the tooltip.
+ */
+Meteogram.prototype.smoothLine = function (data) {
+    var i = data.length,
+        sum,
+        value;
+
+    while (i--) {
+        data[i].value = value = data[i].y; // preserve value for tooltip
+
+        // Set the smoothed value to the average of the closest points, but don't allow
+        // it to differ more than 0.5 degrees from the given value
+        sum = (data[i - 1] || data[i]).y + value + (data[i + 1] || data[i]).y;
+        data[i].y = Math.max(value - 0.5, Math.min(sum / 3, value + 0.5));
+    }
+};
+
+/**
+ * Callback function that is called from Highcharts on hovering each point and returns
+ * HTML for the tooltip.
+ */
+Meteogram.prototype.tooltipFormatter = function (tooltip) {
+
+    // Create the header with reference to the time interval
+    var index = tooltip.points[0].point.index,
+        ret = '<small>' + Highcharts.dateFormat('%A, %b %e, %H:%M', tooltip.x) + '-' +
+            Highcharts.dateFormat('%H:%M', tooltip.points[0].point.to) + '</small><br>';
+
+    // Symbol text
+    ret += '<b>' + this.symbolNames[index] + '</b>';
+
+    ret += '<table>';
+
+    // Add all series
+    Highcharts.each(tooltip.points, function (point) {
+        var series = point.series;
+        ret += '<tr><td><span style="color:' + series.color + '">\u25CF</span> ' + series.name +
+            ': </td><td style="white-space:nowrap">' + Highcharts.pick(point.point.value, point.y) +
+            series.options.tooltip.valueSuffix + '</td></tr>';
+    });
+
+    // Add wind
+    ret += '<tr><td style="vertical-align: top">\u25CF Wind</td><td style="white-space:nowrap">' + this.windDirectionNames[index] +
+        '<br>' + this.windSpeedNames[index] + ' (' +
+        Highcharts.numberFormat(this.windSpeeds[index], 1) + ' m/s)</td></tr>';
+
+    // Close
+    ret += '</table>';
+
+
+    return ret;
+};
+
+/**
+ * Draw the weather symbols on top of the temperature series. The symbols are sprites of a single
+ * file, defined in the getSymbolSprites function above.
+ */
+Meteogram.prototype.drawWeatherSymbols = function (chart) {
+    var meteogram = this,
+        symbolSprites = this.getSymbolSprites(30);
+
+    $.each(chart.series[0].data, function (i, point) {
+        var sprite,
+            group;
+
+        if (meteogram.resolution > 36e5 || i % 2 === 0) {
+
+            sprite = symbolSprites[meteogram.symbols[i]];
+            if (sprite) {
+
+                // Create a group element that is positioned and clipped at 30 pixels width and height
+                group = chart.renderer.g()
+                    .attr({
+                        translateX: point.plotX + chart.plotLeft - 15,
+                        translateY: point.plotY + chart.plotTop - 30,
+                        zIndex: 5
+                    })
+                    .clip(chart.renderer.clipRect(0, 0, 30, 30))
+                    .add();
+
+                // Position the image inside it at the sprite position
+                chart.renderer.image(
+                    'https://www.highcharts.com/samples/graphics/meteogram-symbols-30px.png',
+                    -sprite.x,
+                    -sprite.y,
+                    90,
+                    570
+                )
+                    .add(group);
+            }
+        }
+    });
+};
+
+/**
+ * Create wind speed symbols for the Beaufort wind scale. The symbols are rotated
+ * around the zero centerpoint.
+ */
+Meteogram.prototype.windArrow = function (name) {
+    var level,
+        path;
+
+    // The stem and the arrow head
+    path = [
+        'M', 0, 7, // base of arrow
+        'L', -1.5, 7,
+        0, 10,
+        1.5, 7,
+        0, 7,
+        0, -10 // top
+    ];
+
+    level = $.inArray(name, ['Calm', 'Light air', 'Light breeze', 'Gentle breeze', 'Moderate breeze',
+        'Fresh breeze', 'Strong breeze', 'Near gale', 'Gale', 'Strong gale', 'Storm',
+        'Violent storm', 'Hurricane']);
+
+    if (level === 0) {
+        path = [];
+    }
+
+    if (level === 2) {
+        path.push('M', 0, -8, 'L', 4, -8); // short line
+    } else if (level >= 3) {
+        path.push(0, -10, 7, -10); // long line
+    }
+
+    if (level === 4) {
+        path.push('M', 0, -7, 'L', 4, -7);
+    } else if (level >= 5) {
+        path.push('M', 0, -7, 'L', 7, -7);
+    }
+
+    if (level === 5) {
+        path.push('M', 0, -4, 'L', 4, -4);
+    } else if (level >= 6) {
+        path.push('M', 0, -4, 'L', 7, -4);
+    }
+
+    if (level === 7) {
+        path.push('M', 0, -1, 'L', 4, -1);
+    } else if (level >= 8) {
+        path.push('M', 0, -1, 'L', 7, -1);
+    }
+
+    return path;
+};
+
+/**
+ * Draw the wind arrows. Each arrow path is generated by the windArrow function above.
+ */
+Meteogram.prototype.drawWindArrows = function (chart) {
+    var meteogram = this;
+
+    $.each(chart.series[0].data, function (i, point) {
+        var arrow, x, y;
+
+        if (meteogram.resolution > 36e5 || i % 2 === 0) {
+
+            // Draw the wind arrows
+            x = point.plotX + chart.plotLeft + 7;
+            y = 255;
+            if (meteogram.windSpeedNames[i] === 'Calm') {
+                arrow = chart.renderer.circle(x, y, 10).attr({
+                    fill: 'none'
+                });
+            } else {
+                arrow = chart.renderer.path(
+                    meteogram.windArrow(meteogram.windSpeedNames[i])
+                ).attr({
+                    rotation: parseInt(meteogram.windDirections[i], 10),
+                    translateX: x, // rotation center
+                    translateY: y // rotation center
+                });
+            }
+            arrow.attr({
+                stroke: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
+                'stroke-width': 1.5,
+                zIndex: 5
+            })
+            .add();
+
+        }
+    });
+};
+
+/**
+ * Draw blocks around wind arrows, below the plot area
+ */
+Meteogram.prototype.drawBlocksForWindArrows = function (chart) {
+    var xAxis = chart.xAxis[0],
+        x,
+        pos,
+        max,
+        isLong,
+        isLast,
+        i;
+
+    for (pos = xAxis.min, max = xAxis.max, i = 0; pos <= max + 36e5; pos += 36e5, i += 1) {
+
+        // Get the X position
+        isLast = pos === max + 36e5;
+        x = Math.round(xAxis.toPixels(pos)) + (isLast ? 0.5 : -0.5);
+
+        // Draw the vertical dividers and ticks
+        if (this.resolution > 36e5) {
+            isLong = pos % this.resolution === 0;
+        } else {
+            isLong = i % 2 === 0;
+        }
+        chart.renderer.path(['M', x, chart.plotTop + chart.plotHeight + (isLong ? 0 : 28),
+            'L', x, chart.plotTop + chart.plotHeight + 32, 'Z'])
+            .attr({
+                'stroke': chart.options.chart.plotBorderColor,
+                'stroke-width': 1
+            })
+            .add();
+    }
+};
+
+/**
+ * Get the title based on the XML data
+ */
+Meteogram.prototype.getTitle = function () {
+    return 'Meteogram for ' + this.xml.location.name + ', ' + this.xml.location.country;
+};
+
+/**
+ * Build and return the Highcharts options structure
+ */
+Meteogram.prototype.getChartOptions = function () {
+    var meteogram = this;
+
+    return {
+        chart: {
+            renderTo: this.container,
+            marginBottom: 70,
+            marginRight: 40,
+            marginTop: 50,
+            plotBorderWidth: 1,
+            width: 800,
+            height: 310
+        },
+
+        title: {
+            text: this.getTitle(),
+            align: 'left'
+        },
+
+        credits: {
+            text: 'Forecast from <a href="http://yr.no">yr.no</a>',
+            href: this.xml.credit.link['@attributes'].url,
+            position: {
+                x: -40
+            }
+        },
+
+        tooltip: {
+            shared: true,
+            useHTML: true,
+            formatter: function () {
+                return meteogram.tooltipFormatter(this);
+            }
+        },
+
+        xAxis: [{ // Bottom X axis
+            type: 'datetime',
+            tickInterval: 2 * 36e5, // two hours
+            minorTickInterval: 36e5, // one hour
+            tickLength: 0,
+            gridLineWidth: 1,
+            gridLineColor: (Highcharts.theme && Highcharts.theme.background2) || '#F0F0F0',
+            startOnTick: false,
+            endOnTick: false,
+            minPadding: 0,
+            maxPadding: 0,
+            offset: 30,
+            showLastLabel: true,
+            labels: {
+                format: '{value:%H}'
+            }
+        }, { // Top X axis
+            linkedTo: 0,
+            type: 'datetime',
+            tickInterval: 24 * 3600 * 1000,
+            labels: {
+                format: '{value:<span style="font-size: 12px; font-weight: bold">%a</span> %b %e}',
+                align: 'left',
+                x: 3,
+                y: -5
+            },
+            opposite: true,
+            tickLength: 20,
+            gridLineWidth: 1
+        }],
+
+        yAxis: [{ // temperature axis
+            title: {
+                text: null
+            },
+            labels: {
+                format: '{value}°',
+                style: {
+                    fontSize: '10px'
+                },
+                x: -3
+            },
+            plotLines: [{ // zero plane
+                value: 0,
+                color: '#BBBBBB',
+                width: 1,
+                zIndex: 2
+            }],
+            // Custom positioner to provide even temperature ticks from top down
+            tickPositioner: function () {
+                var max = Math.ceil(this.max) + 1,
+                    pos = max - 12, // start
+                    ret;
+
+                if (pos < this.min) {
+                    ret = [];
+                    while (pos <= max) {
+                        ret.push(pos += 1);
+                    }
+                } // else return undefined and go auto
+
+                return ret;
+
+            },
+            maxPadding: 0.3,
+            tickInterval: 1,
+            gridLineColor: (Highcharts.theme && Highcharts.theme.background2) || '#F0F0F0'
+
+        }, { // precipitation axis
+            title: {
+                text: null
+            },
+            labels: {
+                enabled: false
+            },
+            gridLineWidth: 0,
+            tickLength: 0
+
+        }, { // Air pressure
+            allowDecimals: false,
+            title: { // Title on top of axis
+                text: 'hPa',
+                offset: 0,
+                align: 'high',
+                rotation: 0,
+                style: {
+                    fontSize: '10px',
+                    color: Highcharts.getOptions().colors[2]
+                },
+                textAlign: 'left',
+                x: 3
+            },
+            labels: {
+                style: {
+                    fontSize: '8px',
+                    color: Highcharts.getOptions().colors[2]
+                },
+                y: 2,
+                x: 3
+            },
+            gridLineWidth: 0,
+            opposite: true,
+            showLastLabel: false
+        }],
+
+        legend: {
+            enabled: false
+        },
+
+        plotOptions: {
+            series: {
+                pointPlacement: 'between'
+            }
+        },
+
+
+        series: [{
+            name: 'Temperature',
+            data: this.temperatures,
+            type: 'spline',
+            marker: {
+                enabled: false,
+                states: {
+                    hover: {
+                        enabled: true
+                    }
+                }
+            },
+            tooltip: {
+                valueSuffix: '°C'
+            },
+            zIndex: 1,
+            color: '#FF3333',
+            negativeColor: '#48AFE8'
+        }, {
+            name: 'Precipitation',
+            data: this.precipitations,
+            type: 'column',
+            color: '#68CFE8',
+            yAxis: 1,
+            groupPadding: 0,
+            pointPadding: 0,
+            borderWidth: 0,
+            shadow: false,
+            dataLabels: {
+                enabled: true,
+                formatter: function () {
+                    if (this.y > 0) {
+                        return this.y;
+                    }
+                },
+                style: {
+                    fontSize: '8px'
+                }
+            },
+            tooltip: {
+                valueSuffix: 'mm'
+            }
+        }, {
+            name: 'Air pressure',
+            color: Highcharts.getOptions().colors[2],
+            data: this.pressures,
+            marker: {
+                enabled: false
+            },
+            shadow: false,
+            tooltip: {
+                valueSuffix: ' hPa'
+            },
+            dashStyle: 'shortdot',
+            yAxis: 2
+        }]
+    };
+};
+
+/**
+ * Post-process the chart from the callback function, the second argument to Highcharts.Chart.
+ */
+Meteogram.prototype.onChartLoad = function (chart) {
+
+    this.drawWeatherSymbols(chart);
+    this.drawWindArrows(chart);
+    this.drawBlocksForWindArrows(chart);
+
+};
+
+/**
+ * Create the chart. This function is called async when the data file is loaded and parsed.
+ */
+Meteogram.prototype.createChart = function () {
+    var meteogram = this;
+    this.chart = new Highcharts.Chart(this.getChartOptions(), function (chart) {
+        meteogram.onChartLoad(chart);
+    });
+};
+
+/**
+ * Handle the data. This part of the code is not Highcharts specific, but deals with yr.no's
+ * specific data format
+ */
+Meteogram.prototype.parseYrData = function () {
+
+    var meteogram = this,
+        xml = this.xml,
+        pointStart;
+
+    if (!xml || !xml.forecast) {
+        $('#loading').html('<i class="fa fa-frown-o"></i> Failed loading data, please try again later');
+        return;
+    }
+
+    // The returned xml variable is a JavaScript representation of the provided XML,
+    // generated on the server by running PHP simple_load_xml and converting it to
+    // JavaScript by json_encode.
+    $.each(xml.forecast.tabular.time, function (i, time) {
+        // Get the times - only Safari can't parse ISO8601 so we need to do some replacements
+        var from = time['@attributes'].from + ' UTC',
+            to = time['@attributes'].to + ' UTC';
+
+        from = from.replace(/-/g, '/').replace('T', ' ');
+        from = Date.parse(from);
+        to = to.replace(/-/g, '/').replace('T', ' ');
+        to = Date.parse(to);
+
+        if (to > pointStart + 4 * 24 * 36e5) {
+            return;
+        }
+
+        // If it is more than an hour between points, show all symbols
+        if (i === 0) {
+            meteogram.resolution = to - from;
+        }
+
+        // Populate the parallel arrays
+        meteogram.symbols.push(time.symbol['@attributes']['var'].match(/[0-9]{2}[dnm]?/)[0]); // eslint-disable-line dot-notation
+        meteogram.symbolNames.push(time.symbol['@attributes'].name);
+
+        meteogram.temperatures.push({
+            x: from,
+            y: parseInt(time.temperature['@attributes'].value, 10),
+            // custom options used in the tooltip formatter
+            to: to,
+            index: i
+        });
+
+        meteogram.precipitations.push({
+            x: from,
+            y: parseFloat(time.precipitation['@attributes'].value)
+        });
+        meteogram.windDirections.push(parseFloat(time.windDirection['@attributes'].deg));
+        meteogram.windDirectionNames.push(time.windDirection['@attributes'].name);
+        meteogram.windSpeeds.push(parseFloat(time.windSpeed['@attributes'].mps));
+        meteogram.windSpeedNames.push(time.windSpeed['@attributes'].name);
+
+        meteogram.pressures.push({
+            x: from,
+            y: parseFloat(time.pressure['@attributes'].value)
+        });
+
+        if (i === 0) {
+            pointStart = (from + to) / 2;
+        }
+    });
+
+    // Smooth the line
+    this.smoothLine(this.temperatures);
+
+    // Create the chart when the data is loaded
+    this.createChart();
+};
+// End of the Meteogram protype
+
+
+
+$(function () { // On DOM ready...
+
+    // Set the hash to the yr.no URL we want to parse
+    if (!location.hash) {
+        var place = 'United_Kingdom/England/London';
+        //place = 'France/Rhône-Alpes/Val_d\'Isère~2971074';
+        //place = 'Norway/Sogn_og_Fjordane/Vik/Målset';
+        //place = 'United_States/California/San_Francisco';
+        //place = 'United_States/Minnesota/Minneapolis';
+        location.hash = 'https://www.yr.no/place/' + place + '/forecast_hour_by_hour.xml';
+
+    }
+
+    // Then get the XML file through Highcharts' jsonp provider, see
+    // https://github.com/highcharts/highcharts/blob/master/samples/data/jsonp.php
+    // for source code.
+    $.getJSON(
+        'https://www.highcharts.com/samples/data/jsonp.php?url=' + location.hash.substr(1) + '&callback=?',
+        function (xml) {
+            window.meteogram = new Meteogram(xml, 'container');
+        }
+    );
+
+});
+		</script>
+	</head>
+	<body>
+
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
+
+<div id="container" style="width: 800px; height: 310px; margin: 0 auto">
+    <div style="margin-top: 100px; text-align: center" id="loading">
+        <i class="fa fa-spinner fa-spin"></i> Loading data from external source
+    </div>
+</div>
+<!--
+<div style="width: 800px; margin: 0 auto">
+    <a href="#http://www.yr.no/place/United_Kingdom/England/London/forecast_hour_by_hour.xml">London</a>,
+    <a href="#http://www.yr.no/place/France/Rhône-Alpes/Val_d\'Isère~2971074/forecast_hour_by_hour.xml">Val d'Isère</a>,
+    <a href="#http://www.yr.no/place/United_States/California/San_Francisco/forecast_hour_by_hour.xml">San Francisco</a>,
+    <a href="#http://www.yr.no/place/Norway/Vik/Vikafjell/forecast_hour_by_hour.xml">Vikjafjellet</a>
+</div>
+-->
+	</body>
+</html>

js/lib/highcharts/examples/combo-multi-axes/index.htm

@@ -0,0 +1,129 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            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'],
+            crosshair: true
+        }],
+        yAxis: [{ // Primary yAxis
+            labels: {
+                format: '{value}°C',
+                style: {
+                    color: Highcharts.getOptions().colors[2]
+                }
+            },
+            title: {
+                text: 'Temperature',
+                style: {
+                    color: Highcharts.getOptions().colors[2]
+                }
+            },
+            opposite: true
+
+        }, { // Secondary yAxis
+            gridLineWidth: 0,
+            title: {
+                text: 'Rainfall',
+                style: {
+                    color: Highcharts.getOptions().colors[0]
+                }
+            },
+            labels: {
+                format: '{value} mm',
+                style: {
+                    color: Highcharts.getOptions().colors[0]
+                }
+            }
+
+        }, { // Tertiary yAxis
+            gridLineWidth: 0,
+            title: {
+                text: 'Sea-Level Pressure',
+                style: {
+                    color: Highcharts.getOptions().colors[1]
+                }
+            },
+            labels: {
+                format: '{value} mb',
+                style: {
+                    color: Highcharts.getOptions().colors[1]
+                }
+            },
+            opposite: true
+        }],
+        tooltip: {
+            shared: true
+        },
+        legend: {
+            layout: 'vertical',
+            align: 'left',
+            x: 80,
+            verticalAlign: 'top',
+            y: 55,
+            floating: true,
+            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
+        },
+        series: [{
+            name: 'Rainfall',
+            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],
+            tooltip: {
+                valueSuffix: ' mm'
+            }
+
+        }, {
+            name: 'Sea-Level Pressure',
+            type: 'spline',
+            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',
+            tooltip: {
+                valueSuffix: ' mb'
+            }
+
+        }, {
+            name: 'Temperature',
+            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],
+            tooltip: {
+                valueSuffix: ' °C'
+            }
+        }]
+    });
+});
+
+
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/combo-regression/index.htm

@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        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="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/combo-timeline/index.htm

@@ -0,0 +1,422 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+#container {
+    min-width: 300px;
+    max-width: 1000px;
+    height: 420px;
+    margin: 1em auto;
+}
+
+		</style>
+		<script type="text/javascript">
+/**
+ * This is an advanced demo of setting up Highcharts with the flags feature borrowed from Highstock.
+ * It also shows custom graphics drawn in the chart area on chart load.
+ */
+
+
+/**
+ * Fires on chart load, called from the chart.events.load option.
+ */
+function onChartLoad() {
+
+    var centerX = 140,
+        centerY = 110,
+        path = [],
+        angle,
+        radius,
+        badgeColor = Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.2).get(),
+        spike,
+        empImage,
+        big5,
+        label,
+        left,
+        right,
+        years,
+        renderer;
+
+    if (this.chartWidth < 530) {
+        return;
+    }
+
+    // Draw the spiked disc
+    for (angle = 0; angle < 2 * Math.PI; angle += Math.PI / 24) {
+        radius = spike ? 80 : 70;
+        path.push(
+            'L',
+            centerX + radius * Math.cos(angle),
+            centerY + radius * Math.sin(angle)
+        );
+        spike = !spike;
+    }
+    path[0] = 'M';
+    path.push('z');
+    this.renderer.path(path)
+        .attr({
+            fill: badgeColor,
+            zIndex: 6
+        })
+        .add();
+
+    // Employee image overlay
+    empImage = this.renderer.path(path)
+        .attr({
+            zIndex: 7,
+            opacity: 0,
+            stroke: badgeColor,
+            'stroke-width': 1
+        })
+        .add();
+
+    // Big 5
+    big5 = this.renderer.text('5')
+        .attr({
+            zIndex: 6
+        })
+        .css({
+            color: 'white',
+            fontSize: '100px',
+            fontStyle: 'italic',
+            fontFamily: '\'Brush Script MT\', sans-serif'
+        })
+        .add();
+    big5.attr({
+        x: centerX - big5.getBBox().width / 2,
+        y: centerY + 14
+    });
+
+    // Draw the label
+    label = this.renderer.text('Highcharts Anniversary')
+        .attr({
+            zIndex: 6
+        })
+        .css({
+            color: '#FFFFFF'
+        })
+        .add();
+
+    left = centerX - label.getBBox().width / 2;
+    right = centerX + label.getBBox().width / 2;
+
+    label.attr({
+        x: left,
+        y: centerY + 44
+    });
+
+    // The band
+    left = centerX - 90;
+    right = centerX + 90;
+    this.renderer
+        .path([
+            'M', left, centerY + 30,
+            'L', right, centerY + 30,
+            right, centerY + 50,
+            left, centerY + 50,
+            'z',
+            'M', left, centerY + 40,
+            'L', left - 20, centerY + 40,
+            left - 10, centerY + 50,
+            left - 20, centerY + 60,
+            left + 10, centerY + 60,
+            left, centerY + 50,
+            left + 10, centerY + 60,
+            left + 10, centerY + 50,
+            left, centerY + 50,
+            'z',
+            'M', right, centerY + 40,
+            'L', right + 20, centerY + 40,
+            right + 10, centerY + 50,
+            right + 20, centerY + 60,
+            right - 10, centerY + 60,
+            right, centerY + 50,
+            right - 10, centerY + 60,
+            right - 10, centerY + 50,
+            right, centerY + 50,
+            'z'
+        ])
+        .attr({
+            fill: badgeColor,
+            stroke: '#FFFFFF',
+            'stroke-width': 1,
+            zIndex: 5
+        })
+        .add();
+
+    // 2009-2014
+    years = this.renderer.text('2009-2014')
+        .attr({
+            zIndex: 6
+        })
+        .css({
+            color: '#FFFFFF',
+            fontStyle: 'italic',
+            fontSize: '10px'
+        })
+        .add();
+    years.attr({
+        x: centerX - years.getBBox().width / 2,
+        y: centerY + 62
+    });
+
+
+    // Prepare mouseover
+    renderer = this.renderer;
+    if (renderer.defs) { // is SVG
+        $.each(this.get('employees').points, function () {
+            var point = this,
+                pattern;
+            if (point.image) {
+                pattern = renderer.createElement('pattern').attr({
+                    id: 'pattern-' + point.image,
+                    patternUnits: 'userSpaceOnUse',
+                    width: 400,
+                    height: 400
+                }).add(renderer.defs);
+                renderer.image(
+                    'https://www.highcharts.com/images/employees2014/' + point.image + '.jpg',
+                    centerX - 80,
+                    centerY - 80,
+                    160,
+                    213
+                ).add(pattern);
+
+                Highcharts.addEvent(point, 'mouseOver', function () {
+                    empImage
+                        .attr({
+                            fill: 'url(#pattern-' + point.image + ')'
+                        })
+                        .animate({ opacity: 1 }, { duration: 500 });
+                });
+                Highcharts.addEvent(point, 'mouseOut', function () {
+                    empImage.animate({ opacity: 0 }, { duration: 500 });
+                });
+            }
+        });
+    }
+}
+
+$(function () {
+    var options = {
+
+        chart: {
+            events: {
+                load: onChartLoad
+            }
+        },
+
+        xAxis: {
+            type: 'datetime',
+            minTickInterval: 365 * 24 * 36e5,
+            labels: {
+                align: 'left'
+            },
+            plotBands: [{
+                from: Date.UTC(2009, 10, 27),
+                to: Date.UTC(2010, 11, 1),
+                color: '#EFFFFF',
+                label: {
+                    text: '<em>Offices:</em><br> Torstein\'s basement',
+                    style: {
+                        color: '#999999'
+                    },
+                    y: 180
+                }
+            }, {
+                from: Date.UTC(2010, 11, 1),
+                to: Date.UTC(2013, 9, 1),
+                color: '#FFFFEF',
+                label: {
+                    text: '<em>Offices:</em><br> Tomtebu',
+                    style: {
+                        color: '#999999'
+                    },
+                    y: 30
+                }
+            }, {
+                from: Date.UTC(2013, 9, 1),
+                to: Date.UTC(2014, 10, 27),
+                color: '#FFEFFF',
+                label: {
+                    text: '<em>Offices:</em><br> VikØrsta',
+                    style: {
+                        color: '#999999'
+                    },
+                    y: 30
+                }
+            }]
+
+        },
+
+        title: {
+            text: 'Highcharts and Highsoft timeline'
+        },
+
+        tooltip: {
+            style: {
+                width: '250px'
+            }
+        },
+
+        yAxis: [{
+            max: 100,
+            labels: {
+                enabled: false
+            },
+            title: {
+                text: ''
+            },
+            gridLineColor: 'rgba(0, 0, 0, 0.07)'
+        }, {
+            allowDecimals: false,
+            max: 15,
+            labels: {
+                style: {
+                    color: Highcharts.getOptions().colors[2]
+                }
+            },
+            title: {
+                text: 'Employees',
+                style: {
+                    color: Highcharts.getOptions().colors[2]
+                }
+            },
+            opposite: true,
+            gridLineWidth: 0
+        }],
+
+        plotOptions: {
+            series: {
+                marker: {
+                    enabled: false,
+                    symbol: 'circle',
+                    radius: 2
+                },
+                fillOpacity: 0.5
+            },
+            flags: {
+                tooltip: {
+                    xDateFormat: '%B %e, %Y'
+                }
+            }
+        },
+
+        series: [{
+            type: 'spline',
+            id: 'google-trends',
+            dashStyle: 'dash',
+            name: 'Google search for <em>highcharts</em>',
+            data: [{ x: 1258322400000, /* November 2009 */ y: 0 }, { x: 1260961200000, y: 5 }, { x: 1263639600000, y: 7 }, { x: 1266188400000, y: 5 }, { x: 1268740800000, y: 6 }, { x: 1271368800000, y: 8 }, { x: 1274004000000, y: 11 }, { x: 1276639200000, y: 9 }, { x: 1279274400000, y: 12 }, { x: 1281952800000, y: 13 }, { x: 1284588000000, y: 17 }, { x: 1287223200000, y: 17 }, { x: 1289858400000, y: 18 }, { x: 1292497200000, y: 20 }, { x: 1295175600000, y: 20 }, { x: 1297724400000, y: 27 }, { x: 1300276800000, y: 32 }, { x: 1302904800000, y: 29 }, { x: 1305540000000, y: 34 }, { x: 1308175200000, y: 34 }, { x: 1310810400000, y: 36 }, { x: 1313488800000, y: 43 }, { x: 1316124000000, y: 44 }, { x: 1318759200000, y: 42 }, { x: 1321394400000, y: 47 }, { x: 1324033200000, y: 46 }, { x: 1326711600000, y: 50 }, { x: 1329303600000, y: 57 }, { x: 1331899200000, y: 54 }, { x: 1334527200000, y: 59 }, { x: 1337162400000, y: 62 }, { x: 1339797600000, y: 66 }, { x: 1342432800000, y: 61 }, { x: 1345111200000, y: 68 }, { x: 1347746400000, y: 67 }, { x: 1350381600000, y: 73 }, { x: 1353016800000, y: 63 }, { x: 1355655600000, y: 54 }, { x: 1358334000000, y: 67 }, { x: 1360882800000, y: 74 }, { x: 1363435200000, y: 81 }, { x: 1366063200000, y: 89 }, { x: 1368698400000, y: 83 }, { x: 1371333600000, y: 88 }, { x: 1373968800000, y: 86 }, { x: 1376647200000, y: 81 }, { x: 1379282400000, y: 83 }, { x: 1381917600000, y: 95 }, { x: 1384552800000, y: 86 }, { x: 1387191600000, y: 83 }, { x: 1389870000000, y: 89 }, { x: 1392418800000, y: 90 }, { x: 1394971200000, y: 94 }, { x: 1397599200000, y: 100 }, { x: 1400234400000, y: 100 }, { x: 1402869600000, y: 99 }, { x: 1405504800000, y: 99 }, { x: 1408183200000, y: 93 }, { x: 1410818400000, y: 97 }, { x: 1413453600000, y: 98 }],
+            tooltip: {
+                xDateFormat: '%B %Y',
+                valueSuffix: ' % of best month'
+            }
+        }, {
+            name: 'Revenue',
+            id: 'revenue',
+            type: 'area',
+            data: [[1257033600000, 2], [1259625600000, 3], [1262304000000, 2], [1264982400000, 3], [1267401600000, 4], [1270080000000, 4], [1272672000000, 4], [1275350400000, 4], [1277942400000, 5], [1280620800000, 7], [1283299200000, 6], [1285891200000, 9], [1288569600000, 10], [1291161600000, 8], [1293840000000, 10], [1296518400000, 13], [1298937600000, 15], [1301616000000, 14], [1304208000000, 15], [1306886400000, 16], [1309478400000, 22], [1312156800000, 19], [1314835200000, 20], [1317427200000, 32], [1320105600000, 34], [1322697600000, 36], [1325376000000, 34], [1328054400000, 40], [1330560000000, 37], [1333238400000, 35], [1335830400000, 40], [1338508800000, 38], [1341100800000, 39], [1343779200000, 43], [1346457600000, 49], [1349049600000, 43], [1351728000000, 54], [1354320000000, 44], [1356998400000, 43], [1359676800000, 43], [1362096000000, 52], [1364774400000, 52], [1367366400000, 56], [1370044800000, 62], [1372636800000, 66], [1375315200000, 62], [1377993600000, 63], [1380585600000, 60], [1383264000000, 60], [1385856000000, 58], [1388534400000, 65], [1391212800000, 52], [1393632000000, 72], [1396310400000, 57], [1398902400000, 70], [1401580800000, 63], [1404172800000, 65], [1406851200000, 65], [1409529600000, 89], [1412121600000, 100]],
+            tooltip: {
+                xDateFormat: '%B %Y',
+                valueSuffix: ' % of best month'
+            }
+
+        }, {
+            yAxis: 1,
+            name: 'Highsoft employees',
+            id: 'employees',
+            type: 'area',
+            step: 'left',
+            tooltip: {
+                headerFormat: '<span style="font-size: 11px;color:#666">{point.x:%B %e, %Y}</span><br>',
+                pointFormat: '{point.name}<br><b>{point.y}</b>',
+                valueSuffix: ' employees'
+            },
+            data: [
+                { x: Date.UTC(2009, 10, 1), y: 1, name: 'Torstein worked alone', image: 'Torstein' },
+                { x: Date.UTC(2010, 10, 20), y: 2, name: 'Grethe joined', image: 'Grethe' },
+                { x: Date.UTC(2011, 3, 1), y: 3, name: 'Erik joined', image: null },
+                { x: Date.UTC(2011, 7, 1), y: 4, name: 'Gert joined', image: 'Gert' },
+                { x: Date.UTC(2011, 7, 15), y: 5, name: 'Hilde joined', image: 'Hilde' },
+                { x: Date.UTC(2012, 5, 1), y: 6, name: 'Guro joined', image: 'Guro' },
+                { x: Date.UTC(2012, 8, 1), y: 5, name: 'Erik left', image: null },
+                { x: Date.UTC(2012, 8, 15), y: 6, name: 'Anne Jorunn joined', image: 'AnneJorunn' },
+                { x: Date.UTC(2013, 0, 1), y: 7, name: 'Hilde T. joined', image: null },
+                { x: Date.UTC(2013, 7, 1), y: 8, name: 'Jon Arild joined', image: 'JonArild' },
+                { x: Date.UTC(2013, 7, 20), y: 9, name: 'Øystein joined', image: 'Oystein' },
+                { x: Date.UTC(2013, 9, 1), y: 10, name: 'Stephane joined', image: 'Stephane' },
+                { x: Date.UTC(2014, 9, 1), y: 11, name: 'Anita joined', image: 'Anita' },
+                { x: Date.UTC(2014, 10, 27), y: 11, name: ' ', image: null }
+            ]
+
+        }]
+    };
+
+    // Add flags for important milestones. This requires Highstock.
+    if (Highcharts.seriesTypes.flags) {
+        options.series.push({
+            type: 'flags',
+            name: 'Cloud',
+            color: '#333333',
+            shape: 'squarepin',
+            y: -80,
+            data: [
+                { x: Date.UTC(2014, 4, 1), text: 'Highcharts Cloud Beta', title: 'Cloud', shape: 'squarepin' }
+            ],
+            showInLegend: false
+        }, {
+            type: 'flags',
+            name: 'Highmaps',
+            color: '#333333',
+            shape: 'squarepin',
+            y: -55,
+            data: [
+                { x: Date.UTC(2014, 5, 13), text: 'Highmaps version 1.0 released', title: 'Maps' }
+            ],
+            showInLegend: false
+        }, {
+            type: 'flags',
+            name: 'Highcharts',
+            color: '#333333',
+            shape: 'circlepin',
+            data: [
+                { x: Date.UTC(2009, 10, 27), text: 'Highcharts version 1.0 released', title: '1.0' },
+                { x: Date.UTC(2010, 6, 13), text: 'Ported from canvas to SVG rendering', title: '2.0' },
+                { x: Date.UTC(2010, 10, 23), text: 'Dynamically resize and scale to text labels', title: '2.1' },
+                { x: Date.UTC(2011, 9, 18), text: 'Highstock version 1.0 released', title: 'Stock', shape: 'squarepin' },
+                { x: Date.UTC(2012, 7, 24), text: 'Gauges, polar charts and range series', title: '2.3' },
+                { x: Date.UTC(2013, 2, 22), text: 'Multitouch support, more series types', title: '3.0' },
+                { x: Date.UTC(2014, 3, 22), text: '3D charts, heatmaps', title: '4.0' }
+            ],
+            showInLegend: false
+        }, {
+            type: 'flags',
+            name: 'Events',
+            color: '#333333',
+            fillColor: 'rgba(255,255,255,0.8)',
+            data: [
+                { x: Date.UTC(2012, 10, 1), text: 'Highsoft won "Entrepeneur of the Year" in Sogn og Fjordane, Norway', title: 'Award' },
+                { x: Date.UTC(2012, 11, 25), text: 'Packt Publishing published <em>Learning Highcharts by Example</em>. Since then, many other books are written about Highcharts.', title: 'First book' },
+                { x: Date.UTC(2013, 4, 25), text: 'Highsoft nominated Norway\'s Startup of the Year', title: 'Award' },
+                { x: Date.UTC(2014, 4, 25), text: 'Highsoft nominated Best Startup in Nordic Startup Awards', title: 'Award' }
+            ],
+            onSeries: 'revenue',
+            showInLegend: false
+        });
+    }
+
+    $('#container').highcharts(options);
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/stock/highstock.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+<div id="container"></div>
+	</body>
+</html>

js/lib/highcharts/examples/combo/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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        title: {
+            text: 'Combination chart'
+        },
+        xAxis: {
+            categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
+        },
+        labels: {
+            items: [{
+                html: 'Total fruit consumption',
+                style: {
+                    left: '50px',
+                    top: '18px',
+                    color: (Highcharts.theme && Highcharts.theme.textColor) || '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],
+            marker: {
+                lineWidth: 2,
+                lineColor: Highcharts.getOptions().colors[3],
+                fillColor: 'white'
+            }
+        }, {
+            type: 'pie',
+            name: 'Total consumption',
+            data: [{
+                name: 'Jane',
+                y: 13,
+                color: Highcharts.getOptions().colors[0] // Jane's color
+            }, {
+                name: 'John',
+                y: 23,
+                color: Highcharts.getOptions().colors[1] // John's color
+            }, {
+                name: 'Joe',
+                y: 19,
+                color: Highcharts.getOptions().colors[2] // Joe's color
+            }],
+            center: [100, 80],
+            size: 100,
+            showInLegend: false,
+            dataLabels: {
+                enabled: false
+            }
+        }]
+    });
+});
+
+
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/dynamic-click-to-add/index.htm

@@ -0,0 +1,89 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            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: {
+            gridLineWidth: 1,
+            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: [{
+            data: [[20, 20], [80, 80]]
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; max-width: 700px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/dynamic-master-detail/index.htm

@@ -0,0 +1,260 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
+        var detailChart;
+
+        $(document).ready(function () {
+
+            // create the detail chart
+            function createDetail(masterChart) {
+
+                // prepare the detail chart
+                var detailData = [],
+                    detailStart = data[0][0];
+
+                $.each(masterChart.series[0].data, function () {
+                    if (this.x >= detailStart) {
+                        detailData.push(this.y);
+                    }
+                });
+
+                // create a detail chart referenced by a global variable
+                detailChart = $('#detail-container').highcharts({
+                    chart: {
+                        marginBottom: 120,
+                        reflow: false,
+                        marginLeft: 50,
+                        marginRight: 20,
+                        style: {
+                            position: 'absolute'
+                        }
+                    },
+                    credits: {
+                        enabled: false
+                    },
+                    title: {
+                        text: 'Historical USD to EUR Exchange Rate'
+                    },
+                    subtitle: {
+                        text: 'Select an area by dragging across the lower chart'
+                    },
+                    xAxis: {
+                        type: 'datetime'
+                    },
+                    yAxis: {
+                        title: {
+                            text: null
+                        },
+                        maxZoom: 0.1
+                    },
+                    tooltip: {
+                        formatter: function () {
+                            var point = this.points[0];
+                            return '<b>' + point.series.name + '</b><br/>' + Highcharts.dateFormat('%A %B %e %Y', this.x) + ':<br/>' +
+                                '1 USD = ' + Highcharts.numberFormat(point.y, 2) + ' EUR';
+                        },
+                        shared: true
+                    },
+                    legend: {
+                        enabled: false
+                    },
+                    plotOptions: {
+                        series: {
+                            marker: {
+                                enabled: false,
+                                states: {
+                                    hover: {
+                                        enabled: true,
+                                        radius: 3
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    series: [{
+                        name: 'USD to EUR',
+                        pointStart: detailStart,
+                        pointInterval: 24 * 3600 * 1000,
+                        data: detailData
+                    }],
+
+                    exporting: {
+                        enabled: false
+                    }
+
+                }).highcharts(); // return chart
+            }
+
+            // create the master chart
+            function createMaster() {
+                $('#master-container').highcharts({
+                    chart: {
+                        reflow: false,
+                        borderWidth: 0,
+                        backgroundColor: null,
+                        marginLeft: 50,
+                        marginRight: 20,
+                        zoomType: 'x',
+                        events: {
+
+                            // listen to the selection event on the master chart to update the
+                            // extremes of the detail chart
+                            selection: function (event) {
+                                var extremesObject = event.xAxis[0],
+                                    min = extremesObject.min,
+                                    max = extremesObject.max,
+                                    detailData = [],
+                                    xAxis = this.xAxis[0];
+
+                                // reverse engineer the last part of the data
+                                $.each(this.series[0].data, function () {
+                                    if (this.x > min && this.x < max) {
+                                        detailData.push([this.x, this.y]);
+                                    }
+                                });
+
+                                // move the plot bands to reflect the new detail span
+                                xAxis.removePlotBand('mask-before');
+                                xAxis.addPlotBand({
+                                    id: 'mask-before',
+                                    from: data[0][0],
+                                    to: min,
+                                    color: 'rgba(0, 0, 0, 0.2)'
+                                });
+
+                                xAxis.removePlotBand('mask-after');
+                                xAxis.addPlotBand({
+                                    id: 'mask-after',
+                                    from: max,
+                                    to: data[data.length - 1][0],
+                                    color: 'rgba(0, 0, 0, 0.2)'
+                                });
+
+
+                                detailChart.series[0].setData(detailData);
+
+                                return false;
+                            }
+                        }
+                    },
+                    title: {
+                        text: null
+                    },
+                    xAxis: {
+                        type: 'datetime',
+                        showLastTickLabel: true,
+                        maxZoom: 14 * 24 * 3600000, // fourteen days
+                        plotBands: [{
+                            id: 'mask-before',
+                            from: data[0][0],
+                            to: data[data.length - 1][0],
+                            color: 'rgba(0, 0, 0, 0.2)'
+                        }],
+                        title: {
+                            text: null
+                        }
+                    },
+                    yAxis: {
+                        gridLineWidth: 0,
+                        labels: {
+                            enabled: false
+                        },
+                        title: {
+                            text: null
+                        },
+                        min: 0.6,
+                        showFirstLabel: false
+                    },
+                    tooltip: {
+                        formatter: function () {
+                            return false;
+                        }
+                    },
+                    legend: {
+                        enabled: false
+                    },
+                    credits: {
+                        enabled: false
+                    },
+                    plotOptions: {
+                        series: {
+                            fillColor: {
+                                linearGradient: [0, 0, 0, 70],
+                                stops: [
+                                    [0, Highcharts.getOptions().colors[0]],
+                                    [1, 'rgba(255,255,255,0)']
+                                ]
+                            },
+                            lineWidth: 1,
+                            marker: {
+                                enabled: false
+                            },
+                            shadow: false,
+                            states: {
+                                hover: {
+                                    lineWidth: 1
+                                }
+                            },
+                            enableMouseTracking: false
+                        }
+                    },
+
+                    series: [{
+                        type: 'area',
+                        name: 'USD to EUR',
+                        pointInterval: 24 * 3600 * 1000,
+                        pointStart: data[0][0],
+                        data: data
+                    }],
+
+                    exporting: {
+                        enabled: false
+                    }
+
+                }, function (masterChart) {
+                    createDetail(masterChart);
+                })
+                    .highcharts(); // return chart instance
+            }
+
+            // make the container smaller and add a second container for the master chart
+            var $container = $('#container')
+                .css('position', 'relative');
+
+            $('<div id="detail-container">')
+                .appendTo($container);
+
+            $('<div id="master-container">')
+                .css({
+                    position: 'absolute',
+                    top: 300,
+                    height: 100,
+                    width: '100%'
+                })
+                    .appendTo($container);
+
+            // create master and in its callback, create the detail chart
+            createMaster();
+        });
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/dynamic-update/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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $(document).ready(function () {
+        Highcharts.setOptions({
+            global: {
+                useUTC: false
+            }
+        });
+
+        $('#container').highcharts({
+            chart: {
+                type: 'spline',
+                animation: Highcharts.svg, // don't animate in old IE
+                marginRight: 10,
+                events: {
+                    load: function () {
+
+                        // set up the updating of the chart each second
+                        var series = this.series[0];
+                        setInterval(function () {
+                            var x = (new Date()).getTime(), // current time
+                                y = Math.random();
+                            series.addPoint([x, y], true, true);
+                        }, 1000);
+                    }
+                }
+            },
+            title: {
+                text: 'Live random data'
+            },
+            xAxis: {
+                type: 'datetime',
+                tickPixelInterval: 150
+            },
+            yAxis: {
+                title: {
+                    text: 'Value'
+                },
+                plotLines: [{
+                    value: 0,
+                    width: 1,
+                    color: '#808080'
+                }]
+            },
+            tooltip: {
+                formatter: function () {
+                    return '<b>' + this.series.name + '</b><br/>' +
+                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
+                        Highcharts.numberFormat(this.y, 2);
+                }
+            },
+            legend: {
+                enabled: false
+            },
+            exporting: {
+                enabled: false
+            },
+            series: [{
+                name: 'Random data',
+                data: (function () {
+                    // generate an array of random data
+                    var data = [],
+                        time = (new Date()).getTime(),
+                        i;
+
+                    for (i = -19; i <= 0; i += 1) {
+                        data.push({
+                            x: time + i * 1000,
+                            y: Math.random()
+                        });
+                    }
+                    return data;
+                }())
+            }]
+        });
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/error-bar/index.htm

@@ -0,0 +1,98 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            zoomType: 'xy'
+        },
+        title: {
+            text: 'Temperature vs Rainfall'
+        },
+        xAxis: [{
+            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+        }],
+        yAxis: [{ // Primary yAxis
+            labels: {
+                format: '{value} °C',
+                style: {
+                    color: Highcharts.getOptions().colors[1]
+                }
+            },
+            title: {
+                text: 'Temperature',
+                style: {
+                    color: Highcharts.getOptions().colors[1]
+                }
+            }
+        }, { // Secondary yAxis
+            title: {
+                text: 'Rainfall',
+                style: {
+                    color: Highcharts.getOptions().colors[0]
+                }
+            },
+            labels: {
+                format: '{value} mm',
+                style: {
+                    color: Highcharts.getOptions().colors[0]
+                }
+            },
+            opposite: true
+        }],
+
+        tooltip: {
+            shared: true
+        },
+
+        series: [{
+            name: 'Rainfall',
+            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],
+            tooltip: {
+                pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f} mm</b> '
+            }
+        }, {
+            name: 'Rainfall error',
+            type: 'errorbar',
+            yAxis: 1,
+            data: [[48, 51], [68, 73], [92, 110], [128, 136], [140, 150], [171, 179], [135, 143], [142, 149], [204, 220], [189, 199], [95, 110], [52, 56]],
+            tooltip: {
+                pointFormat: '(error range: {point.low}-{point.high} mm)<br/>'
+            }
+        }, {
+            name: 'Temperature',
+            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],
+            tooltip: {
+                pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f}°C</b> '
+            }
+        }, {
+            name: 'Temperature error',
+            type: 'errorbar',
+            data: [[6, 8], [5.9, 7.6], [9.4, 10.4], [14.1, 15.9], [18.0, 20.1], [21.0, 24.0], [23.2, 25.3], [26.1, 27.8], [23.2, 23.9], [18.0, 21.1], [12.9, 14.0], [7.6, 10.0]],
+            tooltip: {
+                pointFormat: '(error range: {point.low}-{point.high}°C)<br/>'
+            }
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+<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="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
+	</body>
+</html>

js/lib/highcharts/examples/funnel/index.htm

@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    $('#container').highcharts({
+        chart: {
+            type: 'funnel',
+            marginRight: 100
+        },
+        title: {
+            text: 'Sales funnel',
+            x: -50
+        },
+        plotOptions: {
+            series: {
+                dataLabels: {
+                    enabled: true,
+                    format: '<b>{point.name}</b> ({point.y:,.0f})',
+                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
+                    softConnector: true
+                },
+                neckWidth: '30%',
+                neckHeight: '25%'
+
+                //-- Other available options
+                // height: pixels or percent
+                // width: pixels or percent
+            }
+        },
+        legend: {
+            enabled: false
+        },
+        series: [{
+            name: 'Unique users',
+            data: [
+                ['Website visits', 15654],
+                ['Downloads', 4064],
+                ['Requested price list', 1987],
+                ['Invoice sent', 976],
+                ['Finalized', 846]
+            ]
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/funnel.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/gauge-activity/index.htm

@@ -0,0 +1,191 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    // Uncomment to style it like Apple Watch
+    /*
+    if (!Highcharts.theme) {
+        Highcharts.setOptions({
+            chart: {
+                backgroundColor: 'black'
+            },
+            colors: ['#F62366', '#9DFF02', '#0CCDD6'],
+            title: {
+                style: {
+                    color: 'silver'
+                }
+            },
+            tooltip: {
+                style: {
+                    color: 'silver'
+                }
+            }
+        });
+    }
+    // */
+
+    Highcharts.chart('container', {
+
+        chart: {
+            type: 'solidgauge',
+            marginTop: 50
+        },
+
+        title: {
+            text: 'Activity',
+            style: {
+                fontSize: '24px'
+            }
+        },
+
+        tooltip: {
+            borderWidth: 0,
+            backgroundColor: 'none',
+            shadow: false,
+            style: {
+                fontSize: '16px'
+            },
+            pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
+            positioner: function (labelWidth, labelHeight) {
+                return {
+                    x: 200 - labelWidth / 2,
+                    y: 180
+                };
+            }
+        },
+
+        pane: {
+            startAngle: 0,
+            endAngle: 360,
+            background: [{ // Track for Move
+                outerRadius: '112%',
+                innerRadius: '88%',
+                backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
+                borderWidth: 0
+            }, { // Track for Exercise
+                outerRadius: '87%',
+                innerRadius: '63%',
+                backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),
+                borderWidth: 0
+            }, { // Track for Stand
+                outerRadius: '62%',
+                innerRadius: '38%',
+                backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
+                borderWidth: 0
+            }]
+        },
+
+        yAxis: {
+            min: 0,
+            max: 100,
+            lineWidth: 0,
+            tickPositions: []
+        },
+
+        plotOptions: {
+            solidgauge: {
+                borderWidth: '34px',
+                dataLabels: {
+                    enabled: false
+                },
+                linecap: 'round',
+                stickyTracking: false
+            }
+        },
+
+        series: [{
+            name: 'Move',
+            borderColor: Highcharts.getOptions().colors[0],
+            data: [{
+                color: Highcharts.getOptions().colors[0],
+                radius: '100%',
+                innerRadius: '100%',
+                y: 80
+            }]
+        }, {
+            name: 'Exercise',
+            borderColor: Highcharts.getOptions().colors[1],
+            data: [{
+                color: Highcharts.getOptions().colors[1],
+                radius: '75%',
+                innerRadius: '75%',
+                y: 65
+            }]
+        }, {
+            name: 'Stand',
+            borderColor: Highcharts.getOptions().colors[2],
+            data: [{
+                color: Highcharts.getOptions().colors[2],
+                radius: '50%',
+                innerRadius: '50%',
+                y: 50
+            }]
+        }]
+    },
+
+    /**
+     * In the chart load callback, add icons on top of the circular shapes
+     */
+    function callback() {
+
+        // Move icon
+        this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8])
+            .attr({
+                'stroke': '#303030',
+                'stroke-linecap': 'round',
+                'stroke-linejoin': 'round',
+                'stroke-width': 2,
+                'zIndex': 10
+            })
+            .translate(190, 26)
+            .add(this.series[2].group);
+
+        // Exercise icon
+        this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8, 'M', 8, -8, 'L', 16, 0, 8, 8])
+            .attr({
+                'stroke': '#303030',
+                'stroke-linecap': 'round',
+                'stroke-linejoin': 'round',
+                'stroke-width': 2,
+                'zIndex': 10
+            })
+            .translate(190, 61)
+            .add(this.series[2].group);
+
+        // Stand icon
+        this.renderer.path(['M', 0, 8, 'L', 0, -8, 'M', -8, 0, 'L', 0, -8, 8, 0])
+            .attr({
+                'stroke': '#303030',
+                'stroke-linecap': 'round',
+                'stroke-linejoin': 'round',
+                'stroke-width': 2,
+                'zIndex': 10
+            })
+            .translate(190, 96)
+            .add(this.series[2].group);
+    });
+
+
+});
+
+		</script>
+	</head>
+	<body>
+<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/solid-gauge.js"></script>
+
+<div id="container" style="width: 400px; height: 400px; margin: 0 auto">
+</div>
+
+	</body>
+</html>

js/lib/highcharts/examples/gauge-clock/index.htm

@@ -0,0 +1,203 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    /**
+     * Get the current time
+     */
+    function getNow() {
+        var now = new Date();
+
+        return {
+            hours: now.getHours() + now.getMinutes() / 60,
+            minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600,
+            seconds: now.getSeconds() * 12 / 60
+        };
+    }
+
+    /**
+     * Pad numbers
+     */
+    function pad(number, length) {
+        // Create an array of the remaining length + 1 and join it with 0's
+        return new Array((length || 2) + 1 - String(number).length).join(0) + number;
+    }
+
+    var now = getNow();
+
+    // Create the chart
+    $('#container').highcharts({
+
+        chart: {
+            type: 'gauge',
+            plotBackgroundColor: null,
+            plotBackgroundImage: null,
+            plotBorderWidth: 0,
+            plotShadow: false,
+            height: 200
+        },
+
+        credits: {
+            enabled: false
+        },
+
+        title: {
+            text: 'The Highcharts clock'
+        },
+
+        pane: {
+            background: [{
+                // default background
+            }, {
+                // reflex for supported browsers
+                backgroundColor: Highcharts.svg ? {
+                    radialGradient: {
+                        cx: 0.5,
+                        cy: -0.4,
+                        r: 1.9
+                    },
+                    stops: [
+                        [0.5, 'rgba(255, 255, 255, 0.2)'],
+                        [0.5, 'rgba(200, 200, 200, 0.2)']
+                    ]
+                } : null
+            }]
+        },
+
+        yAxis: {
+            labels: {
+                distance: -20
+            },
+            min: 0,
+            max: 12,
+            lineWidth: 0,
+            showFirstLabel: false,
+
+            minorTickInterval: 'auto',
+            minorTickWidth: 1,
+            minorTickLength: 5,
+            minorTickPosition: 'inside',
+            minorGridLineWidth: 0,
+            minorTickColor: '#666',
+
+            tickInterval: 1,
+            tickWidth: 2,
+            tickPosition: 'inside',
+            tickLength: 10,
+            tickColor: '#666',
+            title: {
+                text: 'Powered by<br/>Highcharts',
+                style: {
+                    color: '#BBB',
+                    fontWeight: 'normal',
+                    fontSize: '8px',
+                    lineHeight: '10px'
+                },
+                y: 10
+            }
+        },
+
+        tooltip: {
+            formatter: function () {
+                return this.series.chart.tooltipText;
+            }
+        },
+
+        series: [{
+            data: [{
+                id: 'hour',
+                y: now.hours,
+                dial: {
+                    radius: '60%',
+                    baseWidth: 4,
+                    baseLength: '95%',
+                    rearLength: 0
+                }
+            }, {
+                id: 'minute',
+                y: now.minutes,
+                dial: {
+                    baseLength: '95%',
+                    rearLength: 0
+                }
+            }, {
+                id: 'second',
+                y: now.seconds,
+                dial: {
+                    radius: '100%',
+                    baseWidth: 1,
+                    rearLength: '20%'
+                }
+            }],
+            animation: false,
+            dataLabels: {
+                enabled: false
+            }
+        }]
+    },
+
+        // Move
+        function (chart) {
+            setInterval(function () {
+
+                now = getNow();
+
+                var hour = chart.get('hour'),
+                    minute = chart.get('minute'),
+                    second = chart.get('second'),
+                    // run animation unless we're wrapping around from 59 to 0
+                    animation = now.seconds === 0 ?
+                        false :
+                        {
+                            easing: 'easeOutBounce'
+                        };
+
+                // Cache the tooltip text
+                chart.tooltipText =
+                    pad(Math.floor(now.hours), 2) + ':' +
+                    pad(Math.floor(now.minutes * 5), 2) + ':' +
+                    pad(now.seconds * 5, 2);
+
+                hour.update(now.hours, true, animation);
+                minute.update(now.minutes, true, animation);
+                second.update(now.seconds, true, animation);
+
+            }, 1000);
+
+        });
+});
+
+/**
+ * Easing function from https://github.com/danro/easing-js/blob/master/easing.js
+ */
+Math.easeOutBounce = function (pos) {
+    if ((pos) < (1 / 2.75)) {
+        return (7.5625 * pos * pos);
+    }
+    if (pos < (2 / 2.75)) {
+        return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
+    }
+    if (pos < (2.5 / 2.75)) {
+        return (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
+    }
+    return (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
+};
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/highcharts-more.js"></script>
+
+<div id="container" style="width: 300px; height: 300px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/gauge-dual/index.htm

@@ -0,0 +1,125 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+
+        chart: {
+            type: 'gauge',
+            alignTicks: false,
+            plotBackgroundColor: null,
+            plotBackgroundImage: null,
+            plotBorderWidth: 0,
+            plotShadow: false
+        },
+
+        title: {
+            text: 'Speedometer with dual axes'
+        },
+
+        pane: {
+            startAngle: -150,
+            endAngle: 150
+        },
+
+        yAxis: [{
+            min: 0,
+            max: 200,
+            lineColor: '#339',
+            tickColor: '#339',
+            minorTickColor: '#339',
+            offset: -25,
+            lineWidth: 2,
+            labels: {
+                distance: -20,
+                rotation: 'auto'
+            },
+            tickLength: 5,
+            minorTickLength: 5,
+            endOnTick: false
+        }, {
+            min: 0,
+            max: 124,
+            tickPosition: 'outside',
+            lineColor: '#933',
+            lineWidth: 2,
+            minorTickPosition: 'outside',
+            tickColor: '#933',
+            minorTickColor: '#933',
+            tickLength: 5,
+            minorTickLength: 5,
+            labels: {
+                distance: 12,
+                rotation: 'auto'
+            },
+            offset: -20,
+            endOnTick: false
+        }],
+
+        series: [{
+            name: 'Speed',
+            data: [80],
+            dataLabels: {
+                formatter: function () {
+                    var kmh = this.y,
+                        mph = Math.round(kmh * 0.621);
+                    return '<span style="color:#339">' + kmh + ' km/h</span><br/>' +
+                        '<span style="color:#933">' + mph + ' mph</span>';
+                },
+                backgroundColor: {
+                    linearGradient: {
+                        x1: 0,
+                        y1: 0,
+                        x2: 0,
+                        y2: 1
+                    },
+                    stops: [
+                        [0, '#DDD'],
+                        [1, '#FFF']
+                    ]
+                }
+            },
+            tooltip: {
+                valueSuffix: ' km/h'
+            }
+        }]
+
+    },
+        // Add some life
+        function (chart) {
+            setInterval(function () {
+                var point = chart.series[0].points[0],
+                    newVal,
+                    inc = Math.round((Math.random() - 0.5) * 20);
+
+                newVal = point.y + inc;
+                if (newVal < 0 || newVal > 200) {
+                    newVal = point.y - inc;
+                }
+
+                point.update(newVal);
+
+            }, 3000);
+
+        });
+});
+
+		</script>
+	</head>
+	<body>
+<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; max-width: 400px; height: 300px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/gauge-solid/index.htm

@@ -0,0 +1,175 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    var gaugeOptions = {
+
+        chart: {
+            type: 'solidgauge'
+        },
+
+        title: null,
+
+        pane: {
+            center: ['50%', '85%'],
+            size: '140%',
+            startAngle: -90,
+            endAngle: 90,
+            background: {
+                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
+                innerRadius: '60%',
+                outerRadius: '100%',
+                shape: 'arc'
+            }
+        },
+
+        tooltip: {
+            enabled: false
+        },
+
+        // the value axis
+        yAxis: {
+            stops: [
+                [0.1, '#55BF3B'], // green
+                [0.5, '#DDDF0D'], // yellow
+                [0.9, '#DF5353'] // red
+            ],
+            lineWidth: 0,
+            minorTickInterval: null,
+            tickPixelInterval: 400,
+            tickWidth: 0,
+            title: {
+                y: -70
+            },
+            labels: {
+                y: 16
+            }
+        },
+
+        plotOptions: {
+            solidgauge: {
+                dataLabels: {
+                    y: 5,
+                    borderWidth: 0,
+                    useHTML: true
+                }
+            }
+        }
+    };
+
+    // The speed gauge
+    $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
+        yAxis: {
+            min: 0,
+            max: 200,
+            title: {
+                text: 'Speed'
+            }
+        },
+
+        credits: {
+            enabled: false
+        },
+
+        series: [{
+            name: 'Speed',
+            data: [80],
+            dataLabels: {
+                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
+                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
+                       '<span style="font-size:12px;color:silver">km/h</span></div>'
+            },
+            tooltip: {
+                valueSuffix: ' km/h'
+            }
+        }]
+
+    }));
+
+    // The RPM gauge
+    $('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
+        yAxis: {
+            min: 0,
+            max: 5,
+            title: {
+                text: 'RPM'
+            }
+        },
+
+        series: [{
+            name: 'RPM',
+            data: [1],
+            dataLabels: {
+                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
+                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
+                       '<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
+            },
+            tooltip: {
+                valueSuffix: ' revolutions/min'
+            }
+        }]
+
+    }));
+
+    // Bring life to the dials
+    setTimeout(function () {
+        // Speed
+        var chart = $('#container-speed').highcharts(),
+            point,
+            newVal,
+            inc;
+
+        if (chart) {
+            point = chart.series[0].points[0];
+            inc = Math.round((Math.random() - 0.5) * 100);
+            newVal = point.y + inc;
+
+            if (newVal < 0 || newVal > 200) {
+                newVal = point.y - inc;
+            }
+
+            point.update(newVal);
+        }
+
+        // RPM
+        chart = $('#container-rpm').highcharts();
+        if (chart) {
+            point = chart.series[0].points[0];
+            inc = Math.random() - 0.5;
+            newVal = point.y + inc;
+
+            if (newVal < 0 || newVal > 5) {
+                newVal = point.y - inc;
+            }
+
+            point.update(newVal);
+        }
+    }, 2000);
+
+
+});
+		</script>
+	</head>
+	<body>
+<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/solid-gauge.js"></script>
+
+<div style="width: 600px; height: 400px; margin: 0 auto">
+    <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
+    <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
+</div>
+
+
+	</body>
+</html>

js/lib/highcharts/examples/gauge-speedometer/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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    $('#container').highcharts({
+
+        chart: {
+            type: 'gauge',
+            plotBackgroundColor: null,
+            plotBackgroundImage: null,
+            plotBorderWidth: 0,
+            plotShadow: false
+        },
+
+        title: {
+            text: 'Speedometer'
+        },
+
+        pane: {
+            startAngle: -150,
+            endAngle: 150,
+            background: [{
+                backgroundColor: {
+                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+                    stops: [
+                        [0, '#FFF'],
+                        [1, '#333']
+                    ]
+                },
+                borderWidth: 0,
+                outerRadius: '109%'
+            }, {
+                backgroundColor: {
+                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+                    stops: [
+                        [0, '#333'],
+                        [1, '#FFF']
+                    ]
+                },
+                borderWidth: 1,
+                outerRadius: '107%'
+            }, {
+                // default background
+            }, {
+                backgroundColor: '#DDD',
+                borderWidth: 0,
+                outerRadius: '105%',
+                innerRadius: '103%'
+            }]
+        },
+
+        // the value axis
+        yAxis: {
+            min: 0,
+            max: 200,
+
+            minorTickInterval: 'auto',
+            minorTickWidth: 1,
+            minorTickLength: 10,
+            minorTickPosition: 'inside',
+            minorTickColor: '#666',
+
+            tickPixelInterval: 30,
+            tickWidth: 2,
+            tickPosition: 'inside',
+            tickLength: 10,
+            tickColor: '#666',
+            labels: {
+                step: 2,
+                rotation: 'auto'
+            },
+            title: {
+                text: 'km/h'
+            },
+            plotBands: [{
+                from: 0,
+                to: 120,
+                color: '#55BF3B' // green
+            }, {
+                from: 120,
+                to: 160,
+                color: '#DDDF0D' // yellow
+            }, {
+                from: 160,
+                to: 200,
+                color: '#DF5353' // red
+            }]
+        },
+
+        series: [{
+            name: 'Speed',
+            data: [80],
+            tooltip: {
+                valueSuffix: ' km/h'
+            }
+        }]
+
+    },
+    // Add some life
+    function (chart) {
+        if (!chart.renderer.forExport) {
+            setInterval(function () {
+                var point = chart.series[0].points[0],
+                    newVal,
+                    inc = Math.round((Math.random() - 0.5) * 20);
+
+                newVal = point.y + inc;
+                if (newVal < 0 || newVal > 200) {
+                    newVal = point.y - inc;
+                }
+
+                point.update(newVal);
+
+            }, 3000);
+        }
+    });
+});
+		</script>
+	</head>
+	<body>
+<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; max-width: 400px; height: 300px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/gauge-vu-meter/index.htm

@@ -0,0 +1,157 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+
+        chart: {
+            type: 'gauge',
+            plotBorderWidth: 1,
+            plotBackgroundColor: {
+                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+                stops: [
+                    [0, '#FFF4C6'],
+                    [0.3, '#FFFFFF'],
+                    [1, '#FFF4C6']
+                ]
+            },
+            plotBackgroundImage: null,
+            height: 200
+        },
+
+        title: {
+            text: 'VU meter'
+        },
+
+        pane: [{
+            startAngle: -45,
+            endAngle: 45,
+            background: null,
+            center: ['25%', '145%'],
+            size: 300
+        }, {
+            startAngle: -45,
+            endAngle: 45,
+            background: null,
+            center: ['75%', '145%'],
+            size: 300
+        }],
+
+        tooltip: {
+            enabled: false
+        },
+
+        yAxis: [{
+            min: -20,
+            max: 6,
+            minorTickPosition: 'outside',
+            tickPosition: 'outside',
+            labels: {
+                rotation: 'auto',
+                distance: 20
+            },
+            plotBands: [{
+                from: 0,
+                to: 6,
+                color: '#C02316',
+                innerRadius: '100%',
+                outerRadius: '105%'
+            }],
+            pane: 0,
+            title: {
+                text: 'VU<br/><span style="font-size:8px">Channel A</span>',
+                y: -40
+            }
+        }, {
+            min: -20,
+            max: 6,
+            minorTickPosition: 'outside',
+            tickPosition: 'outside',
+            labels: {
+                rotation: 'auto',
+                distance: 20
+            },
+            plotBands: [{
+                from: 0,
+                to: 6,
+                color: '#C02316',
+                innerRadius: '100%',
+                outerRadius: '105%'
+            }],
+            pane: 1,
+            title: {
+                text: 'VU<br/><span style="font-size:8px">Channel B</span>',
+                y: -40
+            }
+        }],
+
+        plotOptions: {
+            gauge: {
+                dataLabels: {
+                    enabled: false
+                },
+                dial: {
+                    radius: '100%'
+                }
+            }
+        },
+
+
+        series: [{
+            name: 'Channel A',
+            data: [-20],
+            yAxis: 0
+        }, {
+            name: 'Channel B',
+            data: [-20],
+            yAxis: 1
+        }]
+
+    },
+
+        // Let the music play
+        function (chart) {
+            setInterval(function () {
+                if (chart.series) { // the chart may be destroyed
+                    var left = chart.series[0].points[0],
+                        right = chart.series[1].points[0],
+                        leftVal,
+                        rightVal,
+                        inc = (Math.random() - 0.5) * 3;
+
+                    leftVal = left.y + inc;
+                    rightVal = leftVal + inc / 3;
+                    if (leftVal < -20 || leftVal > 6) {
+                        leftVal = left.y - inc;
+                    }
+                    if (rightVal < -20 || rightVal > 6) {
+                        rightVal = leftVal;
+                    }
+
+                    left.update(leftVal, false);
+                    right.update(rightVal, false);
+                    chart.redraw();
+                }
+            }, 500);
+
+        });
+});
+		</script>
+	</head>
+	<body>
+<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="width: 600px; height: 300px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/heatmap/index.htm

@@ -0,0 +1,81 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    $('#container').highcharts({
+
+        chart: {
+            type: 'heatmap',
+            marginTop: 40,
+            marginBottom: 80,
+            plotBorderWidth: 1
+        },
+
+
+        title: {
+            text: 'Sales per employee per weekday'
+        },
+
+        xAxis: {
+            categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
+        },
+
+        yAxis: {
+            categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
+            title: null
+        },
+
+        colorAxis: {
+            min: 0,
+            minColor: '#FFFFFF',
+            maxColor: Highcharts.getOptions().colors[0]
+        },
+
+        legend: {
+            align: 'right',
+            layout: 'vertical',
+            margin: 0,
+            verticalAlign: 'top',
+            y: 25,
+            symbolHeight: 280
+        },
+
+        tooltip: {
+            formatter: function () {
+                return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
+                    this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
+            }
+        },
+
+        series: [{
+            name: 'Sales per employee',
+            borderWidth: 1,
+            data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
+            dataLabels: {
+                enabled: true,
+                color: '#000000'
+            }
+        }]
+
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/heatmap.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+
+<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
+	</body>
+</html>

js/lib/highcharts/examples/line-ajax/index.htm

@@ -0,0 +1,135 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    // Get the CSV and create the chart
+    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {
+
+        $('#container').highcharts({
+
+            data: {
+                csv: csv
+            },
+
+            title: {
+                text: 'Daily visits at www.highcharts.com'
+            },
+
+            subtitle: {
+                text: 'Source: Google Analytics'
+            },
+
+            xAxis: {
+                tickInterval: 7 * 24 * 3600 * 1000, // one week
+                tickWidth: 0,
+                gridLineWidth: 1,
+                labels: {
+                    align: 'left',
+                    x: 3,
+                    y: -3
+                }
+            },
+
+            yAxis: [{ // left y axis
+                title: {
+                    text: null
+                },
+                labels: {
+                    align: 'left',
+                    x: 3,
+                    y: 16,
+                    format: '{value:.,0f}'
+                },
+                showFirstLabel: false
+            }, { // right y axis
+                linkedTo: 0,
+                gridLineWidth: 0,
+                opposite: true,
+                title: {
+                    text: null
+                },
+                labels: {
+                    align: 'right',
+                    x: -3,
+                    y: 16,
+                    format: '{value:.,0f}'
+                },
+                showFirstLabel: false
+            }],
+
+            legend: {
+                align: 'left',
+                verticalAlign: 'top',
+                y: 20,
+                floating: true,
+                borderWidth: 0
+            },
+
+            tooltip: {
+                shared: true,
+                crosshairs: true
+            },
+
+            plotOptions: {
+                series: {
+                    cursor: 'pointer',
+                    point: {
+                        events: {
+                            click: function (e) {
+                                hs.htmlExpand(null, {
+                                    pageOrigin: {
+                                        x: e.pageX || e.clientX,
+                                        y: e.pageY || e.clientY
+                                    },
+                                    headingText: this.series.name,
+                                    maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
+                                        this.y + ' visits',
+                                    width: 200
+                                });
+                            }
+                        }
+                    },
+                    marker: {
+                        lineWidth: 1
+                    }
+                }
+            },
+
+            series: [{
+                name: 'All visits',
+                lineWidth: 4,
+                marker: {
+                    radius: 4
+                }
+            }, {
+                name: 'New visitors'
+            }]
+        });
+    });
+
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/data.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<!-- Additional files for the Highslide popup effect -->
+<script src="https://www.highcharts.com/samples/static/highslide-full.min.js"></script>
+<script src="https://www.highcharts.com/samples/static/highslide.config.js" charset="utf-8"></script>
+<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/samples/static/highslide.css" />
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/line-basic/index.htm

@@ -0,0 +1,69 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        title: {
+            text: 'Monthly Average Temperature',
+            x: -20 //center
+        },
+        subtitle: {
+            text: 'Source: WorldClimate.com',
+            x: -20
+        },
+        xAxis: {
+            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+        },
+        yAxis: {
+            title: {
+                text: 'Temperature (°C)'
+            },
+            plotLines: [{
+                value: 0,
+                width: 1,
+                color: '#808080'
+            }]
+        },
+        tooltip: {
+            valueSuffix: '°C'
+        },
+        legend: {
+            layout: 'vertical',
+            align: 'right',
+            verticalAlign: 'middle',
+            borderWidth: 0
+        },
+        series: [{
+            name: 'Tokyo',
+            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]
+        }, {
+            name: 'New York',
+            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
+        }, {
+            name: 'Berlin',
+            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
+        }, {
+            name: 'London',
+            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/line-labels/index.htm

@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            type: 'line'
+        },
+        title: {
+            text: 'Monthly Average Temperature'
+        },
+        subtitle: {
+            text: 'Source: WorldClimate.com'
+        },
+        xAxis: {
+            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+        },
+        yAxis: {
+            title: {
+                text: 'Temperature (°C)'
+            }
+        },
+        plotOptions: {
+            line: {
+                dataLabels: {
+                    enabled: true
+                },
+                enableMouseTracking: false
+            }
+        },
+        series: [{
+            name: 'Tokyo',
+            data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
+        }, {
+            name: 'London',
+            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/line-log-axis/index.htm

@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+
+        title: {
+            text: 'Logarithmic axis demo'
+        },
+
+        xAxis: {
+            tickInterval: 1
+        },
+
+        yAxis: {
+            type: 'logarithmic',
+            minorTickInterval: 0.1
+        },
+
+        tooltip: {
+            headerFormat: '<b>{series.name}</b><br />',
+            pointFormat: 'x = {point.x}, y = {point.y}'
+        },
+
+        series: [{
+            data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
+            pointStart: 1
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/line-time-series/index.htm

@@ -0,0 +1,81 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
+
+        $('#container').highcharts({
+            chart: {
+                zoomType: 'x'
+            },
+            title: {
+                text: 'USD to EUR exchange rate over time'
+            },
+            subtitle: {
+                text: document.ontouchstart === undefined ?
+                        'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
+            },
+            xAxis: {
+                type: 'datetime'
+            },
+            yAxis: {
+                title: {
+                    text: 'Exchange rate'
+                }
+            },
+            legend: {
+                enabled: false
+            },
+            plotOptions: {
+                area: {
+                    fillColor: {
+                        linearGradient: {
+                            x1: 0,
+                            y1: 0,
+                            x2: 0,
+                            y2: 1
+                        },
+                        stops: [
+                            [0, Highcharts.getOptions().colors[0]],
+                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
+                        ]
+                    },
+                    marker: {
+                        radius: 2
+                    },
+                    lineWidth: 1,
+                    states: {
+                        hover: {
+                            lineWidth: 1
+                        }
+                    },
+                    threshold: null
+                }
+            },
+
+            series: [{
+                type: 'area',
+                name: 'USD to EUR',
+                data: data
+            }]
+        });
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/pie-basic/index.htm

@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            plotBackgroundColor: null,
+            plotBorderWidth: null,
+            plotShadow: false,
+            type: 'pie'
+        },
+        title: {
+            text: 'Browser market shares January, 2015 to May, 2015'
+        },
+        tooltip: {
+            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+        },
+        plotOptions: {
+            pie: {
+                allowPointSelect: true,
+                cursor: 'pointer',
+                dataLabels: {
+                    enabled: true,
+                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
+                    style: {
+                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
+                    }
+                }
+            }
+        },
+        series: [{
+            name: 'Brands',
+            colorByPoint: true,
+            data: [{
+                name: 'Microsoft Internet Explorer',
+                y: 56.33
+            }, {
+                name: 'Chrome',
+                y: 24.03,
+                sliced: true,
+                selected: true
+            }, {
+                name: 'Firefox',
+                y: 10.38
+            }, {
+                name: 'Safari',
+                y: 4.77
+            }, {
+                name: 'Opera',
+                y: 0.91
+            }, {
+                name: 'Proprietary or Undetectable',
+                y: 0.2
+            }]
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/pie-donut/index.htm

@@ -0,0 +1,163 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    var colors = Highcharts.getOptions().colors,
+        categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
+        data = [{
+            y: 56.33,
+            color: colors[0],
+            drilldown: {
+                name: 'MSIE versions',
+                categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0', 'MSIE 10.0', 'MSIE 11.0'],
+                data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
+                color: colors[0]
+            }
+        }, {
+            y: 10.38,
+            color: colors[1],
+            drilldown: {
+                name: 'Firefox versions',
+                categories: ['Firefox v31', 'Firefox v32', 'Firefox v33', 'Firefox v35', 'Firefox v36', 'Firefox v37', 'Firefox v38'],
+                data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
+                color: colors[1]
+            }
+        }, {
+            y: 24.03,
+            color: colors[2],
+            drilldown: {
+                name: 'Chrome versions',
+                categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0', 'Chrome v33.0', 'Chrome v34.0',
+                    'Chrome v35.0', 'Chrome v36.0', 'Chrome v37.0', 'Chrome v38.0', 'Chrome v39.0', 'Chrome v40.0', 'Chrome v41.0', 'Chrome v42.0', 'Chrome v43.0'
+                    ],
+                data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45],
+                color: colors[2]
+            }
+        }, {
+            y: 4.77,
+            color: colors[3],
+            drilldown: {
+                name: 'Safari versions',
+                categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', 'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'],
+                data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
+                color: colors[3]
+            }
+        }, {
+            y: 0.91,
+            color: colors[4],
+            drilldown: {
+                name: 'Opera versions',
+                categories: ['Opera v12.x', 'Opera v27', 'Opera v28', 'Opera v29'],
+                data: [0.34, 0.17, 0.24, 0.16],
+                color: colors[4]
+            }
+        }, {
+            y: 0.2,
+            color: colors[5],
+            drilldown: {
+                name: 'Proprietary or Undetectable',
+                categories: [],
+                data: [],
+                color: colors[5]
+            }
+        }],
+        browserData = [],
+        versionsData = [],
+        i,
+        j,
+        dataLen = data.length,
+        drillDataLen,
+        brightness;
+
+
+    // Build the data arrays
+    for (i = 0; i < dataLen; i += 1) {
+
+        // add browser data
+        browserData.push({
+            name: categories[i],
+            y: data[i].y,
+            color: data[i].color
+        });
+
+        // add version data
+        drillDataLen = data[i].drilldown.data.length;
+        for (j = 0; j < drillDataLen; j += 1) {
+            brightness = 0.2 - (j / drillDataLen) / 5;
+            versionsData.push({
+                name: data[i].drilldown.categories[j],
+                y: data[i].drilldown.data[j],
+                color: Highcharts.Color(data[i].color).brighten(brightness).get()
+            });
+        }
+    }
+
+    // Create the chart
+    $('#container').highcharts({
+        chart: {
+            type: 'pie'
+        },
+        title: {
+            text: 'Browser market share, January, 2015 to May, 2015'
+        },
+        subtitle: {
+            text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
+        },
+        yAxis: {
+            title: {
+                text: 'Total percent market share'
+            }
+        },
+        plotOptions: {
+            pie: {
+                shadow: false,
+                center: ['50%', '50%']
+            }
+        },
+        tooltip: {
+            valueSuffix: '%'
+        },
+        series: [{
+            name: 'Browsers',
+            data: browserData,
+            size: '60%',
+            dataLabels: {
+                formatter: function () {
+                    return this.y > 5 ? this.point.name : null;
+                },
+                color: '#ffffff',
+                distance: -30
+            }
+        }, {
+            name: 'Versions',
+            data: versionsData,
+            size: '80%',
+            innerSize: '60%',
+            dataLabels: {
+                formatter: function () {
+                    // display only if larger than 1
+                    return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
+                }
+            }
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/pie-drilldown/index.htm

@@ -0,0 +1,188 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    // Create the chart
+    $('#container').highcharts({
+        chart: {
+            type: 'pie'
+        },
+        title: {
+            text: 'Browser market shares. January, 2015 to May, 2015'
+        },
+        subtitle: {
+            text: 'Click the slices to view versions. Source: netmarketshare.com.'
+        },
+        plotOptions: {
+            series: {
+                dataLabels: {
+                    enabled: true,
+                    format: '{point.name}: {point.y:.1f}%'
+                }
+            }
+        },
+
+        tooltip: {
+            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
+            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
+        },
+        series: [{
+            name: 'Brands',
+            colorByPoint: true,
+            data: [{
+                name: 'Microsoft Internet Explorer',
+                y: 56.33,
+                drilldown: 'Microsoft Internet Explorer'
+            }, {
+                name: 'Chrome',
+                y: 24.03,
+                drilldown: 'Chrome'
+            }, {
+                name: 'Firefox',
+                y: 10.38,
+                drilldown: 'Firefox'
+            }, {
+                name: 'Safari',
+                y: 4.77,
+                drilldown: 'Safari'
+            }, {
+                name: 'Opera',
+                y: 0.91,
+                drilldown: 'Opera'
+            }, {
+                name: 'Proprietary or Undetectable',
+                y: 0.2,
+                drilldown: null
+            }]
+        }],
+        drilldown: {
+            series: [{
+                name: 'Microsoft Internet Explorer',
+                id: 'Microsoft Internet Explorer',
+                data: [
+                    ['v11.0', 24.13],
+                    ['v8.0', 17.2],
+                    ['v9.0', 8.11],
+                    ['v10.0', 5.33],
+                    ['v6.0', 1.06],
+                    ['v7.0', 0.5]
+                ]
+            }, {
+                name: 'Chrome',
+                id: 'Chrome',
+                data: [
+                    ['v40.0', 5],
+                    ['v41.0', 4.32],
+                    ['v42.0', 3.68],
+                    ['v39.0', 2.96],
+                    ['v36.0', 2.53],
+                    ['v43.0', 1.45],
+                    ['v31.0', 1.24],
+                    ['v35.0', 0.85],
+                    ['v38.0', 0.6],
+                    ['v32.0', 0.55],
+                    ['v37.0', 0.38],
+                    ['v33.0', 0.19],
+                    ['v34.0', 0.14],
+                    ['v30.0', 0.14]
+                ]
+            }, {
+                name: 'Firefox',
+                id: 'Firefox',
+                data: [
+                    ['v35', 2.76],
+                    ['v36', 2.32],
+                    ['v37', 2.31],
+                    ['v34', 1.27],
+                    ['v38', 1.02],
+                    ['v31', 0.33],
+                    ['v33', 0.22],
+                    ['v32', 0.15]
+                ]
+            }, {
+                name: 'Safari',
+                id: 'Safari',
+                data: [
+                    ['v8.0', 2.56],
+                    ['v7.1', 0.77],
+                    ['v5.1', 0.42],
+                    ['v5.0', 0.3],
+                    ['v6.1', 0.29],
+                    ['v7.0', 0.26],
+                    ['v6.2', 0.17]
+                ]
+            }, {
+                name: 'Opera',
+                id: 'Opera',
+                data: [
+                    ['v12.x', 0.34],
+                    ['v28', 0.24],
+                    ['v27', 0.17],
+                    ['v29', 0.16]
+                ]
+            }]
+        }
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/data.js"></script>
+<script src="https://code.highcharts.com/modules/drilldown.js"></script>
+
+<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
+
+<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
+<pre id="tsv" style="display:none">Browser Version    Total Market Share
+Microsoft Internet Explorer 8.0    26.61%
+Microsoft Internet Explorer 9.0    16.96%
+Chrome 18.0    8.01%
+Chrome 19.0    7.73%
+Firefox 12    6.72%
+Microsoft Internet Explorer 6.0    6.40%
+Firefox 11    4.72%
+Microsoft Internet Explorer 7.0    3.55%
+Safari 5.1    3.53%
+Firefox 13    2.16%
+Firefox 3.6    1.87%
+Opera 11.x    1.30%
+Chrome 17.0    1.13%
+Firefox 10    0.90%
+Safari 5.0    0.85%
+Firefox 9.0    0.65%
+Firefox 8.0    0.55%
+Firefox 4.0    0.50%
+Chrome 16.0    0.45%
+Firefox 3.0    0.36%
+Firefox 3.5    0.36%
+Firefox 6.0    0.32%
+Firefox 5.0    0.31%
+Firefox 7.0    0.29%
+Proprietary or Undetectable    0.29%
+Chrome 18.0 - Maxthon Edition    0.26%
+Chrome 14.0    0.25%
+Chrome 20.0    0.24%
+Chrome 15.0    0.18%
+Chrome 12.0    0.16%
+Opera 12.x    0.15%
+Safari 4.0    0.14%
+Chrome 13.0    0.13%
+Safari 4.1    0.12%
+Chrome 11.0    0.10%
+Firefox 14    0.10%
+Firefox 2.0    0.09%
+Chrome 10.0    0.09%
+Opera 10.x    0.09%
+Microsoft Internet Explorer 8.0 - Tencent Traveler Edition    0.09%</pre>
+
+	</body>
+</html>

js/lib/highcharts/examples/pie-gradient/index.htm

@@ -0,0 +1,83 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    // Radialize the colors
+    Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
+        return {
+            radialGradient: {
+                cx: 0.5,
+                cy: 0.3,
+                r: 0.7
+            },
+            stops: [
+                [0, color],
+                [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
+            ]
+        };
+    });
+
+    // Build the chart
+    $('#container').highcharts({
+        chart: {
+            plotBackgroundColor: null,
+            plotBorderWidth: null,
+            plotShadow: false,
+            type: 'pie'
+        },
+        title: {
+            text: 'Browser market shares. January, 2015 to May, 2015'
+        },
+        tooltip: {
+            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+        },
+        plotOptions: {
+            pie: {
+                allowPointSelect: true,
+                cursor: 'pointer',
+                dataLabels: {
+                    enabled: true,
+                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
+                    style: {
+                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
+                    },
+                    connectorColor: 'silver'
+                }
+            }
+        },
+        series: [{
+            name: 'Brands',
+            data: [
+                { name: 'Microsoft Internet Explorer', y: 56.33 },
+                {
+                    name: 'Chrome',
+                    y: 24.03,
+                    sliced: true,
+                    selected: true
+                },
+                { name: 'Firefox', y: 10.38 },
+                { name: 'Safari', y: 4.77 }, { name: 'Opera', y: 0.91 },
+                { name: 'Proprietary or Undetectable', y: 0.2 }
+            ]
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/pie-legend/index.htm

@@ -0,0 +1,77 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    $(document).ready(function () {
+
+        // Build the chart
+        $('#container').highcharts({
+            chart: {
+                plotBackgroundColor: null,
+                plotBorderWidth: null,
+                plotShadow: false,
+                type: 'pie'
+            },
+            title: {
+                text: 'Browser market shares January, 2015 to May, 2015'
+            },
+            tooltip: {
+                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+            },
+            plotOptions: {
+                pie: {
+                    allowPointSelect: true,
+                    cursor: 'pointer',
+                    dataLabels: {
+                        enabled: false
+                    },
+                    showInLegend: true
+                }
+            },
+            series: [{
+                name: 'Brands',
+                colorByPoint: true,
+                data: [{
+                    name: 'Microsoft Internet Explorer',
+                    y: 56.33
+                }, {
+                    name: 'Chrome',
+                    y: 24.03,
+                    sliced: true,
+                    selected: true
+                }, {
+                    name: 'Firefox',
+                    y: 10.38
+                }, {
+                    name: 'Safari',
+                    y: 4.77
+                }, {
+                    name: 'Opera',
+                    y: 0.91
+                }, {
+                    name: 'Proprietary or Undetectable',
+                    y: 0.2
+                }]
+            }]
+        });
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/pie-monochrome/index.htm

@@ -0,0 +1,77 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    // Make monochrome colors and set them as default for all pies
+    Highcharts.getOptions().plotOptions.pie.colors = (function () {
+        var colors = [],
+            base = Highcharts.getOptions().colors[0],
+            i;
+
+        for (i = 0; i < 10; i += 1) {
+            // Start out with a darkened base color (negative brighten), and end
+            // up with a much brighter color
+            colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
+        }
+        return colors;
+    }());
+
+    // Build the chart
+    $('#container').highcharts({
+        chart: {
+            plotBackgroundColor: null,
+            plotBorderWidth: null,
+            plotShadow: false,
+            type: 'pie'
+        },
+        title: {
+            text: 'Browser market shares at a specific website, 2014'
+        },
+        tooltip: {
+            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+        },
+        plotOptions: {
+            pie: {
+                allowPointSelect: true,
+                cursor: 'pointer',
+                dataLabels: {
+                    enabled: true,
+                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
+                    style: {
+                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
+                    }
+                }
+            }
+        },
+        series: [{
+            name: 'Brands',
+            data: [
+                { name: 'Microsoft Internet Explorer', y: 56.33 },
+                { name: 'Chrome', y: 24.03 },
+                { name: 'Firefox', y: 10.38 },
+                { name: 'Safari', y: 4.77 },
+                { name: 'Opera', y: 0.91 },
+                { name: 'Proprietary or Undetectable', y: 0.2 }
+            ]
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/pie-semi-circle/index.htm

@@ -0,0 +1,76 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            plotBackgroundColor: null,
+            plotBorderWidth: 0,
+            plotShadow: false
+        },
+        title: {
+            text: 'Browser<br>shares<br>2015',
+            align: 'center',
+            verticalAlign: 'middle',
+            y: 40
+        },
+        tooltip: {
+            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+        },
+        plotOptions: {
+            pie: {
+                dataLabels: {
+                    enabled: true,
+                    distance: -50,
+                    style: {
+                        fontWeight: 'bold',
+                        color: 'white',
+                        textShadow: '0px 1px 2px black'
+                    }
+                },
+                startAngle: -90,
+                endAngle: 90,
+                center: ['50%', '75%']
+            }
+        },
+        series: [{
+            type: 'pie',
+            name: 'Browser share',
+            innerSize: '50%',
+            data: [
+                ['Firefox',   10.38],
+                ['IE',       56.33],
+                ['Chrome', 24.03],
+                ['Safari',    4.77],
+                ['Opera',     0.91],
+                {
+                    name: 'Proprietary or Undetectable',
+                    y: 0.2,
+                    dataLabels: {
+                        enabled: false
+                    }
+                }
+            ]
+        }]
+    });
+});
+
+
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/polar-spider/index.htm

@@ -0,0 +1,77 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    $('#container').highcharts({
+
+        chart: {
+            polar: true,
+            type: 'line'
+        },
+
+        title: {
+            text: 'Budget vs spending',
+            x: -80
+        },
+
+        pane: {
+            size: '80%'
+        },
+
+        xAxis: {
+            categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
+                    'Information Technology', 'Administration'],
+            tickmarkPlacement: 'on',
+            lineWidth: 0
+        },
+
+        yAxis: {
+            gridLineInterpolation: 'polygon',
+            lineWidth: 0,
+            min: 0
+        },
+
+        tooltip: {
+            shared: true,
+            pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
+        },
+
+        legend: {
+            align: 'right',
+            verticalAlign: 'top',
+            y: 70,
+            layout: 'vertical'
+        },
+
+        series: [{
+            name: 'Allocated Budget',
+            data: [43000, 19000, 60000, 35000, 17000, 10000],
+            pointPlacement: 'on'
+        }, {
+            name: 'Actual Spending',
+            data: [50000, 39000, 42000, 31000, 26000, 14000],
+            pointPlacement: 'on'
+        }]
+
+    });
+});
+		</script>
+	</head>
+	<body>
+<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: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/polar-wind-rose/index.htm

@@ -0,0 +1,299 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    // Parse the data from an inline table using the Highcharts Data plugin
+    $('#container').highcharts({
+        data: {
+            table: 'freq',
+            startRow: 1,
+            endRow: 17,
+            endColumn: 7
+        },
+
+        chart: {
+            polar: true,
+            type: 'column'
+        },
+
+        title: {
+            text: 'Wind rose for South Shore Met Station, Oregon'
+        },
+
+        subtitle: {
+            text: 'Source: or.water.usgs.gov'
+        },
+
+        pane: {
+            size: '85%'
+        },
+
+        legend: {
+            align: 'right',
+            verticalAlign: 'top',
+            y: 100,
+            layout: 'vertical'
+        },
+
+        xAxis: {
+            tickmarkPlacement: 'on'
+        },
+
+        yAxis: {
+            min: 0,
+            endOnTick: false,
+            showLastLabel: true,
+            title: {
+                text: 'Frequency (%)'
+            },
+            labels: {
+                formatter: function () {
+                    return this.value + '%';
+                }
+            },
+            reversedStacks: false
+        },
+
+        tooltip: {
+            valueSuffix: '%'
+        },
+
+        plotOptions: {
+            series: {
+                stacking: 'normal',
+                shadow: false,
+                groupPadding: 0,
+                pointPlacement: 'on'
+            }
+        }
+    });
+});
+		</script>
+	</head>
+	<body>
+<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/data.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div>
+
+<div style="display:none">
+    <!-- Source: http://or.water.usgs.gov/cgi-bin/grapher/graph_windrose.pl -->
+    <table id="freq" border="0" cellspacing="0" cellpadding="0">
+        <tr nowrap bgcolor="#CCCCFF">
+            <th colspan="9" class="hdr">Table of Frequencies (percent)</th>
+        </tr>
+        <tr nowrap bgcolor="#CCCCFF">
+            <th class="freq">Direction</th>
+            <th class="freq">&lt; 0.5 m/s</th>
+            <th class="freq">0.5-2 m/s</th>
+            <th class="freq">2-4 m/s</th>
+            <th class="freq">4-6 m/s</th>
+            <th class="freq">6-8 m/s</th>
+            <th class="freq">8-10 m/s</th>
+            <th class="freq">&gt; 10 m/s</th>
+            <th class="freq">Total</th>
+        </tr>
+        <tr nowrap>
+            <td class="dir">N</td>
+            <td class="data">1.81</td>
+            <td class="data">1.78</td>
+            <td class="data">0.16</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">3.75</td>
+        </tr>        
+        <tr nowrap bgcolor="#DDDDDD">
+            <td class="dir">NNE</td>
+            <td class="data">0.62</td>
+            <td class="data">1.09</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">1.71</td>
+        </tr>
+        <tr nowrap>
+            <td class="dir">NE</td>
+            <td class="data">0.82</td>
+            <td class="data">0.82</td>
+            <td class="data">0.07</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">1.71</td>
+        </tr>
+        <tr nowrap bgcolor="#DDDDDD">
+            <td class="dir">ENE</td>
+            <td class="data">0.59</td>
+            <td class="data">1.22</td>
+            <td class="data">0.07</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">1.88</td>
+        </tr>
+        <tr nowrap>
+            <td class="dir">E</td>
+            <td class="data">0.62</td>
+            <td class="data">2.20</td>
+            <td class="data">0.49</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">3.32</td>
+        </tr>
+        <tr nowrap bgcolor="#DDDDDD">
+            <td class="dir">ESE</td>
+            <td class="data">1.22</td>
+            <td class="data">2.01</td>
+            <td class="data">1.55</td>
+            <td class="data">0.30</td>
+            <td class="data">0.13</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">5.20</td>
+        </tr>
+        <tr nowrap>
+            <td class="dir">SE</td>
+            <td class="data">1.61</td>
+            <td class="data">3.06</td>
+            <td class="data">2.37</td>
+            <td class="data">2.14</td>
+            <td class="data">1.74</td>
+            <td class="data">0.39</td>
+            <td class="data">0.13</td>
+            <td class="data">11.45</td>
+        </tr>
+        <tr nowrap bgcolor="#DDDDDD">
+            <td class="dir">SSE</td>
+            <td class="data">2.04</td>
+            <td class="data">3.42</td>
+            <td class="data">1.97</td>
+            <td class="data">0.86</td>
+            <td class="data">0.53</td>
+            <td class="data">0.49</td>
+            <td class="data">0.00</td>
+            <td class="data">9.31</td>
+        </tr>
+        <tr nowrap>
+            <td class="dir">S</td>
+            <td class="data">2.66</td>
+            <td class="data">4.74</td>
+            <td class="data">0.43</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">7.83</td>
+        </tr>
+        <tr nowrap bgcolor="#DDDDDD">
+            <td class="dir">SSW</td>
+            <td class="data">2.96</td>
+            <td class="data">4.14</td>
+            <td class="data">0.26</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">7.37</td>
+        </tr>
+        <tr nowrap>
+            <td class="dir">SW</td>
+            <td class="data">2.53</td>
+            <td class="data">4.01</td>
+            <td class="data">1.22</td>
+            <td class="data">0.49</td>
+            <td class="data">0.13</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">8.39</td>
+        </tr>
+        <tr nowrap bgcolor="#DDDDDD">
+            <td class="dir">WSW</td>
+            <td class="data">1.97</td>
+            <td class="data">2.66</td>
+            <td class="data">1.97</td>
+            <td class="data">0.79</td>
+            <td class="data">0.30</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">7.70</td>
+        </tr>
+        <tr nowrap>
+            <td class="dir">W</td>
+            <td class="data">1.64</td>
+            <td class="data">1.71</td>
+            <td class="data">0.92</td>
+            <td class="data">1.45</td>
+            <td class="data">0.26</td>
+            <td class="data">0.10</td>
+            <td class="data">0.00</td>
+            <td class="data">6.09</td>
+        </tr>
+        <tr nowrap bgcolor="#DDDDDD">
+            <td class="dir">WNW</td>
+            <td class="data">1.32</td>
+            <td class="data">2.40</td>
+            <td class="data">0.99</td>
+            <td class="data">1.61</td>
+            <td class="data">0.33</td>
+            <td class="data">0.00</td>
+            <td class="data">0.00</td>
+            <td class="data">6.64</td>
+        </tr>
+        <tr nowrap>
+            <td class="dir">NW</td>
+            <td class="data">1.58</td>
+            <td class="data">4.28</td>
+            <td class="data">1.28</td>
+            <td class="data">0.76</td>
+            <td class="data">0.66</td>
+            <td class="data">0.69</td>
+            <td class="data">0.03</td>
+            <td class="data">9.28</td>
+        </tr>        
+        <tr nowrap bgcolor="#DDDDDD">
+            <td class="dir">NNW</td>
+            <td class="data">1.51</td>
+            <td class="data">5.00</td>
+            <td class="data">1.32</td>
+            <td class="data">0.13</td>
+            <td class="data">0.23</td>
+            <td class="data">0.13</td>
+            <td class="data">0.07</td>
+            <td class="data">8.39</td>
+        </tr>
+        <tr nowrap>
+            <td class="totals">Total</td>
+            <td class="totals">25.53</td>
+            <td class="totals">44.54</td>
+            <td class="totals">15.07</td>
+            <td class="totals">8.52</td>
+            <td class="totals">4.31</td>
+            <td class="totals">1.81</td>
+            <td class="totals">0.23</td>
+            <td class="totals">&nbsp;</td>
+        </tr>
+    </table>
+</div>
+
+
+	</body>
+</html>

js/lib/highcharts/examples/polar/index.htm

@@ -0,0 +1,81 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    $('#container').highcharts({
+
+        chart: {
+            polar: true
+        },
+
+        title: {
+            text: 'Highcharts Polar Chart'
+        },
+
+        pane: {
+            startAngle: 0,
+            endAngle: 360
+        },
+
+        xAxis: {
+            tickInterval: 45,
+            min: 0,
+            max: 360,
+            labels: {
+                formatter: function () {
+                    return this.value + '°';
+                }
+            }
+        },
+
+        yAxis: {
+            min: 0
+        },
+
+        plotOptions: {
+            series: {
+                pointStart: 0,
+                pointInterval: 45
+            },
+            column: {
+                pointPadding: 0,
+                groupPadding: 0
+            }
+        },
+
+        series: [{
+            type: 'column',
+            name: 'Column',
+            data: [8, 7, 6, 5, 4, 3, 2, 1],
+            pointPlacement: 'between'
+        }, {
+            type: 'line',
+            name: 'Line',
+            data: [1, 2, 3, 4, 5, 6, 7, 8]
+        }, {
+            type: 'area',
+            name: 'Area',
+            data: [1, 8, 2, 7, 3, 6, 4, 5]
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+<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; max-width: 400px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/polygon/index.htm

@@ -0,0 +1,125 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    $('#container').highcharts({
+        title: {
+            text: 'Height vs Weight'
+        },
+        subtitle: {
+            text: 'Polygon series in Highcharts'
+        },
+        xAxis: {
+            gridLineWidth: 1,
+            title: {
+                enabled: true,
+                text: 'Height (cm)'
+            },
+            startOnTick: true,
+            endOnTick: true,
+            showLastLabel: true
+        },
+        yAxis: {
+            title: {
+                text: 'Weight (kg)'
+            }
+        },
+        legend: {
+            layout: 'vertical',
+            align: 'right',
+            verticalAlign: 'middle'
+        },
+        series: [{
+            name: 'Target',
+            type: 'polygon',
+            data: [[153, 42], [149, 46], [149, 55], [152, 60], [159, 70], [170, 77], [180, 70],
+                [180, 60], [173, 52], [166, 45]],
+            color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get(),
+            enableMouseTracking: false
+
+        }, {
+            name: 'Observations',
+            type: 'scatter',
+            color: Highcharts.getOptions().colors[1],
+            data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
+                [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
+                [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
+                [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
+                [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
+                [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
+                [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
+                [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
+                [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
+                [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
+                [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
+                [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
+                [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
+                [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
+                [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
+                [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
+                [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
+                [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
+                [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
+                [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
+                [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
+                [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
+                [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
+                [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
+                [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
+                [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
+                [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
+                [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
+                [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
+                [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
+                [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
+                [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
+                [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
+                [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
+                [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
+                [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
+                [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
+                [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
+                [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
+                [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
+                [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
+                [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
+                [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
+                [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
+                [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
+                [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
+                [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
+                [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
+                [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
+                [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
+                [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
+                [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]]
+
+        }],
+        tooltip: {
+            headerFormat: '<b>{series.name}</b><br>',
+            pointFormat: '{point.x} cm, {point.y} kg'
+        }
+    });
+});
+
+
+		</script>
+	</head>
+	<body>
+<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; max-width: 600px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/pyramid/index.htm

@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    $('#container').highcharts({
+        chart: {
+            type: 'pyramid',
+            marginRight: 100
+        },
+        title: {
+            text: 'Sales pyramid',
+            x: -50
+        },
+        plotOptions: {
+            series: {
+                dataLabels: {
+                    enabled: true,
+                    format: '<b>{point.name}</b> ({point.y:,.0f})',
+                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
+                    softConnector: true
+                }
+            }
+        },
+        legend: {
+            enabled: false
+        },
+        series: [{
+            name: 'Unique users',
+            data: [
+                ['Website visits',      15654],
+                ['Downloads',            4064],
+                ['Requested price list', 1987],
+                ['Invoice sent',          976],
+                ['Finalized',             846]
+            ]
+        }]
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/funnel.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/renderer/index.htm

@@ -0,0 +1,268 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            backgroundColor: 'white',
+            events: {
+                load: function () {
+
+                    // Draw the flow chart
+                    var ren = this.renderer,
+                        colors = Highcharts.getOptions().colors,
+                        rightArrow = ['M', 0, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5],
+                        leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5];
+
+
+
+                    // Separator, client from service
+                    ren.path(['M', 120, 40, 'L', 120, 330])
+                        .attr({
+                            'stroke-width': 2,
+                            stroke: 'silver',
+                            dashstyle: 'dash'
+                        })
+                        .add();
+
+                    // Separator, CLI from service
+                    ren.path(['M', 420, 40, 'L', 420, 330])
+                        .attr({
+                            'stroke-width': 2,
+                            stroke: 'silver',
+                            dashstyle: 'dash'
+                        })
+                        .add();
+
+                    // Headers
+                    ren.label('Web client', 20, 40)
+                        .css({
+                            fontWeight: 'bold'
+                        })
+                        .add();
+                    ren.label('Web service / CLI', 220, 40)
+                        .css({
+                            fontWeight: 'bold'
+                        })
+                        .add();
+                    ren.label('Command line client', 440, 40)
+                        .css({
+                            fontWeight: 'bold'
+                        })
+                        .add();
+
+                    // SaaS client label
+                    ren.label('SaaS client<br/>(browser or<br/>script)', 10, 82)
+                        .attr({
+                            fill: colors[0],
+                            stroke: 'white',
+                            'stroke-width': 2,
+                            padding: 5,
+                            r: 5
+                        })
+                        .css({
+                            color: 'white'
+                        })
+                        .add()
+                        .shadow(true);
+
+                    // Arrow from SaaS client to Phantom JS
+                    ren.path(rightArrow)
+                        .attr({
+                            'stroke-width': 2,
+                            stroke: colors[3]
+                        })
+                        .translate(95, 95)
+                        .add();
+
+                    ren.label('POST options in JSON', 90, 75)
+                        .css({
+                            fontSize: '10px',
+                            color: colors[3]
+                        })
+                        .add();
+
+                    ren.label('PhantomJS', 210, 82)
+                        .attr({
+                            r: 5,
+                            width: 100,
+                            fill: colors[1]
+                        })
+                        .css({
+                            color: 'white',
+                            fontWeight: 'bold'
+                        })
+                        .add();
+
+                    // Arrow from Phantom JS to Batik
+                    ren.path(['M', 250, 110, 'L', 250, 185, 'L', 245, 180, 'M', 250, 185, 'L', 255, 180])
+                        .attr({
+                            'stroke-width': 2,
+                            stroke: colors[3]
+                        })
+                        .add();
+
+                    ren.label('SVG', 255, 120)
+                        .css({
+                            color: colors[3],
+                            fontSize: '10px'
+                        })
+                        .add();
+
+                    ren.label('Batik', 210, 200)
+                        .attr({
+                            r: 5,
+                            width: 100,
+                            fill: colors[1]
+                        })
+                        .css({
+                            color: 'white',
+                            fontWeight: 'bold'
+                        })
+                        .add();
+
+                    // Arrow from Batik to SaaS client
+                    ren.path(['M', 235, 185, 'L', 235, 155, 'C', 235, 130, 235, 130, 215, 130,
+                              'L', 95, 130, 'L', 100, 125, 'M', 95, 130, 'L', 100, 135])
+                        .attr({
+                            'stroke-width': 2,
+                            stroke: colors[3]
+                        })
+                        .add();
+
+                    ren.label('Rasterized image', 100, 110)
+                        .css({
+                            color: colors[3],
+                            fontSize: '10px'
+                        })
+                        .add();
+
+                    // Browser label
+                    ren.label('Browser<br/>running<br/>Highcharts', 10, 180)
+                        .attr({
+                            fill: colors[0],
+                            stroke: 'white',
+                            'stroke-width': 2,
+                            padding: 5,
+                            r: 5
+                        })
+                        .css({
+                            color: 'white',
+                            width: '100px'
+                        })
+                        .add()
+                        .shadow(true);
+
+
+
+                    // Arrow from Browser to Batik
+                    ren.path(rightArrow)
+                        .attr({
+                            'stroke-width': 2,
+                            stroke: colors[1]
+                        })
+                        .translate(95, 205)
+                        .add();
+
+                    ren.label('POST SVG', 110, 185)
+                        .css({
+                            color: colors[1],
+                            fontSize: '10px'
+                        })
+                        .add();
+
+                    // Arrow from Batik to Browser
+                    ren.path(leftArrow)
+                        .attr({
+                            'stroke-width': 2,
+                            stroke: colors[1]
+                        })
+                        .translate(95, 215)
+                        .add();
+
+                    ren.label('Rasterized image', 100, 215)
+                        .css({
+                            color: colors[1],
+                            fontSize: '10px'
+                        })
+                        .add();
+
+                    // Script label
+                    ren.label('Script', 450, 82)
+                        .attr({
+                            fill: colors[2],
+                            stroke: 'white',
+                            'stroke-width': 2,
+                            padding: 5,
+                            r: 5
+                        })
+                        .css({
+                            color: 'white',
+                            width: '100px'
+                        })
+                        .add()
+                        .shadow(true);
+
+                    // Arrow from Script to PhantomJS
+                    ren.path(leftArrow)
+                        .attr({
+                            'stroke-width': 2,
+                            stroke: colors[2]
+                        })
+                        .translate(330, 90)
+                        .add();
+
+                    ren.label('Command', 340, 70)
+                        .css({
+                            color: colors[2],
+                            fontSize: '10px'
+                        })
+                        .add();
+
+                    // Arrow from PhantomJS to Script
+                    ren.path(rightArrow)
+                        .attr({
+                            'stroke-width': 2,
+                            stroke: colors[2]
+                        })
+                        .translate(330, 100)
+                        .add();
+
+                    ren.label('Rasterized image', 330, 100)
+                        .css({
+                            color: colors[2],
+                            fontSize: '10px'
+                        })
+                        .add();
+
+
+                }
+            }
+        },
+        title: {
+            text: 'Highcharts export server overview',
+            style: {
+                color: 'black'
+            }
+        }
+
+    });
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="width: 600px; height: 250px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/scatter/index.htm

@@ -0,0 +1,195 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+    $('#container').highcharts({
+        chart: {
+            type: 'scatter',
+            zoomType: 'xy'
+        },
+        title: {
+            text: 'Height Versus Weight of 507 Individuals by Gender'
+        },
+        subtitle: {
+            text: 'Source: Heinz  2003'
+        },
+        xAxis: {
+            title: {
+                enabled: true,
+                text: 'Height (cm)'
+            },
+            startOnTick: true,
+            endOnTick: true,
+            showLastLabel: true
+        },
+        yAxis: {
+            title: {
+                text: 'Weight (kg)'
+            }
+        },
+        legend: {
+            layout: 'vertical',
+            align: 'left',
+            verticalAlign: 'top',
+            x: 100,
+            y: 70,
+            floating: true,
+            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
+            borderWidth: 1
+        },
+        plotOptions: {
+            scatter: {
+                marker: {
+                    radius: 5,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            lineColor: 'rgb(100,100,100)'
+                        }
+                    }
+                },
+                states: {
+                    hover: {
+                        marker: {
+                            enabled: false
+                        }
+                    }
+                },
+                tooltip: {
+                    headerFormat: '<b>{series.name}</b><br>',
+                    pointFormat: '{point.x} cm, {point.y} kg'
+                }
+            }
+        },
+        series: [{
+            name: 'Female',
+            color: 'rgba(223, 83, 83, .5)',
+            data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
+                [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
+                [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
+                [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
+                [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
+                [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
+                [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
+                [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
+                [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
+                [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
+                [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
+                [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
+                [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
+                [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
+                [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
+                [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
+                [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
+                [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
+                [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
+                [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
+                [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
+                [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
+                [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
+                [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
+                [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
+                [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
+                [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
+                [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
+                [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
+                [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
+                [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
+                [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
+                [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
+                [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
+                [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
+                [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
+                [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
+                [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
+                [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
+                [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
+                [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
+                [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
+                [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
+                [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
+                [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
+                [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
+                [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
+                [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
+                [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
+                [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
+                [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
+                [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]]
+
+        }, {
+            name: 'Male',
+            color: 'rgba(119, 152, 191, .5)',
+            data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
+                [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
+                [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
+                [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
+                [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
+                [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
+                [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
+                [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
+                [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
+                [182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
+                [169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
+                [163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
+                [177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
+                [167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
+                [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
+                [174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
+                [180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
+                [180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
+                [175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
+                [176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
+                [184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
+                [157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
+                [165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
+                [185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
+                [177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
+                [188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
+                [166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
+                [185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
+                [190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
+                [176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
+                [172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
+                [167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
+                [172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
+                [193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
+                [167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
+                [188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
+                [171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
+                [182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
+                [188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
+                [175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
+                [177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
+                [174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
+                [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
+                [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
+                [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
+                [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
+                [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
+                [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
+                [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
+                [180.3, 83.2], [180.3, 83.2]]
+        }]
+    });
+});
+
+
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+
+<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
+
+	</body>
+</html>

js/lib/highcharts/examples/sparkline/index.htm

@@ -0,0 +1,680 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+#result {
+    text-align: right;
+    color: gray;
+    min-height: 2em;
+}
+#table-sparkline {
+    margin: 0 auto;
+    border-collapse: collapse;
+}
+th {
+    font-weight: bold;
+    text-align: left;
+}
+td, th {
+    padding: 5px;
+    border-bottom: 1px solid silver;
+    height: 20px;
+}
+
+thead th {
+    border-top: 2px solid gray;
+    border-bottom: 2px solid gray;
+}
+.highcharts-tooltip>span {
+    background: white;
+    border: 1px solid silver;
+    border-radius: 3px;
+    box-shadow: 1px 1px 2px #888;
+    padding: 8px;
+}
+		</style>
+		<script type="text/javascript">
+
+$(function () {
+    /**
+     * Create a constructor for sparklines that takes some sensible defaults and merges in the individual
+     * chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine').
+     */
+    Highcharts.SparkLine = function (a, b, c) {
+        var hasRenderToArg = typeof a === 'string' || a.nodeName,
+            options = arguments[hasRenderToArg ? 1 : 0],
+            defaultOptions = {
+                chart: {
+                    renderTo: (options.chart && options.chart.renderTo) || this,
+                    backgroundColor: null,
+                    borderWidth: 0,
+                    type: 'area',
+                    margin: [2, 0, 2, 0],
+                    width: 120,
+                    height: 20,
+                    style: {
+                        overflow: 'visible'
+                    },
+                    skipClone: true
+                },
+                title: {
+                    text: ''
+                },
+                credits: {
+                    enabled: false
+                },
+                xAxis: {
+                    labels: {
+                        enabled: false
+                    },
+                    title: {
+                        text: null
+                    },
+                    startOnTick: false,
+                    endOnTick: false,
+                    tickPositions: []
+                },
+                yAxis: {
+                    endOnTick: false,
+                    startOnTick: false,
+                    labels: {
+                        enabled: false
+                    },
+                    title: {
+                        text: null
+                    },
+                    tickPositions: [0]
+                },
+                legend: {
+                    enabled: false
+                },
+                tooltip: {
+                    backgroundColor: null,
+                    borderWidth: 0,
+                    shadow: false,
+                    useHTML: true,
+                    hideDelay: 0,
+                    shared: true,
+                    padding: 0,
+                    positioner: function (w, h, point) {
+                        return { x: point.plotX - w / 2, y: point.plotY - h };
+                    }
+                },
+                plotOptions: {
+                    series: {
+                        animation: false,
+                        lineWidth: 1,
+                        shadow: false,
+                        states: {
+                            hover: {
+                                lineWidth: 1
+                            }
+                        },
+                        marker: {
+                            radius: 1,
+                            states: {
+                                hover: {
+                                    radius: 2
+                                }
+                            }
+                        },
+                        fillOpacity: 0.25
+                    },
+                    column: {
+                        negativeColor: '#910000',
+                        borderColor: 'silver'
+                    }
+                }
+            };
+
+        options = Highcharts.merge(defaultOptions, options);
+
+        return hasRenderToArg ?
+            new Highcharts.Chart(a, options, c) :
+            new Highcharts.Chart(options, b);
+    };
+
+    var start = +new Date(),
+        $tds = $('td[data-sparkline]'),
+        fullLen = $tds.length,
+        n = 0;
+
+    // Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
+    // can take some seconds, so we split the input into chunks and apply them in timeouts
+    // in order avoid locking up the browser process and allow interaction.
+    function doChunk() {
+        var time = +new Date(),
+            i,
+            len = $tds.length,
+            $td,
+            stringdata,
+            arr,
+            data,
+            chart;
+
+        for (i = 0; i < len; i += 1) {
+            $td = $($tds[i]);
+            stringdata = $td.data('sparkline');
+            arr = stringdata.split('; ');
+            data = $.map(arr[0].split(', '), parseFloat);
+            chart = {};
+
+            if (arr[1]) {
+                chart.type = arr[1];
+            }
+            $td.highcharts('SparkLine', {
+                series: [{
+                    data: data,
+                    pointStart: 1
+                }],
+                tooltip: {
+                    headerFormat: '<span style="font-size: 10px">' + $td.parent().find('th').html() + ', Q{point.x}:</span><br/>',
+                    pointFormat: '<b>{point.y}.000</b> USD'
+                },
+                chart: chart
+            });
+
+            n += 1;
+
+            // If the process takes too much time, run a timeout to allow interaction with the browser
+            if (new Date() - time > 500) {
+                $tds.splice(0, i + 1);
+                setTimeout(doChunk, 0);
+                break;
+            }
+
+            // Print a feedback on the performance
+            if (n === fullLen) {
+                $('#result').html('Generated ' + fullLen + ' sparklines in ' + (new Date() - start) + ' ms');
+            }
+        }
+    }
+    doChunk();
+
+});
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+
+<div id="result"></div>
+<table id="table-sparkline">
+    <thead>
+        <tr>
+            <th>State</th>
+            <th>Income</th>
+            <th>Income per quarter</th>
+            <th>Costs</th>
+            <th>Costs per quarter</th>
+            <th>Result</th>
+            <th>Result per quarter</th>
+        </tr>
+    </thead>
+    <tbody id="tbody-sparkline">
+        <tr>
+            <th>Alabama</th>
+            <td>254</td>
+            <td data-sparkline="71, 78, 39, 66 "/>
+            <td>296</td>
+            <td data-sparkline="68, 52, 80, 96 "/>
+            <td>-42</td>
+            <td data-sparkline="3, 26, -41, -30 ; column"/>
+        </tr>
+        <tr>
+            <th>Alaska</th>
+            <td>246</td>
+            <td data-sparkline="87, 44, 74, 41 "/>
+            <td>181</td>
+            <td data-sparkline="29, 54, 73, 25 "/>
+            <td>65</td>
+            <td data-sparkline="58, -10, 1, 16 ; column"/>
+        </tr>
+        <tr>
+            <th>Arizona</th>
+            <td>101</td>
+            <td data-sparkline="56, 12, 8, 25 "/>
+            <td>191</td>
+            <td data-sparkline="69, 14, 53, 55 "/>
+            <td>-90</td>
+            <td data-sparkline="-13, -2, -45, -30 ; column"/>
+        </tr>
+        <tr>
+            <th>Arkansas</th>
+            <td>303</td>
+            <td data-sparkline="81, 50, 78, 94 "/>
+            <td>76</td>
+            <td data-sparkline="36, 15, 14, 11 "/>
+            <td>227</td>
+            <td data-sparkline="45, 35, 64, 83 ; column"/>
+        </tr>
+        <tr>
+            <th>California</th>
+            <td>200</td>
+            <td data-sparkline="61, 80, 10, 49 "/>
+            <td>217</td>
+            <td data-sparkline="100, 8, 52, 57 "/>
+            <td>-17</td>
+            <td data-sparkline="-39, 72, -42, -8 ; column"/>
+        </tr>
+        <tr>
+            <th>Colorado</th>
+            <td>118</td>
+            <td data-sparkline="13, 48, 21, 36 "/>
+            <td>273</td>
+            <td data-sparkline="98, 86, 8, 81 "/>
+            <td>-155</td>
+            <td data-sparkline="-85, -38, 13, -45 ; column"/>
+        </tr>
+        <tr>
+            <th>Connecticut</th>
+            <td>201</td>
+            <td data-sparkline="6, 64, 44, 87 "/>
+            <td>148</td>
+            <td data-sparkline="60, 13, 73, 2 "/>
+            <td>53</td>
+            <td data-sparkline="-54, 51, -29, 85 ; column"/>
+        </tr>
+        <tr>
+            <th>Delaware</th>
+            <td>161</td>
+            <td data-sparkline="7, 27, 49, 78 "/>
+            <td>298</td>
+            <td data-sparkline="19, 90, 100, 89 "/>
+            <td>-137</td>
+            <td data-sparkline="-12, -63, -51, -11 ; column"/>
+        </tr>
+        <tr>
+            <th>District of Columbia</th>
+            <td>106</td>
+            <td data-sparkline="18, 39, 27, 22 "/>
+            <td>185</td>
+            <td data-sparkline="62, 97, 24, 2 "/>
+            <td>-79</td>
+            <td data-sparkline="-44, -58, 3, 20 ; column"/>
+        </tr>
+        <tr>
+            <th>Florida</th>
+            <td>249</td>
+            <td data-sparkline="51, 24, 90, 84 "/>
+            <td>244</td>
+            <td data-sparkline="47, 40, 74, 83 "/>
+            <td>5</td>
+            <td data-sparkline="4, -16, 16, 1 ; column"/>
+        </tr>
+        <tr>
+            <th>Georgia</th>
+            <td>183</td>
+            <td data-sparkline="36, 80, 39, 28 "/>
+            <td>212</td>
+            <td data-sparkline="43, 25, 52, 92 "/>
+            <td>-29</td>
+            <td data-sparkline="-7, 55, -13, -64 ; column"/>
+        </tr>
+        <tr>
+            <th>Hawaii</th>
+            <td>232</td>
+            <td data-sparkline="73, 34, 74, 51 "/>
+            <td>172</td>
+            <td data-sparkline="1, 83, 49, 39 "/>
+            <td>60</td>
+            <td data-sparkline="72, -49, 25, 12 ; column"/>
+        </tr>
+        <tr>
+            <th>Idaho</th>
+            <td>166</td>
+            <td data-sparkline="25, 43, 31, 67 "/>
+            <td>152</td>
+            <td data-sparkline="30, 30, 75, 17 "/>
+            <td>14</td>
+            <td data-sparkline="-5, 13, -44, 50 ; column"/>
+        </tr>
+        <tr>
+            <th>Illinois</th>
+            <td>336</td>
+            <td data-sparkline="56, 84, 98, 98 "/>
+            <td>151</td>
+            <td data-sparkline="61, 12, 77, 1 "/>
+            <td>185</td>
+            <td data-sparkline="-5, 72, 21, 97 ; column"/>
+        </tr>
+        <tr>
+            <th>Indiana</th>
+            <td>216</td>
+            <td data-sparkline="52, 87, 64, 13 "/>
+            <td>216</td>
+            <td data-sparkline="2, 47, 94, 73 "/>
+            <td>0</td>
+            <td data-sparkline="50, 40, -30, -60 ; column"/>
+        </tr>
+        <tr>
+            <th>Iowa</th>
+            <td>135</td>
+            <td data-sparkline="41, 45, 19, 30 "/>
+            <td>159</td>
+            <td data-sparkline="17, 34, 45, 63 "/>
+            <td>-24</td>
+            <td data-sparkline="24, 11, -26, -33 ; column"/>
+        </tr>
+        <tr>
+            <th>Kansas</th>
+            <td>184</td>
+            <td data-sparkline="52, 43, 65, 24 "/>
+            <td>215</td>
+            <td data-sparkline="20, 42, 97, 56 "/>
+            <td>-31</td>
+            <td data-sparkline="32, 1, -32, -32 ; column"/>
+        </tr>
+        <tr>
+            <th>Kentucky</th>
+            <td>289</td>
+            <td data-sparkline="85, 74, 98, 32 "/>
+            <td>219</td>
+            <td data-sparkline="37, 38, 93, 51 "/>
+            <td>70</td>
+            <td data-sparkline="48, 36, 5, -19 ; column"/>
+        </tr>
+        <tr>
+            <th>Louisiana</th>
+            <td>257</td>
+            <td data-sparkline="89, 18, 87, 63 "/>
+            <td>201</td>
+            <td data-sparkline="19, 54, 35, 93 "/>
+            <td>56</td>
+            <td data-sparkline="70, -36, 52, -30 ; column"/>
+        </tr>
+        <tr>
+            <th>Maine</th>
+            <td>194</td>
+            <td data-sparkline="17, 68, 61, 48 "/>
+            <td>133</td>
+            <td data-sparkline="44, 35, 42, 12 "/>
+            <td>61</td>
+            <td data-sparkline="-27, 33, 19, 36 ; column"/>
+        </tr>
+        <tr>
+            <th>Maryland</th>
+            <td>204</td>
+            <td data-sparkline="74, 12, 74, 44 "/>
+            <td>157</td>
+            <td data-sparkline="65, 58, 22, 12 "/>
+            <td>47</td>
+            <td data-sparkline="9, -46, 52, 32 ; column"/>
+        </tr>
+        <tr>
+            <th>Massachusetts</th>
+            <td>172</td>
+            <td data-sparkline="44, 35, 69, 24 "/>
+            <td>115</td>
+            <td data-sparkline="26, 3, 69, 17 "/>
+            <td>57</td>
+            <td data-sparkline="18, 32, 0, 7 ; column"/>
+        </tr>
+        <tr>
+            <th>Michigan</th>
+            <td>177</td>
+            <td data-sparkline="99, 26, 13, 39 "/>
+            <td>185</td>
+            <td data-sparkline="20, 37, 99, 29 "/>
+            <td>-8</td>
+            <td data-sparkline="79, -11, -86, 10 ; column"/>
+        </tr>
+        <tr>
+            <th>Minnesota</th>
+            <td>99</td>
+            <td data-sparkline="34, 30, 16, 19 "/>
+            <td>137</td>
+            <td data-sparkline="49, 43, 24, 21 "/>
+            <td>-38</td>
+            <td data-sparkline="-15, -13, -8, -2 ; column"/>
+        </tr>
+        <tr>
+            <th>Mississippi</th>
+            <td>205</td>
+            <td data-sparkline="38, 75, 31, 61 "/>
+            <td>179</td>
+            <td data-sparkline="0, 68, 100, 11 "/>
+            <td>26</td>
+            <td data-sparkline="38, 7, -69, 50 ; column"/>
+        </tr>
+        <tr>
+            <th>Missouri</th>
+            <td>135</td>
+            <td data-sparkline="37, 48, 2, 48 "/>
+            <td>202</td>
+            <td data-sparkline="41, 64, 17, 80 "/>
+            <td>-67</td>
+            <td data-sparkline="-4, -16, -15, -32 ; column"/>
+        </tr>
+        <tr>
+            <th>Montana</th>
+            <td>195</td>
+            <td data-sparkline="48, 81, 38, 28 "/>
+            <td>237</td>
+            <td data-sparkline="44, 33, 86, 74 "/>
+            <td>-42</td>
+            <td data-sparkline="4, 48, -48, -46 ; column"/>
+        </tr>
+        <tr>
+            <th>Nebraska</th>
+            <td>286</td>
+            <td data-sparkline="98, 55, 82, 51 "/>
+            <td>232</td>
+            <td data-sparkline="89, 54, 28, 61 "/>
+            <td>54</td>
+            <td data-sparkline="9, 1, 54, -10 ; column"/>
+        </tr>
+        <tr>
+            <th>Nevada</th>
+            <td>221</td>
+            <td data-sparkline="66, 4, 57, 94 "/>
+            <td>214</td>
+            <td data-sparkline="59, 39, 94, 22 "/>
+            <td>7</td>
+            <td data-sparkline="7, -35, -37, 72 ; column"/>
+        </tr>
+        <tr>
+            <th>New Hampshire</th>
+            <td>136</td>
+            <td data-sparkline="32, 21, 1, 82 "/>
+            <td>306</td>
+            <td data-sparkline="88, 85, 65, 68 "/>
+            <td>-170</td>
+            <td data-sparkline="-56, -64, -64, 14 ; column"/>
+        </tr>
+        <tr>
+            <th>New Jersey</th>
+            <td>194</td>
+            <td data-sparkline="31, 40, 24, 99 "/>
+            <td>147</td>
+            <td data-sparkline="7, 45, 12, 83 "/>
+            <td>47</td>
+            <td data-sparkline="24, -5, 12, 16 ; column"/>
+        </tr>
+        <tr>
+            <th>New Mexico</th>
+            <td>207</td>
+            <td data-sparkline="66, 93, 18, 30 "/>
+            <td>261</td>
+            <td data-sparkline="97, 28, 79, 57 "/>
+            <td>-54</td>
+            <td data-sparkline="-31, 65, -61, -27 ; column"/>
+        </tr>
+        <tr>
+            <th>New York</th>
+            <td>316</td>
+            <td data-sparkline="48, 95, 76, 97 "/>
+            <td>193</td>
+            <td data-sparkline="68, 5, 97, 23 "/>
+            <td>123</td>
+            <td data-sparkline="-20, 90, -21, 74 ; column"/>
+        </tr>
+        <tr>
+            <th>North Carolina</th>
+            <td>175</td>
+            <td data-sparkline="31, 71, 2, 71 "/>
+            <td>188</td>
+            <td data-sparkline="93, 5, 81, 9 "/>
+            <td>-13</td>
+            <td data-sparkline="-62, 66, -79, 62 ; column"/>
+        </tr>
+        <tr>
+            <th>North Dakota</th>
+            <td>181</td>
+            <td data-sparkline="3, 90, 62, 26 "/>
+            <td>288</td>
+            <td data-sparkline="70, 63, 82, 73 "/>
+            <td>-107</td>
+            <td data-sparkline="-67, 27, -20, -47 ; column"/>
+        </tr>
+        <tr>
+            <th>Ohio</th>
+            <td>189</td>
+            <td data-sparkline="70, 50, 6, 63 "/>
+            <td>163</td>
+            <td data-sparkline="21, 94, 4, 44 "/>
+            <td>26</td>
+            <td data-sparkline="49, -44, 2, 19 ; column"/>
+        </tr>
+        <tr>
+            <th>Oklahoma</th>
+            <td>188</td>
+            <td data-sparkline="66, 46, 53, 23 "/>
+            <td>172</td>
+            <td data-sparkline="26, 25, 35, 86 "/>
+            <td>16</td>
+            <td data-sparkline="40, 21, 18, -63 ; column"/>
+        </tr>
+        <tr>
+            <th>Oregon</th>
+            <td>165</td>
+            <td data-sparkline="82, 31, 38, 14 "/>
+            <td>257</td>
+            <td data-sparkline="91, 9, 80, 77 "/>
+            <td>-92</td>
+            <td data-sparkline="-9, 22, -42, -63 ; column"/>
+        </tr>
+        <tr>
+            <th>Pennsylvania</th>
+            <td>268</td>
+            <td data-sparkline="33, 88, 82, 65 "/>
+            <td>129</td>
+            <td data-sparkline="30, 29, 41, 29 "/>
+            <td>139</td>
+            <td data-sparkline="3, 59, 41, 36 ; column"/>
+        </tr>
+        <tr>
+            <th>Rhode Island</th>
+            <td>164</td>
+            <td data-sparkline="8, 86, 32, 38 "/>
+            <td>182</td>
+            <td data-sparkline="88, 8, 18, 68 "/>
+            <td>-18</td>
+            <td data-sparkline="-80, 78, 14, -30 ; column"/>
+        </tr>
+        <tr>
+            <th>South Carolina</th>
+            <td>91</td>
+            <td data-sparkline="24, 18, 0, 49 "/>
+            <td>193</td>
+            <td data-sparkline="72, 62, 21, 38 "/>
+            <td>-102</td>
+            <td data-sparkline="-48, -44, -21, 11 ; column"/>
+        </tr>
+        <tr>
+            <th>South Dakota</th>
+            <td>184</td>
+            <td data-sparkline="73, 17, 64, 30 "/>
+            <td>221</td>
+            <td data-sparkline="21, 91, 57, 52 "/>
+            <td>-37</td>
+            <td data-sparkline="52, -74, 7, -22 ; column"/>
+        </tr>
+        <tr>
+            <th>Tennessee</th>
+            <td>233</td>
+            <td data-sparkline="92, 24, 25, 92 "/>
+            <td>131</td>
+            <td data-sparkline="5, 18, 42, 66 "/>
+            <td>102</td>
+            <td data-sparkline="87, 6, -17, 26 ; column"/>
+        </tr>
+        <tr>
+            <th>Texas</th>
+            <td>211</td>
+            <td data-sparkline="33, 80, 68, 30 "/>
+            <td>225</td>
+            <td data-sparkline="86, 58, 36, 45 "/>
+            <td>-14</td>
+            <td data-sparkline="-53, 22, 32, -15 ; column"/>
+        </tr>
+        <tr>
+            <th>Utah</th>
+            <td>362</td>
+            <td data-sparkline="89, 98, 96, 79 "/>
+            <td>225</td>
+            <td data-sparkline="35, 51, 88, 51 "/>
+            <td>137</td>
+            <td data-sparkline="54, 47, 8, 28 ; column"/>
+        </tr>
+        <tr>
+            <th>Vermont</th>
+            <td>119</td>
+            <td data-sparkline="4, 19, 56, 40 "/>
+            <td>152</td>
+            <td data-sparkline="17, 66, 27, 42 "/>
+            <td>-33</td>
+            <td data-sparkline="-13, -47, 29, -2 ; column"/>
+        </tr>
+        <tr>
+            <th>Virginia</th>
+            <td>127</td>
+            <td data-sparkline="24, 27, 41, 35 "/>
+            <td>71</td>
+            <td data-sparkline="30, 2, 36, 3 "/>
+            <td>56</td>
+            <td data-sparkline="-6, 25, 5, 32 ; column"/>
+        </tr>
+        <tr>
+            <th>Washington</th>
+            <td>165</td>
+            <td data-sparkline="40, 11, 63, 51 "/>
+            <td>245</td>
+            <td data-sparkline="46, 41, 94, 64 "/>
+            <td>-80</td>
+            <td data-sparkline="-6, -30, -31, -13 ; column"/>
+        </tr>
+        <tr>
+            <th>West Virginia</th>
+            <td>248</td>
+            <td data-sparkline="66, 56, 97, 29 "/>
+            <td>171</td>
+            <td data-sparkline="65, 53, 37, 16 "/>
+            <td>77</td>
+            <td data-sparkline="1, 3, 60, 13 ; column"/>
+        </tr>
+        <tr>
+            <th>Wisconsin</th>
+            <td>183</td>
+            <td data-sparkline="24, 55, 21, 83 "/>
+            <td>224</td>
+            <td data-sparkline="80, 64, 13, 67 "/>
+            <td>-41</td>
+            <td data-sparkline="-56, -9, 8, 16 ; column"/>
+        </tr>
+        <tr>
+            <th>Wyoming</th>
+            <td>231</td>
+            <td data-sparkline="52, 49, 97, 33 "/>
+            <td>251</td>
+            <td data-sparkline="96, 50, 23, 82 "/>
+            <td>-20</td>
+            <td data-sparkline="-44, -1, 74, -49 ; column"/>
+        </tr>
+    </tbody>
+</table>
+	</body>
+</html>