draw bar graph js code example
Example 1: how to make bar chart in javascript
var b1, b2, b3, b4, b5, b6, b7, b8, b9, b10, b11;
function setup() {
createCanvas(400, 400);
b1=new Building();
b1.position=4;
b1.floors=23;
b2=new Building();
b2.position=1;
b2.floors=12;
b3=new Building();
b3.position=2;
b3.floors=20;
b4=new Building();
b4.position=3;
b4.floors=15;
b5=new Building();
b5.position=5;
b5.floors=37;
b6=new Building();
b6.position=6;
b6.floors=10;
b7=new Building();
b7.position=7;
b7.floors=25;
b8=new Building();
b8.position=8;
b8.floors=40;
b9=new Building();
b9.position=9;
b9.floors=32;
b10=new Building();
b10.position=10;
b10.floors=47;
b11=new Building();
b11.position=0;
b11.floors=26;
}
function draw() {
background("black");
b1.display();
b2.display();
b3.display();
b4.display();
b5.display();
b6.display();
b7.display();
b8.display();
b9.display();
b10.display();
b11.display();
}
Example 2: chartjs bar data on top
options: {
"hover": {
"animationDuration": 0
},
"animation": {
"duration": 1,
"onComplete": function() {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
},
legend: {
"display": false
}
}