Chart = require('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js')
renderBar(data)
renderBar = function renderBar(data){
let arr = data;
let count = 0;
let y1_label = "";
let y2_label = "";
let y1_data_array = [];
let y2_data_array = [];
let x1_label = "";
let x1_data_array = [];
for (const [key, value] of Object.entries(arr[0])) {
if(typeof value === "number" && count <2){
count += 1;
if(count === 1){
y1_label = key;
}
if(count === 2){
y2_label = key;
}
}
}
for (const [key, value] of Object.entries(arr[0])) {
if(key !== y1_label && key !== y2_label) {
x1_label = key;
break;
}
}
arr.forEach((obj,index)=>{
for (const [key, value] of Object.entries(obj)) {
if(key === y1_label){
y1_data_array.push(value);
}
if(key === y2_label){
y2_data_array.push(value);
}
if(key === x1_label){
x1_data_array.push(value)
}
}
})
let after_label_data_arr = [];
let after_label_key_arr = [];
let after_label_obj = {};
arr.forEach((object, index)=>{
for (const [key, value] of Object.entries(object)) {
if(key !== y1_label && key !== y2_label && key !== x1_label){
if(!after_label_data_arr[index]){
after_label_data_arr.push(key + " : " + value )
}else{
let str = after_label_data_arr[index];
after_label_data_arr[index]= str + '\n'+(key + " : " + value +" ");
}
}
}
})
console.log(after_label_data_arr);
let data_set = [];
if(!y2_data_array[0]){
data_set = [{
label: y1_label,
data: y1_data_array,
borderWidth: 1,
backgroundColor: "blue"
}]
}else{
data_set=[
{
label: y1_label,
data: y1_data_array,
borderWidth: 1,
backgroundColor: "blue"
},
{
label: y2_label,
data: y2_data_array,
borderWidth: 1,
backgroundColor: "red"
}
]
}
const container = html`<canvas ></canvas>`;
const myChart = new Chart(container, {
type: 'bar',
data: {
labels: x1_data_array,
datasets: data_set
},
options: {
tooltips:{
callbacks: {
afterLabel: function(e){
if(!y2_data_array[0]){
return '\n'+ y1_label + " : " +y1_data_array[e.index]
+ '\n' + x1_label + " : " +x1_data_array[e.index]
+ '\n' + after_label_data_arr[e.index]
}else{
return '\n'+ y1_label + " : " +y1_data_array[e.index]
+ '\n' + y2_label + " : " +y2_data_array[e.index]
+ '\n' + x1_label + " : " +x1_data_array[e.index]
+ '\n' + after_label_data_arr[e.index]
}
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
},
);
return container;
}
data = [
{ "SESSION-COUNT": 22,"RANGE": "JAN", "NAME": "RUMA","SHARE": 20 , "NEW": "new1"},
{ "SESSION-COUNT": 12,"RANGE": "FEB", "NAME": "HEEA","SHARE": 15 , "NEW": "new2"},
{ "SESSION-COUNT": 2,"RANGE": "MAR", "NAME": "RU","SHARE": 10 , "NEW": "new3"},
{ "SESSION-COUNT": 1,"RANGE": "APR", "NAME": "HEE","SHARE": 5 , "NEW": "new4"}
]
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.
