In chart.js, how do I add data to a chart based on its date?

markbackhouse · January 4, 2018, 1:10pm

I have an array of objects, each containing the date (using new Date()) in which the object was added to the array.

I want to show a bar chart that tells you how many of these objects were added in any given week.

So if I added four new objects to my array this week, I want this week’s section of the bar chart to display 4, and so on.

I was thinking of making each weekly interval on the axes a Sunday-to-Sunday width, but I am unsure how to specify this in Chart.js. Further, I have no idea how to count the number of each object that should go into each interval, thus forming the vertical heights of each bar. Is anyone able to help? Thanks!

anna_liebt · January 4, 2018, 1:28pm

Hello,

if you have an array the lenght property tells you how many elements in the array.

chart.js has a data property which holds array witch values correponding to labels.

chart.js is well documented. Also you can look at the gihup repro how they made the examples, maybe this is close to that what you looking for.

github.com

chartjs/Chart.js/blob/master/samples/charts/bar/multi-axis.html

<!doctype html>
<html>

<head>
    <title>Bar Chart Multi Axis</title>
    <script src="../../../dist/Chart.bundle.js"></script>
    <script src="../../utils.js"></script>
    <style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
</head>

<body>
    <div style="width: 75%">
        <canvas id="canvas"></canvas>
    </div>

This file has been truncated. show original

Try coding, if something not working, then provide code for specific help.

For a more angular way you can grab references with @ViewChild.

Best regards, anna-liebt