How can i show the invisible series in html table in highcharts, angular-highcharts

Question

How to do this similar functionality in angular-highcharts.

Is there any way by which i can show the invisible or hidden series in html table in highcharts, suppose i have three series but i want to show only one series in the chart , but i want others to be visible in exporting feature i.e csv, html table etc.

Js-fiddle link: https://jsfiddle.net/j3xknv9f/5/

Code

Highcharts.chart('container', {


exporting: {
showTable:true,
chartOptions: {
  chart: {
    events: {
      load() {
        const chart = this,
          series = chart.series;

        series.forEach(series => series.setVisible(true))
      }
    }
  },
}
},


  title: {
    text: 'U.S Solar Employment Growth by Job Category, 2010-2020'
  },

  subtitle: {
    text: 'Source: <a href="https://irecusa.org/programs/solar-jobs-census/" target="_blank">IREC</a>'
  },

  yAxis: {
    title: {
      text: 'Number of Employees'
    }
  },

  xAxis: {
    accessibility: {
      rangeDescription: 'Range: 2010 to 2020'
    }
  },

  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },

  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointStart: 2010
    }
  },

  series: [{
    name: 'Installation & Developers',
    data: [43934, 48656, 65165, 81827, 112143, 142383,
      171533, 165174, 155157, 161454, 154610
    ]
  }, {
    name: 'Manufacturing',
    data: [24916, 37941, 29742, 29851, 32490, 30282,
      38121, 36885, 33726, 34243, 31050
    ],
        visible: false
  }, {
    name: 'Sales & Distribution',
    data: [11744, 30000, 16005, 19771, 20185, 24377,
      32147, 30912, 29243, 29213, 25663
    ],
    legend:false,
        visible: false
  }],

  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }

});

Answer 1

So i have solved this issue for normal , vanilla javascript. But i want to know how can i solve this same for angular-highcharts.

js-link:https://jsfiddle.net/j3xknv9f/11/

code:

/**
 * A Highcharts plugin for exporting data from a rendered chart as CSV, XLS or HTML table
 *
 * Author:   Torstein Honsi
 * Licence:  MIT
 * Version:  1.4.1
 */
/*global Highcharts, window, document, Blob */
(function(Highcharts) {

  'use strict';

  var each = Highcharts.each,
    pick = Highcharts.pick,
    downloadAttrSupported = document.createElement('a').download !== undefined;

  Highcharts.setOptions({
    lang: {
      downloadCSV: 'Download CSV',
      downloadXLS: 'Download XLS',
      viewData: 'View data table'
    }
  });


  /**
   * Get the data rows as a two dimensional array
   */
  Highcharts.Chart.prototype.getDataRows = function() {
    var options = (this.options.exporting || {}).csv || {},
      xAxis = this.xAxis[0],
      rows = {},
      rowArr = [],
      dataRows,
      names = [],
      i,
      x,
      xTitle = xAxis.options.title && xAxis.options.title.text,

      // Options
      dateFormat = options.dateFormat || '%Y-%m-%d %H:%M:%S',
      columnHeaderFormatter = options.columnHeaderFormatter || function(series, key, keyLength) {
        return series.name + (keyLength > 1 ? ' (' + key + ')' : '');
      };

    // Loop the series and index values
    i = 0;
    each(this.series, function(series) {
      var keys = series.options.keys,
        pointArrayMap = keys || series.pointArrayMap || ['y'],
        valueCount = pointArrayMap.length,
        requireSorting = series.requireSorting,
        categoryMap = {},
        j;

      // Map the categories for value axes
      each(pointArrayMap, function(prop) {
        categoryMap[prop] = (series[prop + 'Axis'] && series[prop + 'Axis'].categories) || [];
      });

      if (series.options.includeInCSVExport !== false) { // #55
        j = 0;
        while (j < valueCount) {
          names.push(columnHeaderFormatter(series, pointArrayMap[j], pointArrayMap.length));
          j = j + 1;
        }

        each(series.points, function(point, pIdx) {
          var key = requireSorting ? point.x : pIdx,
            prop,
            val;

          j = 0;

          if (!rows[key]) {
            rows[key] = [];
          }
          rows[key].x = point.x;

          // Pies, funnels etc. use point name in X row
          if (!series.xAxis) {
            rows[key].name = point.name;
          }

          while (j < valueCount) {
            prop = pointArrayMap[j]; // y, z etc
            val = point[prop];
            rows[key][i + j] = pick(categoryMap[prop][val], val); // Pick a Y axis category if present
            j = j + 1;
          }

        });
        i = i + j;
      }
    });

    // Make a sortable array
    for (x in rows) {
      if (rows.hasOwnProperty(x)) {
        rowArr.push(rows[x]);
      }
    }
    // Sort it by X values
    rowArr.sort(function(a, b) {
      return a.x - b.x;
    });

    // Add header row
    if (!xTitle) {
      xTitle = xAxis.isDatetimeAxis ? 'DateTime' : 'Category';
    }
    dataRows = [
      [xTitle].concat(names)
    ];

    // Transform the rows to CSV
    each(rowArr, function(row) {

      var category = row.name;
      if (!category) {
        if (xAxis.isDatetimeAxis) {
          category = Highcharts.dateFormat(dateFormat, row.x);
        } else if (xAxis.categories) {
          category = pick(xAxis.names[row.x], xAxis.categories[row.x], row.x)
        } else {
          category = row.x;
        }
      }

      // Add the X/date/category
      row.unshift(category);
      dataRows.push(row);
    });

    return dataRows;
  };

  /**
   * Get a CSV string
   */
  Highcharts.Chart.prototype.getCSV = function(useLocalDecimalPoint) {
    var csv = '',
      rows = this.getDataRows(),
      options = (this.options.exporting || {}).csv || {},
      itemDelimiter = options.itemDelimiter || ',', // use ';' for direct import to Excel
      lineDelimiter = options.lineDelimiter || '\n'; // '\n' isn't working with the js csv data extraction

    // Transform the rows to CSV
    each(rows, function(row, i) {
      var val = '',
        j = row.length,
        n = useLocalDecimalPoint ? (1.1).toLocaleString()[1] : '.';
      while (j--) {
        val = row[j];
        if (typeof val === "string") {
          val = '"' + val + '"';
        }
        if (typeof val === 'number') {
          if (n === ',') {
            val = val.toString().replace(".", ",");
          }
        }
        row[j] = val;
      }
      // Add the values
      csv += row.join(itemDelimiter);

      // Add the line delimiter
      if (i < rows.length - 1) {
        csv += lineDelimiter;
      }
    });
    return csv;
  };

  /**
   * Build a HTML table with the data
   */
  Highcharts.Chart.prototype.getTable = function(useLocalDecimalPoint) {
    var html = '<table>',
      rows = this.getDataRows();

    // Transform the rows to HTML
    each(rows, function(row, i) {
      var tag = i ? 'td' : 'th',
        val,
        j,
        n = useLocalDecimalPoint ? (1.1).toLocaleString()[1] : '.';

      html += '<tr>';
      for (j = 0; j < row.length; j = j + 1) {
        val = row[j];
        // Add the cell
        if (typeof val === 'number') {
          val = val.toString();
          if (n === ',') {
            val = val.replace('.', n);
          }
          html += '<' + tag + ' class="number">' + val + '</' + tag + '>';

        } else {
          html += '<' + tag + '>' + (val === undefined ? '' : val) + '</' + tag + '>';
        }
      }

      html += '</tr>';
    });
    html += '</table>';
    return html;
  };

  function getContent(chart, href, extension, content, MIME) {
    var a,
      blobObject,
      name,
      options = (chart.options.exporting || {}).csv || {},
      url = options.url || 'http://www.highcharts.com/studies/csv-export/download.php';

    if (chart.options.exporting.filename) {
      name = chart.options.exporting.filename;
    } else if (chart.title) {
      name = chart.title.textStr.replace(/ /g, '-').toLowerCase();
    } else {
      name = 'chart';
    }

    // MS specific. Check this first because of bug with Edge (#76)
    if (window.Blob && window.navigator.msSaveOrOpenBlob) {
      // Falls to msSaveOrOpenBlob if download attribute is not supported
      blobObject = new Blob([content]);
      window.navigator.msSaveOrOpenBlob(blobObject, name + '.' + extension);

      // Download attribute supported
    } else if (downloadAttrSupported) {
      a = document.createElement('a');
      a.href = href;
      a.target = '_blank';
      a.download = name + '.' + extension;
      document.body.appendChild(a);
      a.click();
      a.remove();

    } else {
      // Fall back to server side handling
      Highcharts.post(url, {
        data: content,
        type: MIME,
        extension: extension
      });
    }
  }

  /**
   * Call this on click of 'Download CSV' button
   */
  Highcharts.Chart.prototype.downloadCSV = function() {
    var csv = this.getCSV(true);
    getContent(
      this,
      'data:text/csv,' + csv.replace(/\n/g, '%0A'),
      'csv',
      csv,
      'text/csv'
    );
  };

  /**
   * Call this on click of 'Download XLS' button
   */
  Highcharts.Chart.prototype.downloadXLS = function() {
    var uri = 'data:application/vnd.ms-excel;base64,',
      template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">' +
      '<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>' +
      '<x:Name>Ark1</x:Name>' +
      '<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->' +
      '<style>td{border:none;font-family: Calibri, sans-serif;} .number{mso-number-format:"0.00";}</style>' +
      '<meta name=ProgId content=Excel.Sheet>' +
      '</head><body>' +
      this.getTable(true) +
      '</body></html>',
      base64 = function(s) {
        return window.btoa(unescape(encodeURIComponent(s))); // #50
      };
    getContent(
      this,
      uri + base64(template),
      'xls',
      template,
      'application/vnd.ms-excel'
    );
  };

  /**
   * View the data in a table below the chart
   */
  Highcharts.Chart.prototype.viewData = function() {
    if (!this.insertedTable) {
      var div = document.createElement('div');
      div.className = 'highcharts-data-table';
      // Insert after the chart container
      this.renderTo.parentNode.insertBefore(div, this.renderTo.nextSibling);
      div.innerHTML = this.getTable();
      this.insertedTable = true;
    }
  };


  // Add "Download CSV" to the exporting menu. Use download attribute if supported, else
  // run a simple PHP script that returns a file. The source code for the PHP script can be viewed at
  // https://raw.github.com/highslide-software/highcharts.com/master/studies/csv-export/csv.php
  if (Highcharts.getOptions().exporting) {
    Highcharts.getOptions().exporting.buttons.contextButton.menuItems.push({
      textKey: 'downloadCSV',
      onclick: function() {
        this.downloadCSV();
      }
    }, {
      textKey: 'downloadXLS',
      onclick: function() {
        this.downloadXLS();
      }
    }, {
      textKey: 'viewData',
      onclick: function() {
        this.viewData();
      }
    });
  }

}(Highcharts));






Highcharts.chart('container', {


exporting: {
showTable:true,
chartOptions: {
  chart: {
    events: {
      load() {
        const chart = this,
          series = chart.series;

        series.forEach(series => series.setVisible(true))
      }
    }
  },
}
},


  title: {
    text: 'U.S Solar Employment Growth by Job Category, 2010-2020'
  },

  subtitle: {
    text: 'Source: <a href="https://irecusa.org/programs/solar-jobs-census/" target="_blank">IREC</a>'
  },

  yAxis: {
    title: {
      text: 'Number of Employees'
    }
  },

  xAxis: {
    accessibility: {
      rangeDescription: 'Range: 2010 to 2020'
    }
  },

  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },

  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointStart: 2010
    }
  },

  series: [{
    name: 'Installation & Developers',
    type:'area',
    data: [43934, 48656, 65165, 81827, 112143, 142383,
      171533, 165174, 155157, 161454, 154610
    ]
  }, {
    name: 'Manufacturing',
    type:'scatter',
    data: [24916, 37941, 29742, 29851, 32490, 30282,
      38121, 36885, 33726, 34243, 31050
    ],
     showInLegend: false,  
        visible: false
  }, {
    name: 'Sales & Distribution',
    type:'scatter',
    data: [11744, 30000, 16005, 19771, 20185, 24377,
      32147, 30912, 29243, 29213, 25663
    ],
     showInLegend: false,  
        visible: false
  }],

  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }

});