Les méthodes dbmCharts.createPieChart et dbmCharts.createLineChart sont préconfigurées, ils vous suffit d'ajouter les données voulues.
La clé labels permet de rajouter des parties de camembert ou des repères en abscices dans un tableau de string.
L'attribut datasets définit les données et la couleur par laquelle elle vont être représentées à l'aide d'un tableau d'object
Le tableau backgroundColor permet de changer la couleur des différentes parties des camemberts
Pour les courbes, backgroundColor change la couleur de la zone en dessous, tandis que borderColor change la couleur de la courbe elle même
<div class="u-framed u-columnCenterSpaceBetween o-card">
<div class="u-title--small u-text-center u-vBubble">Contrôle de compactage</div>
<div class="u-canvasholder u-vBubble">
<canvas id="pieChart1" width="" height=""></canvas>
</div>
</div>
<script>
var pieChart1 = dbmCharts.createPieChart('pieChart1', {
labels: ['Accepté', 'Refusé'],
datasets: [{
backgroundColor: [lightblue, darkblue],
data: [ 30, 45]
}]
});
</script>
<div class="u-framed u-columnCenterSpaceBetween o-card--double">
<div class="u-title--small u-text-center u-vBubble">Sondages importés</div>
<div class="u-canvasholder u-vBubble">
<canvas id="lineChart1" width="20" height="10"></canvas>
</div>
</div>
<script>
var lineChart1 = dbmCharts.createLineChart('lineChart1', {
labels: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet'],
datasets: [{
label: 'Légende',
backgroundColor: 'transparent',
borderColor: lightblue,
data: [ 65, 60, 80, 82, 58, 57, 85],
borderWidth: 1,
},
{
label: 'Test',
backgroundColor: 'transparent',
borderColor: violet,
data: [ undefined, 35, 20, 10, undefined, 78, 87],
borderWidth: 1,
}
]
});
</script>