0

I have a spline chart in Highcharts. It has data for 24 hours i.e 24 points. Now during those 24 hours, there are certain incidents that take place which i need to show as points on the spline chart. And there needs to be a tooltip for those points. How do i overlap these points on the spline graph including their tooltip? And these overlapped points need to be mapped to their corresponding time also on the x-axis. Any ideas if this can be done?

This is an example for what i want to do in a JSfiddle:- http://jsfiddle.net/ttyc5dod/

$(function () {
$('#container').highcharts({
    title: {
        text: 'Test Graph',
        x: -20 //center
    },
    xAxis: {
        categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
    },
    yAxis: {
        title: {
            text: 'Availability(%)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: 'Data',
        data: [7.0, 6.9, 9.5, 10, 11.2, 12.5, 15.2, 16.5, 13.3, 18.3, 13.9, 9.6, 12, 13, 12, 11.2, 9, 8, 5, 12, 14, 12, 12, 12.5, 10]
    }]
});
});

For example, in the following example, between the time 23:00 and 24:00 hours, let's suppose an incident(issue) takes place which has to be shown on this graph. Is there any way to plot a point on this graph between 23:00 and 24:00 which shows the incident and also should have the tooltip telling the details about the incident.enter code here

Any help will be appreciated.

Nikhil Tikoo
  • 365
  • 1
  • 9
  • 31
  • I am not sure what you would like to achieve. Could you please post more specific information about your issue? For example drawing showing what you want to achieve? – Grzegorz Blachliński Sep 21 '16 at 08:07
  • @Grzegorz Blachliński I updated the question. – Nikhil Tikoo Sep 21 '16 at 09:33
  • There is a plenty of ways for getting information between your points, for example you can add column between them: http://jsfiddle.net/ttyc5dod/2/ I am not sure how you would like your chart to look in final version – Grzegorz Blachliński Sep 21 '16 at 10:04
  • No. I don't want column as an incident. What i want is to denote each incident with a point on the line. Because there can be more than one incidents in an hour. So denoting each with a column will be very cumbersome. – Nikhil Tikoo Sep 21 '16 at 10:16
  • 2
    So you should be able to add scatter series in right positions: http://jsfiddle.net/ttyc5dod/3/ – Grzegorz Blachliński Sep 21 '16 at 14:38
  • @GrzegorzBlachlińskiThat was really really helpful. Little new to Highcharts so not able to fully utilize its features. Thank you so much for helping me out in this. – Nikhil Tikoo Sep 22 '16 at 09:13

1 Answers1

1

You should be able to add new series (I think the best will be scatter series) and add scatter points them between data points, if the incident occurs.

If you want to add your scatter points on the line of your first series, it should be easy to calculate the right y position for this points.

Here you can see very simple example of adding scatter point in your line, between two points:

    function(chart) {
    var value1 = chart.series[1].data[23].y,
      value2 = chart.series[1].data[24].y;
    chart.series[0].addPoint({
      x: 23.5,
      y: (value1 + value2) / 2,
      details: 'this is an accident'
    });
  }

Here you can see an example how it can work: http://jsfiddle.net/ttyc5dod/3/

Grzegorz Blachliński
  • 5,132
  • 10
  • 13