2

When exporting scatter plot / bubble chart data as CSV or XLS, it is missing key information, see for example: http://jsfiddle.net/11fum86u/

This is the data (extract):

series: [{
    data: [
        { x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' },

And the axis titles are in the tooltip (but perhaps needs to be defined elsewhere):

tooltip: {
    pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
        '<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
        '<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
        '<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',

What is missing in the default export is (i) labels for y and z axis, and (ii) the names of the bubbles (in this example, country codes/names)

I was wondering how I might be able to add this information to the export.

Fred
  • 49
  • 1
  • 7

1 Answers1

0

Actually there's no z axis in bubble charts. It's quite confusing, because all points have z property. This property serves to compute the bubble size so no additional axis is needed, because everything is in 2d. zAxis is used in 3d charts.

Please refer to this live working example: http://jsfiddle.net/kkulig/udtr0emL/

You can handle first row labels via columnHeaderFormatter (http://api.highcharts.com/highcharts/exporting.csv.columnHeaderFormatter):

exporting: {
    csv: {
      columnHeaderFormatter: function(item, key, keyLength) {
        if (item.axisTitle) {
          return item.axisTitle.textStr; // x axis label
        } else if (key === 'y') {
          return item.yAxis.axisTitle.textStr; // y axis label
        } else if (key === 'z') {
          return 'Obesity (adults)'; // z axis label
        }
      }
    }
  }

To add another column (countries) added following pieces of code in these three core functions:

1. Highcharts.Chart.prototype.getDataRows

// add original point reference
rows[key].point = point;

2. Highcharts.Chart.prototype.getCSV

  // Add point name and header
  csv += itemDelimiter;
  var point = row['point'];
  if (point) {
    csv += point.name
  } else {
    csv += "Country"
  }

3. Highcharts.Chart.prototype.getTable (for XLS)

  var point = row['point'],
    val;
  if (point) {
    val = point.name;
  } else {
    val = "Country";
  }

  html += '<' + tag + ' class="text">' +
    (val === undefined ? '' : val) + '</' + tag + '>';

All functions are available in export-data.src.js in this directory: https://github.com/highcharts/highcharts/tree/b4b4221b19a3a50d9ed613b6f50b12f0afcc7d06/js/modules

Kamil Kulig
  • 5,756
  • 1
  • 8
  • 12
  • Fantastic, exactly what I needed, many thanks. Is there by any chance a way to include that additional column in XLS export as well? – Fred Oct 11 '17 at 13:32
  • @Kamil this change will reflect the Core functionality and hence the Country names will be listed twice when exporting Bar/Column Charts. Right? – Rohan Kumar Oct 12 '17 at 09:45
  • @RohanKumar, it depends how your data looks like. This code adds another column regardless of what the rest of the data is. – Kamil Kulig Oct 16 '17 at 16:13
  • @Fred I added listing for XLS and updated the fiddle. – Kamil Kulig Oct 16 '17 at 17:36