ChartJS - how to create chart?

Question

I have a dateset like below:

[
    [
        1446940800, //week in epoch
        705077, //additions
        -279 //delitions
    ],
    [
        1447545600,
        7069,
        -5261
    ],
    [
        1448150400,
        13874,
        -11025
    ],
]

how to create a very simply chart with using chartjs with provided data? I'm totaly newbie with chartjs and i do not know how to start:(

i need to create this in vuejs, thanks a lot for all help

Answer 1

I wrote a function to reformat your data so that it could easily fit in a chart (push the different values in arrays).

 const data = [ [ 1446940800, //week in epoch 7050, //additions -279 //delitions ], [ 1447545600, 7069, -5261 ], [ 1448150400, 13874, -11025 ], ]; function reformatdata(datapoints) { const reformatted = { weeks: [], additions: [], deletions: [], } for (let i = 0; i < datapoints.length; i++) { reformatted.weeks.push(datapoints[i][0]); reformatted.additions.push(datapoints[i][1]); reformatted.deletions.push(datapoints[i][2]); } return reformatted; } const chartdata = reformatdata(data); console.log(chartdata);

With Chart.js it is easy to create different sorts of charts to display data, I made this example of a line chart. Also don't forget to include a cdn link to Chart.js or a link to the downloaded library in your html file.

 // code for the line chart var ctx = document.getElementById('myLineChart').getContext('2d'); var chart = new Chart(ctx, { // The type of chart we want to create type: 'line', // The data for our dataset data: { labels: chartdata.weeks, // the weeks as x axis labels and values datasets: [{ // y axis labels and values label: 'Additions', borderColor: 'rgb(255, 99, 132)', data: chartdata.additions // additions }, { label: 'Deletions', borderColor: 'rgb(132, 99, 255)', data: chartdata.deletions // deletions }] }, });

 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> <canvas id="myLineChart"></canvas>

This would be the same for every chart type, for example, this is the code for a bar chart. Notice that I changed the borderColor to backgroundcolor for better visualization.

 // code for the bar chart var ctx = document.getElementById('myBarChart').getContext('2d'); var chart = new Chart(ctx, { // The type of chart we want to create type: 'bar', // The data for our dataset data: { labels: chartdata.weeks, datasets: [{ label: 'Additions', backgroundColor: 'rgb(255, 99, 132)', data: chartdata.additions }, { label: 'Deletions', backgroundColor: 'rgb(132, 99, 255)', // changed border to bgcolor data: chartdata.deletions }] }, });

 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> <canvas id="myBarChart"></canvas>

There is a lot of info out there, maybe it would be interesting to check out all the different possibilities and settings.

Demo link: jsfiddle