0๐
I have implemented graph in one of my project for Power On Time duration. I have refered you with my code. Please see if it can help.
Labels Array:
Array(9)
0
:
โ2018-09-17โ
1
:
โ2018-09-17โ
2
:
โ2018-09-17โ
3
:
โ2018-09-17โ
4
:
โ2018-09-17โ
5
:
โ2018-09-17โ
6
:
โ2018-09-17โ
7
:
โ2018-09-17โ
8
:
โ2018-09-18โ
Data Array:
Array(9)
0
:
โ200โ
1
:
โ211โ
2
:
โ234โ
3
:
โ255โ
4
:
โ300โ
5
:
โ321โ
6
:
โ400โ
7
:
โ421โ
8
:
โ00421โ
<script>
var powerontimedata_chart_labels=[];
var powerontimedata_chart_data=[];
function initiateChart(labels, data){
chart_labels=JSON.parse(labels);
chart_data=JSON.parse(data);
console.log(powerontimedata_chart_labels);
console.log(powerontimedata_chart_data);
plotDataLineChart();
}
function plotDataLineChart(){
var lineChartOptions = {
maintainAspectRatio: false,
steppedLine : 'after',
responsive : true,
showTooltips : false,
showInlineValues : true,
centeredInllineValues : true,
tooltipCaretSize : 0,
tooltipTemplate : "<%= value %>",
scales: {
xAxes: [{
position: "right",
scaleLabel: {
display: true,
stepSize : 1,
autoSkip: false,
labelString: "Date",
fontFamily: "Montserrat",
fontColor: "black",
},
ticks:{
stepSize : 2,
autoSkip: true
}
}],
yAxes: [{
position: "left",
scaleLabel: {
display: true,
stepSize : 1,
autoSkip: false,
labelString: "Time in Hour",
fontFamily: "Montserrat",
fontColor: "black",
},
ticks: {
beginAtZero:true,
autoSkip: true
}
}]
},
"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);
console.log(ctx);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillStyle = '#ff0000';
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);
});
});
}
},
//multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
};
var lineChartCanvas = $('#weekbarChart').get(0).getContext('2d')
var ontime = {
labels : chart_labels,
datasets : [
{
label : 'Power Ontime',
fill : true,
borderColor : "#FF0000",
backgroundColor : "#F5B7B1",
data : powerontimedata_chart_data,
steppedLine: false,
pointStyle: 'clearInterval',
pointBorderColor : "#FF0000",
}
]
}
realTimeChart = new Chart(lineChartCanvas, {
type: 'line',
data: ontime,
options: lineChartOptions
});
}
initiateChart('<?= json_encode($chart["labels"])?>','<?= json_encode($chart["data"])?>');
</script>
And my graph comes out to be :
- Chartjs-How do I break a comma separated string into new lines in tooltip callbacks afterBody?
- Chartjs-How to remove legend at the bottom of chartjs doughnuts
Source:stackexchange.com