Develop Reference

Multiple series of data in Highcharts but second line graph is displayed squashed?

I'm pretty new in using Highcharts API and, just started to embark using its cool features. I have a ASP.NET MVC web application which plot a line graph from a data source. In my application a user selects a key value from a list box and, out of that key an array of values will be retrieved and used the data as series for the graph.
[Chart 1] This is the plotted highchart.
[Chart 2] This is the expected output
As you can see in the above screenshots, CDT158 series displayed the graph correctly, more similar to Chart 2. But, Series 2 in Chart 1 is squashed, it is supposed to be like in Chart 2 - SINUSOID.
This is my functions that prepares and display the chart
var myChart;
function prepareChartData(dataChart)
{
var xAxis = [];
var dataSeries = [];
var xTitle;
for (var i = 0; i < dataChart.length; i++) {
var items = dataChart[i];
var XcategoriesItem = moment(items.Time).format("DD-MMM-YYYY HH:mm:ss");
var seriesData = parseFloat(items.Value);
xAxis.push(XcategoriesItem);
dataSeries.push(seriesData);
xTitle = items.Name;
}
if (myChart == undefined)
{
plotChartData(xAxis, dataSeries, xTitle);
return;
}
myChart.addSeries({
title: xTitle,
data: dataSeries
});
};
function plotChartData(Xaxis, dataseries, xtitle)
{
myChart = new Highcharts.Chart({
chart: {
renderTo: 'svgtrendspace',
type: 'line',
zoomType: 'xy',
panning: true,
panKey: 'shift',
plotBorderWidth: 1
},
title: {
text: 'Sample Chart'
},
legend: {
layout: 'horizontal',
align: 'bottom',
horizontalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
series: {
dataLabels: {
enabled: false,
format: '{y}'
},
allowPointSelect: false
}
},
xAxis: {
type: 'category',
categories: Xaxis,
labels: {
rotation: -65,
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
},
tickInterval: 60
},
yAxis: {
gridLineColor: '#DDDDDD',
gridLineWidth: 0.5
},
series: [{
name: xtitle,
data: dataseries,
//name: '',
//data: [],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b><br/>',
valueDecimals: 2
}
}]
});
};
This is the div element that displays the chart
<div id="svgtrendspace" style="overflow:auto;display:table-row; height:100%;"></div>
The jquery post function that retrieves data from AE controller.
$.post("/AE/UpdateTrend", { TrendRequestData: jdata },
function (data) {
if (data.length > 4) {
var results = $.parseJSON(data);
console.log(results);
prepareChartData(results);
trendData = results;
}
else {
trendData = "";
FillNoData("#svgtrendspace");
$('#MinimumHorizontalLine').val("");
$('#MaximumHorizontalLine').val("");
}
});
What could go wrong in my highcharts configuration that made the second series line graph squashed?
Any help is greatly appreciated.

I think it's caused by using categories, but actually you want to use datetime axis. Categories for first series and the second one don't match and that's the result. In other words, I would:
Change data format for array of points:
for (var i = 0; i < dataChart.length; i++) {
var items = dataChart[i];
var xDate = +moment(items.Time);
var seriesData = parseFloat(items.Value);
dataSeries.push([xDate, seriesData]);
xTitle = items.Name;
}
Change type to "datetime" and remove categories:
xAxis: {
type: 'datetime', // type
// categories: Xaxis, // remove
labels: {
rotation: -65,
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
},
// tickInterval: 60 // remove that too - you don't want ticks every 60 milliseconds ;)
},

Different tooltips for series in FlotChart

I have Flot line chart with two dataseries. I would like to edit the tooltips independently for each series. I have tried moving the tooltip settings to the dataset part but it didn't work.
Does anyone know a solution?
$(function () {
var barOptions = {
xaxis: {
tickDecimals: 0
},
yaxes: [{
position: "left"
}, {
position: "right"
}],
colors: ["#36c6d3"],
grid: {
color: "#888888"
},
tooltip: {
show: true,
content: "Uge %x, %s: %y"
}
};
var dataset = [{
data: occData.data,
label: occData.label,
yaxis: occData.yaxis,
lines: {
show: true,
lineWidth: 1,
}
}, {
data: houseData.data,
label: houseData.label,
yaxis: houseData.yaxis,
color: 'grey',
lines: {
show: true,
lineWidth: 1,
fill: false
}
}];
$("#flot-line-chart-past").plot(dataset, barOptions);
});

I'm going to presume that you are using flot.tooltip to provide the tooltips. In which case, the content property of the tooltip configuration object can be a function as well as a format string. I quote from the documentation for the plug-in:
you can pass a callback function(label, xval, yval, flotItem) that must return a string with the format described.
So write a function that distinguishes between each label you use for the two series, and return a different format string for each.

highchartjs create label for column

Hello I have a column Chart which displays servers. The X-axis shows how much they are used and the Y-axis counts them. Now I have for every group (with group I mean all Server on acolumn like "0-5%") an array of the server names. I would like to display this array in the right corner when I hover them like here with the value: Link
This is the code I already have the obj are Arrays which count the servers:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Server Disk root used in %'
},
subtitle: {
text: 'All Linux Servers'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Anzahl Server'
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
pointFormat: 'Anzahl Server: <b>{point.y}</b>'
},
series: [{
name: 'Server',
data: [
['0-5%', obj2],
['5-10%', obj5],
['10-15%', obj8],
['15-20%', obj11],
['20-25%', obj14],
['25-30%', obj17],
['30-35%', obj20],
['35-40%', obj23],
['40-45%', obj26],
['45-50%', obj29],
['50-55%', obj32],
['55-60%', obj35],
['60-65%', obj38],
['65-70%', obj41],
['70-100%',obj44]
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y}', // one decimal
y: 5,// 5 pixels down from the top
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
Here is a picture of my Chart:
The Arrays which I want to dsiplay when hover look like that
obj1 = ["server11", "server1125", "server1127"]
For every column there is an array like that this one is the array for the 0-5% column.

You need to use tooltip positioner function and define x,y coordinates where you want to show it.
positioner: function () {
return { x: 500, y: 30 };
}
See the fiddle here

The link you provided itself answers it. Not sure where you are getting stuck? Could you elaborate?
You need to use mouseOver and mouseOut event functions inside plotOptions to define what needs to be show when hovering over the data points.

Highchart with label in custom intervals

I have a Highchart bar graph (column type) which will show the data for each of the dates. Now it is getting the values through AJAX and date range
can be selected. Because of size limitations, I need to display the date labels in 5 day interval if the date range selected is more than 10 days.
That is all bars needs to be shown, but the interval for labels should be in 5 days interval if the date range is more than 10 days. If it is 10 days or lower, it should show all the dates.
My graph config is like the following :
var chart = new Highcharts.Chart({
credits: {
enabled: false
},
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 20,
y: 10
},
chart: {
renderTo: 'id_name',
type: 'column'
},
xAxis: {
categories: dates,
crosshairs: true
},
yAxis: {
title: {
text: 'Y Axis Title'
}
},
colors: ['#1A7BB9', '#18A689', '#21B9BB', '#F7A54A', '#EC4758'],
title: {
text: 'My title goes here'
},
subtitle: {
text: 'my subtitle goes here'
},
series: PHP formatted data goes here
});

I'm not sure about the interval (every fifth label should be displayed? Or you want to compare time-range to determine that?), but in general you have two solutions:
easier one: disable dataLabels by default (series.dataLabels.enabled = false) but enable that for a specific points, for example:
series: [{
data: [{
x: timestamp_1,
y: timestamp_1,
dataLabels: {
enabled: true
}
}, [timestamp_2, value_2], [timestamp_3, value_3], ... , {
x: timestamp_N,
y: timestamp_N,
dataLabels: {
enabled: true
}
}]
}]
harder one: wrap drawDataLabels method, and remove unnecessary labels:
(function (H) {
H.wrap(H.seriesTypes.column.prototype, 'drawDataLabels', function (p) {
var step = H.pick(this.options.dataLabels.step, 0),
iterator = 0;
p.call(this);
if(step) {
H.each(this.points, function (point) {
if (point.dataLabel) {
if (iterator % step !== 0) {
point.dataLabel = point.dataLabel.destroy();
}
iterator ++;
}
});
}
});
})(Highcharts)
jsFiddle for the second solution: http://jsfiddle.net/gL2kw73b/2/

Json in perfect form but Highcharts chart won't populate

New to highcharts and as the title said I am trying to pull json from a webservice and place it into the chart (bar chart) but I am getting some weird behavior. after I pull the data down through $http.get() I try and set the series to that string of json like series: '$scope.jsondata'. It will fill some legends (more than expected) so it is getting the data. but the bars on the chart wont show.
On the other hand when I go to the url where I am getting the json and just copy and paste all of the json into the series field, it works perfectly.
I have a plunker here I have been working on that shows what I am talking about. You can just paste:
[
{
"name":"Kaia",
"data":[19]
},
{
"name":"Deborah",
"data":[86]
},
{
"name":"Phoebe",
"data":[77]
},
{
"name":"Rory",
"data":[17]
},
{
"name":"Savannah",
"data":[15]
}
]
...into the series field and everything works.
EDIT I havent yet, but I am planning to use $interval to update the data every x seconds. Something like :
$http.get(fullUrl).success(function(data2) {
$scope.records = [];
data2.forEach(function(r) {
$scope.records.push(r);
});
});
mainInterval = $interval(function() {
$http.get(fullUrl).success(function(data2) {
$scope.records = [];
data2.forEach(function(r) {
$scope.records.push(r);
});
});
}, 5000);
So like one of the answers suggested I put the chart creation in the callback of the $http.get() but I think that'd hinder the $interval

You can move the creation of the Chart into the callback of the get call to simplify things. http://plnkr.co/edit/utQG34xOQmtbOukTK71e?p=preview
Note I also updated series: '$scope.jsondata' to series: $scope.jsondata.
$http.get('https://api.myjson.com/bins/38qm9').success(function(ret) {
$scope.jsondata = ret;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Active Users'
},
xAxis: {
categories: ['user']
},
yAxis: {
min: 0,
title: {
text: 'Total Score',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'top',
x: -40,
y: 100,
floating: false,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: false
},
credits: {
enabled: false
},
series: $scope.jsondata
});
console.debug($scope.jsondata);
});