Negli script #126 e #128 abbiamo visto come utilizzare la libreria Chart.js per generare grafici a torta e a barre utilizzando il controllo HTML Canvas e la libreria Chart.js. In questo script ci occupiamo di un'altra funzionalità offerta dalla libreria Chart.js: la creazione di grafici a linee che sono utili per indicare un trend. Il primo passo consiste sempre nella dichiararazione, nel codice HTML, del canvas specificandone le dimensioni.

<canvas id="cvChart" width="400" height="400"></canvas>

Il secondo passo consiste nel recuperare l'istanza del contesto 2d del canvas e passarlo in input al costruttore della classe Chart messa a disposizione da Chart.js.

var ctx = document.getElementById("cvChart").getContext("2d");
var lineChart = new Chart(ctx);

Il terzo e ultimo passo consiste nel creare i dati per il grafico e passarli al metodo Line della classe Chart. Oltre ai dati va passato un secondo oggetto che contiene delle proprietà per personalizzare il grafico.

var data = {
  labels: ["Venerdì", "Sabato", "Domenica"],
    datasets: [
        {
            label: "data",
            fillColor: "rgba(0, 0, 255, 0.5)",
            strokeColor: "rgba(0, 0, 255, 0.8)",
            pointHighlightFill: "rgba(0, 0, 255, 0.75)",
            pointHighlightStroke: "rgba(0, 0, 255, 1)",
            data: [150, 80, 90]
        }
    ]
};


var line = lineChart.Line(data, {});