CODEWITHSUNDEEP
javascripthtmlhighcharts
venba
venba

Reputation: 37

Issue in multiple exporting for HighChart with scrollbar

I am facing an issue with exporting a column chart with scroll bar enabled which is not exporting a full chart after a scroll. It works for the first time, but when I scroll to the right or left and then when I export, the export is not happening completely. Here is the sample. 

var processedDataArray = [
{"Series_1_Value":1054237.31,"Series_2_Value":297367.88,"Series_3_Value":955472.31, "other":123450.45, "category":"CATEGORY-1"},
{"Series_1_Value":1914955.84,"Series_2_Value":472603.94,"Series_3_Value":1717425.84,"other":234560.45, "category":"CATEGORY-2"},
{"Series_1_Value":1172527.75,"Series_2_Value":368143.09,"Series_3_Value":1073762.75,"other":345670.45, "category":"CATEGORY-3"},
{"Series_1_Value":908568.43,"Series_2_Value":309490.05,"Series_3_Value":809803.43,"other":789010.45, "category":"CATEGORY-4"},
{"Series_1_Value":8001718.08,"Series_2_Value":5983055.85,"Series_3_Value":7112833.08,"other":890102.45, "category":"CATEGORY-5"},
{"Series_1_Value":1060572.17,"Series_2_Value":317503.11,"Series_3_Value":961807.17,"other":901230.45, "category":"CATEGORY-6"},
{"Series_1_Value":2484203.07,"Series_2_Value":1189924.57,"Series_3_Value":2187908.07,"other":435260.45, "category":"CATEGORY-7"},
{"Series_1_Value":6070895.44,"Series_2_Value":2722014.27,"Series_3_Value":5379540.44,"other":678900.45, "category":"CATEGORY-8"}
];

var series1DataArray = [];
var series2DataArray = [];
var series3DataArray = [];
var series4DataArray = [];
var categories = [];
var seriesNms = ['Series 1', 'Series 2', 'Series 3', 'Other'];
var _colors = ['#2F7ED8', '#915612', '#8BBC21', '#AA86F2', '#9054B6', '#76F0A3', '#A98835', '#09ACB6'];

for (i = 0; i < processedDataArray.length; i++) {
  var dataObject = processedDataArray[i];
  categories.push(dataObject['category']);
  series1DataArray.push({
    name: dataObject['category'],
    y: parseInt(dataObject['Series_1_Value'])
  });
  series2DataArray.push({
    name: dataObject['category'],
    y: parseInt(dataObject['Series_2_Value'])
  });
  series3DataArray.push({
    name: dataObject['category'],
    y: parseInt(dataObject['Series_3_Value'])
  });
  series4DataArray.push({
    name: dataObject['category'],
    y: parseInt(dataObject['other'])
  });
}

$(function() {
  new Highcharts.Chart({
    chart: {
      type: 'column',
      renderTo: 'colChart',
      borderColor: '#000000',
      borderWidth: 2,
      plotBackgroundColor: 'rgba(255, 255, 255, .1)',
      plotBorderColor: '#CCCCCC',
      plotBorderWidth: 1,
      zoomType: 'xy',
      width: 960,
      events: {
        load: function() {
          alert('Chart has loaded with exporting option ' + this.options.exporting.enabled + ", min:" + this.xAxis[0].min + ", max:" + this.xAxis[0].max + ", categories.length=" + categories.length);
        }
      }
    },

    scrollbar: {
      enabled: true
    },

    colors: _colors,

    exporting: {
      enabled: true,
      sourceWidth: 960,
      sourceHeight: 400,
      chartOptions: {
        xAxis: [{
          categories: categories,
          max: categories.length - 1
        }],
        scrollbar: {
          enabled: false
        }
      }
    },

    yAxis: {
      title: {
        text: 'Value($)'
      }
    },

    xAxis: {
      categories: categories,
      max: categories.length > 5 ? 5 : categories.length - 1
    },

    plotOptions: {
      series: {
        pointPadding: 0.05,
        groupPadding: 0.15
      }
    },

    title: {
      text: 'Column Chart',
      align: 'center'
    },

    series: [{
      name: seriesNms[0],
      data: series1DataArray
    }, {
      name: seriesNms[1],
      data: series2DataArray
    }, {
      name: seriesNms[2],
      data: series3DataArray
    }, {
      name: seriesNms[3],
      data: series4DataArray
    }],
    credits: {
      enabled: false
    }
  }); //end of Chart const
}); //end of function...
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
  <title>Highcharts</title>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://code.highcharts.com/stock/highstock.js"></script>
  <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
  <script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>

</head>

<body>
  <div id="colChart"></div>
</body>

</html>

How to resolve the issue?. If you see the pop-up dialog it is not displaying the same "export enabled" boolean value.

Upvotes: 0

Views: 799

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

Adding min and minRange to your exporting.chartOptions.xAxis seems to yield positive results. This does require max to still be there, and seemingly it gives varying results if any of those three are missing.

For example (updated JSFiddle):

exporting:{
    enabled: true,
    sourceWidth: 960,
    sourceHeight: 400,
    chartOptions: {
        xAxis: [{
            categories: categories,
            min: 0,                           // Added for fix
            minRange: categories.length-1,    // Added for fix
            max: categories.length-1
        }],
        scrollbar:{
            enabled: false
        }
    }
}

Hopefully this resolves your issue. As to why, I do not know.

Upvotes: 2

Related Questions