Chartjs-Chart js different callback labels

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 :

enter image description here

Leave a comment