====== Highcharts ======

Highcharts est un script javascript permettant de générer des graphiques dynamiques en SVG. Il possède de nombreuses fonctionnalités et permet d'exporter les graphiques au format png, jpeg, svg, pdf.

Site web => http://www.highcharts.com/
Docs API => http://api.highcharts.com/

===== Options par défaut =====

Il est important de savoir que highcharts converti les données horaire en gmt ce qui peut créer des surprises. Nous allons supprimer cette option et en même temps franciser le tout.
<code javascript>
  Highcharts.setOptions({
    lang: {
      loading: 'Chargement en cours',
      rangeSelectorZoom: '',
      months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
      weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
      shortMonths: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jui', 'Jui', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'],
      decimalPoint: ',',
      thousandsSep: " "
    },
    global: {
      useUTC: false
    }
  });
</code>

===== Exporter soi-même =====

Par défaut lorsque vous exportez votre graphique, les données sont envoyées sur le serveur highcharts qui se charge de nous générer un pdf ou une image. Pour plusieurs raison, nous voulons exporter nous même nos graphs.

Tuto => http://www.highcharts.com/docs/export-module/render-charts-serverside

Télécharger **phantomJS** sur http://phantomjs.org/download.html suivant votre système 32 ou 64bits.

Une fois décompressé nous avons besoin uniquement du binaire **phantomjs** qui se trouve dans le répertoire bin. Nous allons le copier dans **/usr/local/bin** pour qu'il soit accessible de partout.

Téléchargez le fichier [[https://raw.githubusercontent.com/highslide-software/highcharts.com/master/exporting-server/phantomjs/highcharts-convert.js|highcharts-convert.js]]

et modifiez la partie config

Assurez vous de copier les fichiers suivant et de les placer selon votre configuration précédente (disponible => https://github.com/highslide-software/highcharts.com/tree/master/exporting-server/phantomjs )
  * jquery.1.9.1.min.js
  * highstock.js
  * highcharts.js
  * highcharts-more.js
  * data.js

===== Graphique avec une ligne pleine et pointillée mélangée =====

<code javascript>
$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            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: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y +'°C';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5,null,24.8,24.1,20.1]
            }, {
                name: 'New York',
                data: [{x: 5, y: 21.5}, {x: 6, y: 22.0},{x: 7, y: 24.8}, {x: 8, y: null}, {x: 9, y: 20.1}, {x:10, y: 14.1}, {x:11, y: 13}],
                dashStyle: 'dash'
            }]
        });
    });
    
});
</code>
exemple => http://jsfiddle.net/mkremer90/zMZEV/1/

<code javascript>
$(function () {
    $('#container').highcharts({
        title: {
            text: 'Zone with dash style'
        },
        subtitle: {
            text: 'Dotted line typically signifies prognosis'
        },
    	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],
    	    zoneAxis: 'x',
    	    zones: [{
    	        value: 7,
                dashStyle: 'solid'
    	    }, {
    	        value: 8,
                dashStyle: 'dot'
    	    }, {
                value: 9,
    	        dashStyle: 'solid'
    	    }]
    	}]
    });
});
</code>

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/series/color-zones-dashstyle-dot/