Highcharts - kind of hack for stick plot timeseries

Question

Hi all from a highchart developer Pawel-fus on Highcharts official forum, I came to know that highchart doesn't support stick plot, and similar effects can be achieved using linked series.

I have u and v components which I want to show as stick using highcharts, So theoretically what I know is

A stick plot is a plot on the u-v plane. Suppose you have a time series of a vector (u(t), v(t)). Then, you plot line segments from (ct, 0) to (ct+u(t), v(t)) on the u-v plane for all values of t, where c is an arbitrary constant. Each line segment represents the vector (u(t), v(t)) but its origin is shifted as (ct, 0). So, the vertical axis is v and the horizontal axis is u. But, the horizontal axis is "labeled" with time t, just for convenience, to represent the shift of the origin (ct,0).

from Pawel-Fus help, I could able to implement theory like this, here x axis is numeric that is 0 - 3, checkout Fiddle - working theory

     <script src="jquery-1.11.0.min.js"></script>
     <script src="highcharts.js"></script>
     <div id="container" style="height: 400px; width: 500px"></div>

     <script>


     $(function () {
         var chart = new Highcharts.Chart({
             chart: {
                 renderTo: 'container'
             },
             colors: ['blue'],
             plotOptions: {
                 series: {
                     marker: {
                         enabled: false
                     }
                 }
             },

             series: [{
                 name: 'main',
                 id: 'main',
                 data: [
                     [0, 0],
                     [(-3.969 +0), -1.001]
                 ]
             }, {
                 name: 'main',
                 linkedTo: 'main',
                 data: [
                     [1, 0],
                     [(-4.578 + 1), 0.596]
                 ]
             }, {
                 name: 'main',
                 linkedTo: 'main',
                 data: [
                     [2, 0],
                     [(1.593 + 2), 0.484]
                 ]
             }, {
                 name: 'main',
                 linkedTo: 'main',
                 data: [
                     [3, 0],
                     [(-1.622 + 3), 1.580]
                 ]
             }]
         });
     });
     </script>

but my ultimate aim is to make time series plot, so I tried like this, here I replaced with date, unfortunately I didn't get result like above checkout Bad Fiddle

     <script src="jquery-1.11.0.min.js"></script>
     <script src="highcharts.js"></script>
     <div id="container" style="height: 400px; width: 500px"></div>

     <script>


     $(function () {
         var chart = new Highcharts.Chart({
             chart: {
                 renderTo: 'container'
             },
             colors: ['blue'],
             plotOptions: {
                 series: {
                     marker: {
                         enabled: false
                     }
                 }
             },

     xAxis: {


         type: 'datetime',

        dateTimeLabelFormats : {

                    year: '%e %b %Y',

                 }
     },
             series: [{
                 name: 'main',
                 id: 'main',
                 data: [
                     [Date.UTC(1982, 1, 16), 0],
                     [(-3.969 + Date.UTC(1982, 1, 16)), -1.001]
                 ]
             }, {
                 name: 'main',
                 linkedTo: 'main',
                 data: [
                     [Date.UTC(1982, 2, 16), 0],
                     [(-4.578 + Date.UTC(1982, 2, 16)), 0.596]
                 ]
             }, {
                 name: 'main',
                 linkedTo: 'main',
                 data: [
                     [Date.UTC(1982, 3, 16), 0],
                     [(1.593 + Date.UTC(1982, 3, 16)), 0.484]
                 ]
             }, {
                 name: 'main',
                 linkedTo: 'main',
                 data: [
                     [Date.UTC(1982, 4, 16), 0],
                     [(-1.622 + Date.UTC(1982, 4, 16)), 1.580]
                 ]
             }]
         });

     });
     </script>

So what I am doing wrong with time series plot ? whether timeseries can be done like first working script ? and I want to add arrow for each stick on top

Someone please help me...

Please shout at me, if you need more clarification...

Thanks..

Answer 1

Your dates are too close to get any sort of slope to your line. Date.UTC returns milliseconds since 1/1/1970, so subtracting off only 3 or 4 milliseconds, will just produce vertical lines. This:

data: [
    [Date.UTC(1982, 1, 16), 0],
    [(-3.969 + Date.UTC(1982, 1, 16)), -1.001]
]

is equal to:

data: [
    [382665600000, 0],
    [382665599996.031, -1.001]
]