admin管理员组文章数量:1287777
I am using Highcharts and need to loop though an array to display the different series so it displays as you can see here: /
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 es 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 oute 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
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/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 es 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 oute 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
Share Improve this question edited Sep 16, 2013 at 3:16 SheetJS 22.9k12 gold badges67 silver badges76 bronze badges asked Sep 12, 2013 at 13:01 annaanna 1,0116 gold badges24 silver badges40 bronze badges 8- do you want to create series from arrays? – Moazzam Khan Commented Sep 12, 2013 at 13:09
- Try something first, and if you get stuck with a specific problem, Google it. If you are still stuck, then ask on Stack Overflow. – Ryan Erb Commented Sep 12, 2013 at 13:11
- yes i the arrays that i have given is the dynamic data that i am getting back so i need to loop though that data to give different lines for each retailer for the clicks it is the series that i need to create from the arrays – anna Commented Sep 12, 2013 at 13:11
- can you explain little more about your arrays, and what you want finally? – Moazzam Khan Commented Sep 12, 2013 at 13:12
- Do you want a new line or want to add points to old one? – Moazzam Khan Commented Sep 12, 2013 at 13:28
1 Answer
Reset to default 7Example for you: http://jsfiddle/RUZb2/1/
This code will generate series from your arrays:
var weekNoArray = [32, 32, 32, 32, 32, 32, 33, 33, 33, 33, 33, 33, 34, 34, 34, 34, 34, 34],
retailerNameArray = ['a', 'b', 'c', 'd', 'e', 'f', 'a', 'b', 'c', 'd', 'e', 'f', 'a', 'b', 'c', 'd', 'e', 'f'],
clicksArray = [43, 48, 62, 63, 43, 39, 27, 30, 43, 49, 34, 24, 47, 45, 59, 64, 48, 47],
series = [];
series = generateData(weekNoArray, retailerNameArray, clicksArray);
function generateData(cats, names, points) {
var ret = {},
ps = [],
series = [],
len = cats.length;
//concat to get points
for (var i = 0; i < len; i++) {
ps[i] = {
x: cats[i],
y: points[i],
n: names[i]
};
}
names = [];
//generate series and split points
for (i = 0; i < len; i++) {
var p = ps[i],
sIndex = $.inArray(p.n, names);
if (sIndex < 0) {
sIndex = names.push(p.n) - 1;
series.push({
name: p.n,
data: []
});
}
series[sIndex].data.push(p);
}
return series;
}
本文标签： javascriptHighcharts how to loop through array to add seriesStack Overflow
版权声明：本文标题：javascript - Highcharts: how to loop through array to add series - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741328079a2372605.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论