Highchart Tool-tio show CSV data - csv

Question

I am trying to display csv data in the tooltip of the Highcharts.
Data:
Time,Users,AVG_Sec,Volume,ServerName,InstanceName
11:35 AM ,59,.863,664,server1,int123
11:35 AM ,43,.659,392,server2,int123
11:35 AM ,46,1.347,442,server3,int124
11:35 AM ,49,1.164,702,server2,int125
I am able to display users,avg_sec and volume in the graph.
Please let me know if i can dsplay the servername and instance name in the graph as bars/columns else at least show them in tool tip.
The code so far:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Last Hourly All'
},
tooltip:{
formatter:function(){
return '<b>' + this.series.name + '</b>' +
'<br/><b>X Value:</b> ' + this.x +
'<br/><b>Y Value:</b> ' + this.y +
'<br/><b>Other Data:</b> ' + this.point.ServerName;
}
},
credits: {
enabled: false
},
xAxis: {
categories: [],
labels: {
rotation: -90
}
},
yAxis:[{
startOnTick: false,
title: {
text: 'No of Transactions'
}
}, {
opposite: true,
title: {
text: 'Response Time'
}
}, {
opposite: true,
title: {
text: 'Volume'
}
}, {
opposite: true,
title: {
text: 'Server Name'
}
}, {
opposite: true,
title: {
text: 'Instance Name'
}
}
],
series: []
};
//try.csv
$.get('data/lastHrlyAllTZ1.csv', function(data) {
// Split the lines
var lines = data.split('\n');
//variable declaration
var series = {
data: [],
type: 'spline',
color: '#336633'
};
var series1 = {
yAxis: 1,
data: [],
color: '#FF3399'
};
var series2 = {
yAxis: 2,
data: [],
color: '#9900FF'
};
var series3 = {
yAxis: 3,
data: [],
color: '#660066'
};
var series4 = {
yAxis: 4,
data: [],
color: '#CC99CC'
};
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line contains categories
if (lineNo == 0) {
series1.name = items[1];
series.name = items[2];
series2.name = items[3];
series3.name = items[4];
series4.name = items[5];
}
// the rest of the lines contain data with their name in the first position
else {
$.each(items, function (itemNo, item) {
if (itemNo == 0) {
options.xAxis.categories.push(item);
} else if (itemNo == 1) {
//console.log(parseFloat(item));
series1.data.push(parseFloat(item));
} else if(itemNo == 2){
series.data.push(parseFloat(item));
} else if(itemNo == 3){
series2.data.push(parseFloat(item));
}
else if(itemNo == 4){
//alert(item);
series3.data.push(item);
}
else if(itemNo == 5){
series4.data.push(item);
}
});
}
});
options.series.push(series1);
options.series.push(series2);
options.series.push(series3);
options.series.push(series4);
options.series.push(series);
var chart = new Highcharts.Chart(options);
In the tool tip as of now it says "undefined".

Answer 1

It doesnt work, because you push only values into data array, but not define name of parametrs. You should push point as object, where you define name of your parameter and y value.