3

I'm creating a Highstock chart that is supposed to show only some portion of available data at the beginning. I want the navigator extremes to be set to some default values that I provide, and load the rest of the data in asynchronous way when user shifts/stretches the navigator. Sadly, the way I believe it should work does not. This is what I do (chart Options):

var options = {
      title: {
        text: 'Analysis Graph'
      },
      scrollbar: {
        liveRedraw: false
      },
      yAxis: yAxises,
      series: series,
      useHighStocks: true,
      options: {
         navigator: {
           enabled:true,
           xAxis: {
             ordinal: false,
             min: scope.dates.start,
             max: scope.dates.end
           }
         },
         rangeSelector:  {
           enabled: true
         }
      }
    }

As you can see, I'm passing an xAxis object to the options/navigator with min and max dates (that are timestamps). It does not work as intended - the navigator's extremes are being set to the beginning and ending of the data series anyway. I checked, and the variables that I use for dates are correctly set and should work without problems.

Is there any alternate way to accomplish my goal or to make this way work?

EDIT:

Curiously enough, giving xAxis.min and .max works in highcharts-ng, but does not work in a solution where I create my own directive.

Here is how it looks:

upper: pure highstock, lower: highcharts-ng

The upper one is my normal solution, the lower is highcharts-ng powered one. highchart-ng one works as intended. Both have the same options with the same data:

var options = {
      title: {
        text: 'Analysis Graph'
      }
      yAxis: yAxises,
      xAxis : {
      },
      series: series,
      useHighStocks: true,
      options: {
         navigator: {
           xAxis: {
             min: scope.dates.start,
             max: scope.dates.end
           },
           enabled:true
         },
         rangeSelector:  {
           enabled: true,
           selected: 2
         }
      }
    }

Does anyone know why this happens? It seems both solutions use highstock in version 4.2.5 . I'd like to NOT use highcharts-ng, so if anyone has an idea on how to make it work without using it, please contribute.

kdkade
  • 65
  • 7
  • 2
    I prepared you a simple demo, which allows to add points when you scroll on right hand. Example: - http://jsfiddle.net/bkh9ft53/ In the example we load a data and set min / max values on xAxis. The purpose of that is having access to scroll / panning events. Next step is catch afterSetExtremes where we check, if we are on the edge of chart. If yes then we call generateData (can be any function, like ajax, but I prepared to simulate scenario) and iterate on points to add them to chart. – Sebastian Bochan Jun 09 '16 at 10:28
  • That is really interesting and helpful, thanks for that - though it did not solve my problem. Thing is, I already know the overall start and end of my data, I only need to set it in the options and then use afterSetExtremes when user changes the timeframe, which cannot be full by default. I see you made it work by setting min and max in xAxis of the chart, not the navigator. It does not work for me - somehow the navigator starts and begins exactly where data does, but the data I download at first is supposed to be a small slice of bigger timeframe. – kdkade Jun 09 '16 at 10:56
  • As far as I know, highcharts-ng uses $watch on some values of the chart config object, xAxis min and max being two of them. Whenever they change, the watcher 'catches' it and then calls that native highcharts redraw() method, which updates the view. You should try that in your own directive and see if that works. – Shahar Jul 04 '16 at 11:30

0 Answers0