BAR CHART
renderBar(data,{
domain: ["LABH", "LOSS"],
range: ["DATE"]
});
Chart = require('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js')
renderBar = function renderBar(data, property) {
let type = "bar";
let domain = "";
let range = "";
let domain_arr = [];
let range_arr = [];
let labels = [];
let label = "";
let labelStringX = "";
let labelStringY = "";
let is_grouped_bar_chart = false;
let domain_arr_one = [];
let domain_arr_two = [];
let range_arr_one = [];
let range_arr_two = [];
if (!property) {
let keys = Object.keys(data[0]);
for (let index = 0; index < keys.length; ++index) {
if (typeof data[0][keys[index]] === "number") {
domain = keys[index];
break;
}
}
for (let index = 0; index < keys.length; ++index) {
if (typeof data[0][keys[index]] === "number" && keys[index] !== domain) {
range = keys[index];
break;
}
}
data.forEach((obj, index) => {
for (const [key, value] of Object.entries(obj)) {
if (key === domain) {
domain_arr.push(value);
}
if (key === range) {
range_arr.push(value);
}
}
})
label = range;
labels = domain_arr;
labelStringX = domain;
labelStringY = range;
} else {
if (property.domain.length > 1 || property.range.length > 1) {
is_grouped_bar_chart = true;
data.forEach((obj, index) => {
for (const [key, value] of Object.entries(obj)) {
if (key === property.domain[0]) {
domain_arr_one.push(value);
}
if (key === property.domain[1]) {
domain_arr_two.push(value);
}
if (key === property.range[0]) {
range_arr_one.push(value);
}
if (key === property.range[1]) {
range_arr_two.push(value);
}
}
})
console.log(range_arr_one);
console.log(range_arr_two);
} else {
data.forEach((obj, index) => {
for (const [key, value] of Object.entries(obj)) {
if (key === property.domain[0]) {
domain_arr.push(value);
}
if (key === property.range[0]) {
range_arr.push(value);
}
}
})
label = property.range[0];
labels = domain_arr;
labelStringX = property.domain[0];
labelStringY = property.range[0];
}
}
const container = html `<canvas ></canvas>`;
let data_array = {};
if (is_grouped_bar_chart) {
if (property.range.length > 1) {
labelStringX = property.domain[0],
data_array = {
labels: domain_arr_one //x
,
datasets: [{
label: property.range[0] //x er label
,
data: range_arr_one //y
,
backgroundColor: 'blue',
borderColor: 'rgb(0, 0, 0)',
borderWidth: 1
}
, {
label: property.range[1],
data: range_arr_two //y
,
backgroundColor: 'red',
borderColor: 'rgb(0, 0, 0)',
borderWidth: 1
}
]
};
} else {
labelStringY = property.range[0],
type = "horizontalBar", data_array = {
labels: range_arr_one,
datasets: [{
label: property.domain[0],
data: domain_arr_one,
backgroundColor: 'blue',
borderColor: 'rgb(0, 0, 0)',
borderWidth: 1
}
, {
label: property.domain[1],
data: domain_arr_two,
backgroundColor: 'red',
borderColor: 'rgb(0, 0, 0)',
borderWidth: 1
}
]
};
}
} else {
data_array = {
labels: labels //x
,
datasets: [{
label: label,
data: range_arr //y
,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(0, 0, 0)',
borderWidth: 1
}]
};
}
let after_label_data_arr = [];
data.forEach((object, index) => {
for (const [key, value] of Object.entries(object)) {
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 + " ");
}
}
})
const myChart = new Chart(container, {
type: type,
data: data_array,
options: {
tooltips: {
callbacks: {
afterLabel: function (e) {
return "\n" + after_label_data_arr[e.index]
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: labelStringY
}
}],
xAxes: [{
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: labelStringX
}
}],
}
},
});
return container;
}
data = [{
"DATE": 1,
"LABH": 100,
"LOSS": 10
},
{
"DATE": 2,
"LABH": 90,
"LOSS": 20
},
{
"DATE": 3,
"LABH": 80,
"LOSS": 30
}
]
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.
