JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://thule.mine.nu/html/data/data.xml"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(document).ready(function(){
options = {
chart: {
renderTo: 'container',
type: 'spline'
},
title: {
text: 'Temperatures'
},
subtitle: {
text: 'An example of time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'T (°C)'
},
min: 0
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%e. %b', this.x) +': '+ this.y +' m';
}
},
series: [{
name: 'Temperature',
data: []
}]
}
$.ajax({
type: "GET",
url: "http://thule.mine.nu/html/data/data.xml",
dataType: "xml",
success: function(xml) {
var series = { data: []
};
$(xml).find("row").each(function()
{
var t = parseInt($(this).find("t").text())*1000
var v = parseFloat($(this).find("v").text())
series.data.push([t,v]);
});
options.series.push(series);
}
});
chart = new Highcharts.Chart(options);
});