Highcharts Sample

highcharts-sample.markdown

Highcharts Sample

A Pen by michael m on CodePen.

License.

index.html

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<div class="ld-row">
<label class="ld-label">
Enable Polling
</label>
<input type="checkbox" checked="checked" id="enablePolling"/>
</div>
<div class="ld-row">
<label class="ld-label">
Polling Time (Seconds)
</label>
<input class="ld-time-input" type="number" value="2" id="pollingTime"/>
</div>
<div class="ld-row">
<label class="ld-label">
CSV URL
</label>
<input class="ld-url-input" type="text" id="fetchURL"/>
</div>

script.js

var defaultData = 'https://demo-live-data.highcharts.com/time-data.csv';
var urlInput = document.getElementById('fetchURL');
var pollingCheckbox = document.getElementById('enablePolling');
var pollingInput = document.getElementById('pollingTime');

function createChart() {
  Highcharts.chart('container', {
    chart: {
      type: 'spline'
    },
    title: {
      text: 'Live Data'
    },
    data: {
      csvURL: urlInput.value,
      enablePolling: pollingCheckbox.checked === true,
      dataRefreshRate: parseInt(pollingInput.value, 10)
    }
  });

  if (pollingInput.value < 1 || !pollingInput.value) {
    pollingInput.value = 1;
  }
}

urlInput.value = defaultData;

// We recreate instead of using chart update to make sure the loaded CSV
// and such is completely gone.
pollingCheckbox.onchange = urlInput.onchange = pollingInput.onchange = createChart;

// Create the chart
createChart();

style.css

.ld-label {
  width:200px;
  display: inline-block;
}

.ld-row {
}

.ld-url-input {
  width: 500px; 
}

.ld-time-input {
  width: 40px;
}