Código de Chart.js con múltiples tipos – Parte 1

Todos sabemos lo poderoso que es ChartJS 2.x en la representación de gráficos, y en algunos casos, ChartJS es más robusto en comparación con Google Chart. En este contenido, hablaremos sobre la visualización de múltiples tipos en ChartJS.

Suponiendo que estás utilizando un servidor PHP, necesitamos json_encode para mostrar en JavaScript. Además del gráfico de líneas, puedes configurarlo en forma de gráfico de barras, radar, entre otros.

Gráfico de linea
Gráfico de barras

1. Etiqueta HTML para mostrar el gráfico:

<div class=”chart-container” style=”position: relative; height:auto; width:50%; margin:0 auto”>
<canvas id=”myChart” width=”900″ height=”300″></canvas>
</div>

– Establecer la fuente de datos predeterminada obtenida de php:

$data_source = [
“labels” => [
‘2020-01’,
‘2020-02’,
‘2020-03’,
‘2020-04’,
‘2020-05′,
],
“el1” => [
’10’, ’15’, ’20’, ’25’, ’31’
],
“el2” => [
’11’, ’22’, ’22’, ’28’, ’32’
],
“el3” => [
’14’, ’25’, ’26’, ’30’, ’33’
]
];

2. Css:

<style>
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>

3. Biblioteca JS

<!– // start chartjs  –>
<script src=”assets/chartjs/2.13.0moment.min.js”></script>
<script src=”assets/chartjs/2.8.0Chart.min.js”></script>
<script src=”assets/chartjs/utils.js”></script>

4. Asigne el código js para mostrar el gráfico.

var datas = <?php echo json_encode($data_source); ?>;
var ctx = document.getElementById(‘myChart’);
var myChart = new Chart(ctx, {
type: ‘line’,
data: {
labels: datas[“labels”],
datasets: [
{
label: ‘Label1’,
borderColor: window.chartColors.blue,
borderWidth: 2,
fill: false,
data: datas[“el1”],
borderColor : “red”,
backgroundColor : “red”,
lineTension: 0, // strainghtlines
},
{
label: ‘Label2’,
borderColor: window.chartColors.blue,
borderWidth: 2,
fill: false,
data: datas[“el2”],
borderColor : “blue”,
backgroundColor : “blue”,
lineTension: 0, // straightlines
},
{
label: ‘Label3’,
borderColor: window.chartColors.blue,
borderWidth: 2,
fill: false,
data: datas[“el3”],
borderColor : “#a9a518”,
backgroundColor : “#a9a518”,
lineTension: 0,
},

]
},
options: {
responsive: true,
title: {
display: true,
text: ‘Label’
},
tooltips: {
mode: ‘index’,
intersect: true
},
annotation: {
annotations: [
{
type: ‘line’,
mode: ‘horizontal’,
scaleID: ‘y-axis-0’,
value: 5,
borderColor: ‘rgb(75, 192, 192)’,
borderWidth: 4,
label: {
enabled: false,
content: ‘Label’
}
}
]
}
}
});

Descargar Código de Chart.js

Revisa la parte 2 del codigo

Código personalizable de gráficos Chart.js con múltiples tipos y ejes y – parte 2

1 comentario en «Código de Chart.js con múltiples tipos – Parte 1»

Deja un comentario