Permalink
Browse files

Added demos. Updated sample viewer.

  • Loading branch information...
1 parent 680a58e commit a668511a2f141ee1583353337c59ad5a34969298 @TorsteinHonsi TorsteinHonsi committed May 31, 2012
View
@@ -68,19 +68,47 @@
li.different, li.different a {
background: red;
color: white;
-
+ }
+
+ body {
+ margin: 0;
+ }
+ #top-nav {
+ color: white;
+ font-family: Arial, sans-serif;
+ padding: 0.5em;
+ height: 3.5em;
+ background: #57544A;
+ background: -webkit-linear-gradient(top, #57544A, #37342A);
+ background: -moz-linear-gradient(top, #57544A, #37342A);
+ box-shadow: 0px 0px 8px #888;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ }
+ #top-nav a {
+ color: white;
+ font-weight: bold;
+
+ }
+ #main-nav {
+ margin-top: 60px;
+ margin-left: 10px;
+ }
</style>
</head>
<body>
- Product: <a href='?product=highcharts'>Highcharts</a> | <a href='?product=highstock'>Highstock</a>
- <br/>
- <button id="batch-compare">Batch compare</button>
- <hr/>
+ <div id="top-nav">
+ Product: <a href='?product=highcharts'>Highcharts</a> | <a href='?product=highstock'>Highstock</a>
+ <br/>
+ <button id="batch-compare">Batch compare</button>
+ </div>
+ <div id="main-nav">
<?php
if (isset($dir)) {
if ($handle = opendir(dirname(__FILE__). '/' . $dir)) {
@@ -115,5 +143,6 @@
}
}
?>
+</div>
</body>
</html>
@@ -0,0 +1,5 @@
+---
+ name: Highcharts Demo
+ authors:
+ - Torstein Hønsi
+...
@@ -0,0 +1,2 @@
+<script src="http://code.highcharts.com/highcharts.js"></script>
+<div id="container" style="height: 300px"></div>
@@ -0,0 +1,56 @@
+$(function () {
+ var chart = new Highcharts.Chart({
+
+ chart: {
+ renderTo: 'container',
+ type: 'pie',
+ width: 500,
+ borderWidth: 2
+ },
+
+ title: {
+ text: 'Legend navigation demo'
+ },
+
+ credits: {
+ enabled: false
+ },
+
+ legend: {
+ layout: 'vertical',
+ align: 'right',
+ verticalAlign: 'top',
+ y: 30,
+ navigation: {
+ activeColor: '#3E576F',
+ animation: true,
+ arrowSize: 12,
+ inactiveColor: '#CCC',
+ style: {
+ fontWeight: 'bold',
+ color: '#333',
+ fontSize: '12px'
+ }
+ }
+ },
+
+ series: [{
+ data: (function () {
+ var names = 'Ari,Bjartur,Bogi,Bragi,Dánjal,Dávur,Eli,Emil,Fróði,Hákun,Hanus,Hjalti,Ísakur,' +
+ 'Johan,Jóhan,Julian,Kristian,Leon,Levi,Magnus,Martin,Mattias,Mikkjal,Nóa,Óli,Pauli,Petur,Rói,Sveinur,Teitur',
+ arr = [];
+
+ Highcharts.each(names.split(','), function (name) {
+ arr.push({
+ name: name,
+ y: Math.round(Math.random() * 100)
+ });
+ });
+
+ return arr;
+ }()),
+ showInLegend: true
+ }]
+
+ });
+});
@@ -0,0 +1,5 @@
+---
+ name: Highcharts Demo
+ authors:
+ - Torstein Hønsi
+...
@@ -0,0 +1,3 @@
+<script src="http://code.highcharts.com/highcharts.js"></script>
+
+<div id="container" style="height: 300px"></div>
@@ -0,0 +1,38 @@
+$(function () {
+ var chart = new Highcharts.Chart({
+
+ chart: {
+ renderTo: 'container'
+ },
+
+ title: {
+ text: 'Padding and item margins demonstrated'
+ },
+
+ legend: {
+ layout: 'vertical',
+ align: 'right',
+ verticalAlign: 'top',
+ y: 50,
+ padding: 3,
+ itemMarginTop: 5,
+ itemMarginBottom: 5,
+ itemStyle: {
+ lineHeight: '14px'
+ }
+ },
+
+ xAxis: {
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+ },
+
+ 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]
+ }, {
+ data: [95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1]
+ }, {
+ data: [71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9],
+ name: 'Series 3<br/>has a two-line name'
+ }]
+ });
+});
@@ -0,0 +1,5 @@
+---
+ name: Highcharts Demo
+ authors:
+ - Torstein Hønsi
+...
@@ -0,0 +1,3 @@
+<script src="http://code.highcharts.com/highcharts.js"></script>
+
+<div id="container" style="height: 400px"></div>
@@ -0,0 +1,22 @@
+$(function () {
+ var chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ type: 'area'
+ },
+ xAxis: {
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+ },
+
+ plotOptions: {
+ series: {
+ threshold: 100,
+ trackByArea: true
+ }
+ },
+
+ 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]
+ }]
+ });
+});
@@ -0,0 +1,5 @@
+---
+ name: Highcharts Demo
+ authors:
+ - Torstein Hønsi
+...
@@ -0,0 +1,3 @@
+<script src="http://code.highcharts.com/highcharts.js"></script>
+
+<div id="container" style="height: 400px"></div>
@@ -0,0 +1,23 @@
+$(function () {
+ var chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container'
+ },
+
+ tooltip: {
+ positioner: function () {
+ return { x: 80, y: 50 };
+ }
+ },
+
+ xAxis: {
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+ },
+
+ 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]
+ }, {
+ data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]
+ }]
+ });
+});
@@ -0,0 +1,5 @@
+---
+ name: Highcharts Demo
+ authors:
+ - Torstein Hønsi
+...
@@ -0,0 +1,3 @@
+<script src="http://code.highcharts.com/highcharts.js"></script>
+
+<div id="container" style="height: 300px; width: 500px"></div>
@@ -0,0 +1,47 @@
+$(function () {
+ var chart = new Highcharts.Chart({
+ chart: {
+ renderTo: 'container',
+ plotBorderWidth: 1
+ },
+
+ title: {
+ text: null
+ },
+
+ xAxis: [{
+ type: 'datetime',
+ labels: {
+ overflow: 'justify'
+ },
+ title: {
+ text: 'Justified labels'
+ }
+ }, {
+ type: 'datetime',
+ linkedTo: 0,
+ opposite: true,
+ title: {
+ text: 'Non-justified labels'
+ }
+ }],
+
+
+
+ yAxis: {
+ title: {
+ text: null
+ },
+ labels: {
+ enabled: false
+ }
+ },
+
+ series: [{
+ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6],
+ pointStart: (new Date()).setUTCHours(0),
+ pointInterval: 24 * 3600 * 1000,
+ showInLegend: false
+ }]
+ });
+});
@@ -0,0 +1,5 @@
+---
+ name: Highcharts Stock Demo
+ authors:
+ - Torstein Hønsi
+ ...
@@ -0,0 +1,5 @@
+<div id="container" style="height: 400px; min-width: 600px"></div>
+
+<script src="http://code.highcharts.com/stock/highstock.js"></script>
+<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
+<script type="text/javascript" src="http://www.highcharts.com/samples/data/usdeur.js"></script>
@@ -0,0 +1,29 @@
+$(function() {
+ var chart = new Highcharts.StockChart({
+
+ chart: {
+ renderTo: 'container'
+ },
+
+ tooltip: {
+ backgroundColor: 'white',
+ borderWidth: 0,
+ borderRadius: 0,
+ headerFormat: '{point.key} ',
+ pointFormat: ' | <span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b>',
+ positioner: function () {
+ return { x: 10, y: 35 };
+ },
+ shadow: false
+ },
+
+ rangeSelector: {
+ selected: 1
+ },
+
+ series: [{
+ name: 'USD to EUR',
+ data: usdeur
+ }]
+ });
+});
View
@@ -77,7 +77,7 @@ function getResources() {
$(li).addClass('hilighted');
$(contentDoc.body).animate({
- scrollTop: $(li).offset().top - 50
+ scrollTop: $(li).offset().top - 70
},'slow');
contentDoc.currentLi = li;

0 comments on commit a668511

Please sign in to comment.