Skip to content

Instantly share code, notes, and snippets.

@karlcow

karlcow/weekly.js

Last active Apr 7, 2021
Embed
What would you like to do?
code JS demo pour présentation de données. utilisant https://www.chartjs.org/
// convert from date string to date object
function convert_to_date(date_str) {
var timestamp = Date.parse(date_str);
var date_obj = new Date(timestamp);
return date_obj;
}
// Create a label string of two dates for each week starting with the beginning date.
function make_labels(date_start) {
var date_obj = date_start.timestamp;
date_str_start = date_obj.toLocaleDateString("en-US", date_options);
date_obj.setDate(date_obj.getDate() + 6);
date_str_end = date_obj.toLocaleDateString("en-US", date_options);
return [date_str_start + " - " + date_str_end];
}
// Convert data_structure
function data_with_date_obj(val) {
return {
count: val.count,
timestamp: convert_to_date(val.timestamp),
};
}
// raw data
const raw_data = [
{ count: 284, timestamp: "2021-02-01T00:00:00Z" },
{ count: 321, timestamp: "2021-02-08T00:00:00Z" },
{ count: 275, timestamp: "2021-02-15T00:00:00Z" },
{ count: 266, timestamp: "2021-02-22T00:00:00Z" },
{ count: 321, timestamp: "2021-03-01T00:00:00Z" },
{ count: 288, timestamp: "2021-03-08T00:00:00Z" },
{ count: 262, timestamp: "2021-03-15T00:00:00Z" },
{ count: 469, timestamp: "2021-03-22T00:00:00Z" },
{ count: 700, timestamp: "2021-03-29T00:00:00Z" },
];
// convert the data set to have timestamps as date objects
var normalized_data = raw_data.map(data_with_date_obj);
// formatting options for dates
const date_options = { year: "numeric", month: "long", day: "numeric" };
// Create the list of date labels for the graphs.
var date_labels = normalized_data.map(make_labels);
// Create the context of the canvas graph
var ctx = document.getElementById("weekly_chart").getContext("2d");
// Data configuration
const data = {
datasets: [
{
label: "weekly distribution",
data: normalized_data,
backgroundColor: 'rgba(255, 205, 86, 0.2)',
borderColor: 'rgb(255, 159, 64)',
borderWidth: 1
},
],
labels: date_labels,
};
// Graph options
const options = {
parsing: {
xAxisKey: "timestamp",
yAxisKey: "count",
},
layout: {
padding: {
left: 20,
right: 20,
top: 20,
},
},
scales: {
x: {
grid: {
display: false
}
}
}
};
// Define the bar chart
var myChart = new Chart(ctx, {
type: "bar",
data: data,
options: options,
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment