I created bar graph using highcharts.js. I added device name as y axis and data packets in bytes for x axis.How do i add device contact time on the bars of bar graph.I have a device contact time in array.i want is a way of print, that time value on bar graph?

I created bar graph using highcharts.js. I added device name as y axis and data packets in bytes for x axis.How do i add device contact time on the bars of bar graph.I have a device contact time in array.i want is a way of print, that time value on bar graph?

• javascript
• jquery
• highcharts

2 Answers 2

You can do this by enabling dataLabels, and customising them. You will also need to format your data in a particular way:

$(function () {
$('#container').highcharts({
    chart: { type:'bar',
    },
    xAxis: {
        categories: ['Device 1', 'Device 2']
    },

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                formatter:function() {
                    return this.point.t;
                }
            }
        }
    },

    series: [{
        data: [{y:29.9,t:"12:45"}, {y:71.5,t:"14:45"}]        
    }]
});
});

http://jsfiddle/NPSEf/

The data in this example has an additional field defined 't' which contains the time you want to show on the bar. In the dataLabel formatter function, you can refer to all the data within each point, including 't' using this.point.t.

Please share your code...

Did you looking for this...

call openData() function from your highcharts series data

series: [{
    name: 'BarName',
    data: openData()

}]

openData() function

function openData() {
 var fromDate =$('#startDate').val();
 var toDate = $('#expireDate').val();

 if(fromDate == '' || toDate == '' ){
  //    return false;
 }

 var data = 'fromDate='+fromDate+'&toDate='+toDate;
 $.ajax({
    url: 'apAppOpenChart.php',
    data: data,
    success: function(data) {
        var chartData=[];
        var retdata = jQuery.parseJSON(data);
        var length =retdata.length;

            for(var i=0; i<length; i++){
                var jsDate = new Date(retdata[i][0]*1000); 
                var datejs = jsDate.getFullYear()+','+jsDate.getMonth()+','+jsDate.getDate();

            }
            chart.series[0].setData(retdata);
            chart.redraw();
        },
    cache: false
 });
}