110
rated 0 times
[
117]
[
7]
/ answers: 1 / hits: 21864
/ 11 Years ago, thu, september 12, 2013, 12:00:00
I am using Highcharts and need to loop though an array to display the different series so it displays as you can see here: http://jsfiddle.net/afnguyen/RUZb2/
Here is the code:
$(function () {
$('#container').highcharts({
title: {
text: 'Retaielr Clicks',
x: -20 //center
},
subtitle: {
text: 'Date',
x: -20
},
xAxis: {
categories: [32,33,24]
},
yAxis: {
title: {
text: 'Clicks'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tesco',
data: [43, 27, 47]
}, {
name: 'Asda',
data: [48, 30, 45]
}, {
name: 'Boots',
data: [62, 43, 59]
}, {
name: 'Superdrug',
data: [63, 49, 64]
}, {
name: 'Ocado',
data: [43, 34, 48]
}, {
name: 'Waitrose',
data: [39, 24, 47]
}]
});
});
The data comes from 3 arrays:
weekNoArray[32,32,32,32,32,32,33,33,33,33,33,33,34,34,34,34,34,34] //this is used in the xAxis categories
retailerNameArray[Tesco,Asda,Boots,Superdrug,Ocado,Waitrose,Tesco,Asda,Boots,Superdrug,Ocado,Waitrose,Tesco,Asda,Boots,Superdrug,Ocado,Waitrose] //this needs to be each series name (but only one of each)
clicksArray[43,48,62,63,43,39,27,30,43,49,34,24,47,45,59,64,48,47] //i need to loop through each of these putting them in the data
Can anyone help in the best way to do this?
So what i m struggling with is how to loop in the series i.e. the following won t work:
for (var i = 0; i < data.length; i++)
{
var leadrow = data[i];
series: [{
name: retailerNameArray[i],
data: clicksArray[i]
}]
}
Edit
Below is the actual code that i am using
$.ajax({
type: POST,
url: theUrl,
data: { 'manufacturer': manufacturer, 'country': country, 'category': category, 'startDate': startDate, 'endDate': endDate, 'chartType': chartType },
dataType: json,
success: function (data) {
var retailerNameArray = [];
var clicksArray = [];
var weekNoArray = [];
var rowTotalArray = [];
var weekArray = [];
var columnTotalArray = [];
var cumTotalArray = [];
var weekCounterArray = [];
var overallClickCountArray = [];
var resellerShareArray = [];
var retailerCount = 0;
for (var i = 0; i < data.length; i++) {
var cumLeadrow = data[i];
//Only display on graph if not 0
if (cumLeadrow.RetailerClickCount > 0) {
// assign to array
retailerCount = cumLeadrow.RetailerCount;
var clicks = cumLeadrow.RetailerClickCount;
clicksArray.push(clicks);
var weekNum = cumLeadrow.WeekNo;
weekNoArray.push(weekNum);
var rowTotal = cumLeadrow.RowTotal;
rowTotalArray.push(rowTotal);
var date = cumLeadrow.WeeklyDate;
weekArray.push(date);
var columnTotal = cumLeadrow.ColumnTotal;
var retailer = cumLeadrow.RetailerDescription;
retailerNameArray.push(retailer);
var resellerShare = cumLeadrow.ResellerShare;
if (i < retailerCount) {
columnTotalArray.push(columnTotal);
resellerShareArray.push(resellerShare);
}
var cumTotal = cumLeadrow.CummulativeTotal;
cumTotalArray.push(cumTotal);
var weekCounter = cumLeadrow.WeeklyCounter;
weekCounterArray.push(weekCounter);
var overallClickCount = cumLeadrow.OverallClickCount;
overallClickCountArray.push(overallClickCount);
}
}
alert(clicksArray);
alert(weekNoArray);
alert(retailerNameArray);
var lowerChart = chartType.toLowerCase();
// Create the chart
$('#chartContainer').highcharts({
chart: {
type: lowerChart
},
title: {
text: manufacturer + ' Cumulative Leads in ' + country + / + category + '<br/> from ' + startDate + ' to ' + endDate
},
xAxis: {
categories: weekNoArray,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Retailer Clicks'
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -50,
verticalAlign: 'top',
y: 0,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: [{
name: retailerNameArray,
data: clicksArray
}]
});
The arrays have the values which I have detailed above. But currently they are in one series the fiddler example and the code below it is the outcome that i want so i need to loop through the arrays to add the series but i m not sure how to do this - i hope that makes sense
Many thanks
More From » highcharts
