CODEWITHSUNDEEP
javascripthighcharts
wergeld
wergeld

Reputation: 14442

Exporting Chart Not Keeping Navigator Series

We are in the process of upgrading to HighStock 6.1 from HighStock 5. We allow users to show only one series on the stock charts (out of any number of possible series). When the user clicks on the series in the legend we hide all other series and show only the one clicked. We also change the navigator.series to be the selected series:

plotOptions: {
  series: {
    turboThreshold: 0,
    connectNulls: false,
    dataGrouping: {
      enabled: false
    },
    events: {
      legendItemClick: function(event) {
        var currChart;
        var pnlChartExport;
        var pnlNoChartExport;
        var divNoChartExport = $('[id$=divNoExportSupp]');
        var thisSeries = this,
          chart = this.chart;
        if (this.visible === true) {
          this.hide();
          chart.get("highcharts-navigator-series").hide();
        } else {
          this.show();
          chart.series.forEach(function(el, inx) {
            if (el !== thisSeries) {
              el.hide();
            }
          });
          chart.get("highcharts-navigator-series").setData(thisSeries.options.data, false);
          chart.get("highcharts-navigator-series").show();
          chart.setTitle({
            text: thisSeries.options.name
          }, undefined, false);
          var points = [];
          var minVal = 0.000;
          thisSeries.options.data.forEach(function(theData) {
            points.push(theData.y);
          });
          minVal = Math.min.apply(Math, points);
          if (minVal >= 0) {
            chart.yAxis[0].update({
              min: 0
            });
          } else {
            chart.yAxis[0].update({
              min: undefined
            });
          }
          currChart = thisSeries.userOptions.chartLoc;
        }
        event.preventDefault();
      }
    }
  }
}

Then, when we export the chart (via external button still calling chart.exportChart) we get the currently shown series and navigator series and append some other information (footer text, etc).

function chartExportLoc(chartid, exportType, graphHeader, graphFooter, marginSize) {

    if (!marginSize) {
        marginSize = 15;    //HighCharts default
    }

    var chart = $('#' + chartid).highcharts();

    if (chartid == "chartStock") {
        var navigatorData = chart.get("highcharts-navigator-series").options.data;
        var chartSeries = chart.userOptions.series;

        chart.exportChart(
            {   type: exportType, scale: 1 },
            {
                title: { text: unescape(encodeURI(graphHeader)), margin: marginSize },
                navigator: {series: {data: navigatorData} },
                legend: { y: -6 },
                subtitle: { y: 3, text: unescape(encodeURI(graphFooter)) },
                chart: { spacingBottom: 35, shadow: false, height: 1.1 * chart.chartHeight, width: 800 },
                series: chartSeries
        });
    } 
    return false;
}

Under HighStock 5 this worked fine. However, now it does not show the navigator series for any export except for the initially loaded series - the navigator window shows no points.

How can I maintain the same result under HighStock v6 with the navigator series = visible series upon export? Here is a live jsFiddle with data and all options.

Upvotes: 0

Views: 163

Answers (1)

daniel_s
daniel_s

Reputation: 3732

At this moment, you don't need to define separate series in navigator.series for every series you define in your chart configuration object, because Highcharts will do it by itself, basing on Series.showInNavigator flag. The best and fastest way to do that correctly is by defining simple logic implementation, using update appropriate series on legendItemClick event. Then your export should work correctly. Please take a look at code and example below:

  plotOptions: {
    series: {
      events: {
        legendItemClick(e) {
          e.target.chart.series.forEach(s => {
            if (s === e.target) {
              s.update({
                showInNavigator: true,
                visible: !s.visible
              })
            } else if (s.name.split(" ")[0] !== "Navigator") {
              s.hide()
              s.update({
                showInNavigator: false
              })
            }
            e.preventDefault()
          })

        }

      }

    }
  }

Live example: https://jsfiddle.net/yf4stjmw/

API Reference:

https://api.highcharts.com/highstock/series.line.showInNavigator https://api.highcharts.com/highstock/series.line.visible

[EDIT]

All of your chart's series are hidden in exported files, in the reason of this lines of code:

  events: {
    load: function() {
      this.series.forEach(function(el) {
        if (el.index !== 0) {
          el.hide();
        }
      });
      this.get("highcharts-navigator-series").show();
    }
  }

Don't forget that load event handler is also triggered when exporting, that's why you need to delete those lines of code. Then it should work as you wish.

Upvotes: 1

Related Questions