Search code examples
javascriptangularhighchartshighcharts-ng

How to add random ticks on a line chart at a specific position

I am trying a plot a highchart with single series and add some points which are marked in different style on the same line.

For example :

I am trying to plot a week (date & time) on x-axis and number of available hours in that week(5 days).

Available Hours :

  • 01/01/2019 08:00 to 10:00
  • 01/01/2019 18:00 to 21:00
  • 01/02/2019 05:00 to 08:00
  • 01/02/2019 19:00 to 21:00
  • 01/03/2019 21:00 to 23:00
  • 01/04/2019 19:00 to 20:00
  • 01/05/2019 08:00 to 21:00

Reminders :

  • 01/01/2019 09:30 - Send an email with Targeted Items
  • 01/03/2019 22:30 - Send the list of remaining tasks for the week
  • 01/04/2019 19:30 - Complete The Pending items targeted for the week
  • 01/05/2019 12:00 - Unit Testing Completed Tasks
  • 01/05/2019 20:30 - Send out an email of this week's working status

I am trying to plot a time series line chart and trying to add a marker for the reminder to the existing line chart at random places which has a tooltip with some information linked to it.

I tried to plot the line chart with 2 series but not able to achieve the expected output. https://jsfiddle.net/2vtyrc9q/3/

[JSFiddle Demo][1]

expected output

Solution

  • You can preprocess your data and calculate y values for the second series:

    var stages = [
        [0, 10],
        [2, 30],
        [5, 15],
        [10, 12]
    ],
    checkpoints = [1, 3, 4, 7],
    j = 1,
    i = 0;

for (i; i < checkpoints.length; i++) {
    if (checkpoints[i] < stages[j][0]) {
        checkpoints[i] = [checkpoints[i], calculateY(i, j)];
    } else {
        for (j; j < stages.length; j++) {
            if (checkpoints[i] < stages[j][0]) {
                checkpoints[i] = [checkpoints[i], calculateY(i, j)];
                break;
            }
        }
    }
}

function calculateY(i, j) {
    var difference,
        step;

    difference = stages[j][1] - stages[j - 1][1];
    step = difference / (stages[j][0] - stages[j - 1][0]);
    return stages[j - 1][1] + step * (checkpoints[i] - stages[j - 1][0]);
}

Highcharts.chart('container', {
    series: [{
        data: stages
    }, {
        type: 'scatter',
        data: checkpoints
    }]
});

    Live demo: http://jsfiddle.net/BlackLabel/83ankjpf/