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/

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.

  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
    }
  });

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 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

$(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'
            }]
        });
    });
 
});

exemple ⇒ http://jsfiddle.net/mkremer90/zMZEV/1/

$(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'
    	    }]
    	}]
    });
});

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