JavaScript
var file = 'https://staging-vending.lrsdedicated.com/dyn/_pictures/weather-icons/{windex}.svg';
$(function() {
$('#container').highcharts({
chart: {
type: 'spline',
events: {
load: function() {
var s = 0; // this.series.length;
var series = this.series[s];
for (var v = 0; v < series.points.length; v++) {
var p = series.points[v];
var f = file;
f=f.replace(/\{windex\}/,p.y);
p.y = 20;
p.update({
marker: {
width: 40,
height: 40,
symbol: 'url(' + f + ')'
}
});
}
}
}
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
type:"datetime"
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function() {
return this.value + '°';
}
}
},
tooltip: {
crosshairs: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: [{
name: 'Weather symbol ',
showInLegend: false,
lineWidth: 0,
data: [
[Date.UTC(2016,1,1),1],
[Date.UTC(2016,2,1),5],
[Date.UTC(2016,3,1),15],
[Date.UTC(2016,4,1),11],
[Date.UTC(2016,5,1),7],
[Date.UTC(2016,6,1),9]
]
}, {
name: 'London',
marker: {
symbol: 'diamond'
},
data: [
[Date.UTC(2016,1,1),1],
[Date.UTC(2016,2,1),2],
[Date.UTC(2016,3,1),5],
[Date.UTC(2016,4,1),14],
[Date.UTC(2016,5,1),16],
[Date.UTC(2016,6,1),18]
]
}]
});
});