JqueryViz

Ce package a pour objectif de fournir des components faisant le lien entre jquery et highcharts.

Pour utiliser un chart (par exemple un line-chart), il suffit dans le html d'indiquer la directive "pie-chart", ainsi que de définir sa config, et sa data. Exemple d'appel d'un pie-chart :

chartData = {adapters: adapters, data: data}

adapters = [ { 'field': 'countPdchLent', 'color': '#D9ED92', 'label': 'PDCH lents (< 21 kVA)' }, { 'field': 'countPdchMoyen', 'color': '#B5E48C', 'label': 'PDCH moyens (22 à 49 kVA)' }, { 'field': 'countPdchRapide', 'color': '#99D98C', 'label': 'PDCH rapides (50 à 99 kVA)' }, { 'field': 'countPdchTresRapide', 'color': '#76C893', 'label': 'PDCH très rapides (100 à 149 kVA)' }, { 'field': 'countPdchSuperCharge', 'color': '#52B69A', 'label': 'PDCH super charge (> 150 kVA)' } ];

data = [ { "countPdchLent": 7344, "countPdchMoyen": 16835, "countPdchRapide": 517, "countPdchTresRapide": 1558, "countPdchSuperCharge": 0, "revisionYear": 2018, "revisionMonth": 12 }, { "countPdchLent": 8397, "countPdchMoyen": 19291, "countPdchRapide": 638, "countPdchTresRapide": 1741, "countPdchSuperCharge": 136, "revisionYear": 2019, "revisionMonth": 12 }, { "countPdchLent": 9491, "countPdchMoyen": 22362, "countPdchRapide": 771, "countPdchTresRapide": 1758, "countPdchSuperCharge": 304, "revisionYear": 2020, "revisionMonth": 12 }, { "countPdchLent": 16495, "countPdchMoyen": 29292, "countPdchRapide": 1395, "countPdchTresRapide": 1867, "countPdchSuperCharge": 1280, "revisionYear": 2021, "revisionMonth": 12 } ];

Résultat : voir exemple_line-chart.png