<script>
var highchartsOptions = {
chart: {
backgroundColor: 'rgba(255, 255, 255, 0.1)',
type: 'column'
},
title: {
text: ''
},
exporting: {
buttons:{
contextButton:{
enabled: false
}
}
},
credits: {
enabled: false
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
colors: ['#2b908f', '#f7a35c', '#434348', '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1']
};
function showTopPickrate(data) {
$('#containerTopPickrate').highcharts({
chart: highchartsOptions.chart,
title: highchartsOptions.title,
credits: highchartsOptions.credits,
exporting: highchartsOptions.exporting,
tooltip: highchartsOptions.tooltip,
plotOptions: highchartsOptions.plotOptions,
colors: highchartsOptions.colors,
xAxis: {
categories: [
data[0]._id.championId,
data[2]._id.championId,
data[3]._id.championId,
data[4]._id.championId,
data[5]._id.championId,
data[6]._id.championId,
data[7]._id.championId,
data[8]._id.championId,
data[9]._id.championId,
data[10]._id.championId
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Percentage'
}
},
series: [{
name: 'Popularity',
data: [ floor(data[0].value.pickRate*100) ,
floor(data[1].value.pickRate*100),
floor(data[2].value.pickRate*100),
floor(data[3].value.pickRate*100),
floor(data[4].value.pickRate*100),
floor(data[5].value.pickRate*100),
floor(data[6].value.pickRate*100),
floor(data[7].value.pickRate*100),
floor(data[8].value.pickRate*100),
floor(data[9].value.pickRate*100)]
}, {
name: 'Win Rate',
data: [ floor(data[0].value.winRate*100) ,
floor(data[1].value.winRate*100),
floor(data[2].value.winRate*100),
floor(data[3].value.winRate*100),
floor(data[4].value.winRate*100),
floor(data[5].value.winRate*100),
floor(data[6].value.winRate*100),
floor(data[7].value.winRate*100),
floor(data[8].value.winRate*100),
floor(data[9].value.winRate*100)]
}]
});
}
function loadTopPickrate(day){
$.ajax({
url: "http://localhost:2000/mapReduce/getMapReduceResultsTopPickRate?day="day,
type: "get",
dataType: 'json',
success: function(data){
alert("got it"); // debug
showTopPickrate(data);
},
error:function(){
alert("error");
}
});
}
$(function() {
loadTopPickrate("all");
});
</script>
I'm finding my way in frontend web development and this code snippet is giving me a hard time. I've had experience with JavaScript before but can't figure out the issues here. Time is ticking and I need to resolve this quickly.
The script just won't run, yet I can't pinpoint where the syntax errors lie or what's wrong with it. My attempts are based on Stack Overflow solutions as I'm not well-versed in jQuery. Assistance needed in defining and utilizing functions with jQuery, or possibly debugging the AJAX call.