Chart = require('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js')
renderChart(data, {
"labelColumn" : "DAY",
"dataColumn" : "SESSION-COUNT",
"afterLabelColumn" : "RANGE"
})
// renderChart(data)
renderChart = function renderChart(data, labels){
let labels_arr = [];
let data_arr = [];
let after_label_arr = [];
let label_str = !!labels ? labels["dataColumn"] : "";
let x_axis_label = !!labels ? labels["labelColumn"] : "";
let y_axis_label = !!labels ? labels["dataColumn"] : "";
let after_label = !!labels ? labels["afterLabelColumn"] : "";
if(!!labels){
labels_arr = data.map((obj)=>{
return obj[labels.labelColumn];
})
data_arr = data.map((obj)=>{
return obj[labels.dataColumn];
})
after_label_arr = data.map((obj)=>{
return obj[labels.afterLabelColumn];
})
}else{
label_str = Object.keys(data[0])[0];
y_axis_label =Object.keys(data[0])[0];
x_axis_label =Object.keys(data[0])[1];
after_label = Object.keys(data[0])[2];
data.forEach((obj)=>{
data_arr.push(Object.values(obj)[0]);
labels_arr.push(Object.values(obj)[1]);
after_label_arr.push(Object.values(obj)[1]);
})
}
const container = html`<canvas id="myChart"></canvas>`;
const myChart = new Chart(container, {
type: 'bar',
data: {
labels: labels_arr,
datasets: [{
label: label_str,
data: data_arr,
borderWidth: 1
}]
},
options : {
tooltips:{
callbacks: {
afterLabel: function(e){
return x_axis_label +" : "+ labels_arr[e.index] +'\n'+ after_label +" : "+after_label_arr[e.index]
}
}
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: y_axis_label
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: x_axis_label
}
}],
}
},
});
return container;
}
data = [
{ "SESSION-COUNT": 224,"DAY": 0, "RANGE": "JAN" },
{ "SESSION-COUNT": 195,"DAY": 1, "RANGE": "FEB"},
{ "SESSION-COUNT": 242,"DAY": 2, "RANGE": "MAR"},
{ "SESSION-COUNT": 237,"DAY": 3, "RANGE": "APR"},
{ "SESSION-COUNT": 232,"DAY": 4, "RANGE": "MAY"},
{ "SESSION-COUNT": 269,"DAY": 5, "RANGE": "JUN"},
{ "SESSION-COUNT": 244,"DAY": 6, "RANGE": "JUL"},
]
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
