Nello script #126 abbiamo visto come utilizzare la libreria Chart.js per generare grafici a torta utilizzando il controllo HTML Canvas. In questo script ci occupiamo di un'altra funzionalità offerta dalla libreria Chart.js: la creazione di grafici a barre. 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.

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

Il terzo e ultimo passo consiste nel creare i dati per il grafico e passarli al metodo Bar 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)",
            highlightFill: "rgba(0, 0, 255, 0.75)",
            highlightStroke: "rgba(0, 0, 255, 1)",
            data: [150, 80, 90]
        }
    ]
};


var bar = pieChart.Bar(data, {});