Basic line

author(s): Øystein Moseng

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/themes/high-contrast-light.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<h1>
  Demo of data scraping in Highcharts
</h1>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

<h2>
  Data scraped:
</h2>
<pre id="data"></pre>

CSS

body {
  max-width: 800px;
  margin: 0 auto;
}

#data {
  margin: 1em auto;
  background-color: #eee;
  border-radius: 4px;
  padding: 20px;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 360px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

function getChartContainer(chart) {
  return chart.renderTo.id;
}

function getTitle(chart) {
  return chart.options.title.text || 'Chart';
}

function getSubtitle(chart) {
  return chart.options.subtitle && chart.options.subtitle.text;
}

function getAltText(chart) {
  const a11y = chart.accessibility;
  if (a11y) {
    return a11y.components.infoRegions.getLongdescText();
  }
}

function getAxisTitle(axis) {
  return axis && (
    axis.userOptions && axis.userOptions.accessibility &&
    axis.userOptions.accessibility.description ||
    axis.axisTitle && axis.axisTitle.textStr ||
    axis.options.id ||
    axis.categories && 'categories' ||
    axis.dateTime && 'Time' ||
    'values'
  );
}

function getAxisInformation(axis) {
  return {
    axis: axis.coll,
    title: getAxisTitle(axis),
    type: axis.options.type,
    visualMax: axis.max,
    visualMin: axis.min,
    dataMax: axis.dataMax,
    dataMin: axis.dataMin
  };
}

function getSeriesData(series) {
  return series.data.map(point => {
    const pointInfo = {
        altText: point.accessibility && point.accessibility.description,
        isNull: !!point.isNull,
        visible: point.visible,
        name: point.name
      },
      pointKeys = ['x', 'y', 'z', 'open', 'high', 'low', 'close', 'value', 'percentage'];

    pointKeys.forEach(key => {
      if (point[key] !== undefined) {
        pointInfo[key] = point[key];
      }
    });
    return pointInfo;
  });
}

function getSeriesInformation(series) {
  return {
    name: series.name,
    numPoints: series.data.length,
    type: series.type,
    data: getSeriesData(series)
  };
}

function getChartData(chart) {
  return {
    containerID: getChartContainer(chart),
    // Note: You may want to sanitize/strip HTML tags from some of these.
    title: getTitle(chart),
    subtitle: getSubtitle(chart),
    altText: getAltText(chart),
    axes: chart.axes.map(getAxisInformation),
    series: chart.series.map(getSeriesInformation)
  };
}


//...