Develop Reference

HighCharts with Dynamic Data not working

I have a ASP.NET MVC project with SignalR.
I have a page with a HighChart and the script looks like this:
$(function () {
window.Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 10
},
title: {
text: 'GMAS Queues'
},
xAxis: {
type: 'datetime',
tickInterval: 500,
labels: {
enabled: false
}
},
yAxis: {
title: {
text: 'Queue Count'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Processing Queues'
}]
});
});
$.connection.hub.logging = true;
// Reference the auto-generated proxy for the hub.
var chartData = $.connection.processingQueuesHub;
// Create a function that the hub can call back to display messages.
chartData.client.updateQueueCounts = function (data) {
//$.each(data, function(i, item) {
// // Add the message to the page.
// $('#chartDataLog').append('<li><strong>' + htmlEncode(item.QueueName)
// + '</strong>: ' + htmlEncode(item.Length) + '</li>');
//});
// set up the updating of the chart.
var series = chart.series[0];
$.each(data, function (i, item) {
if (item.QueueName == "Queue A") {
var x = Date.parse(item.Date),
y = item.Length;
series.addPoint([x, y], true, false);
}
});
};
However, I see the graph but not the points.
The strange part is the series data points are there:
Anyone know why HighCharts is not rendering the points?
Thanks, Bill N

I have to thank my good friend and co developer for figuring this out. He is a smarter and braver man than me. :) He went to the highcharts source and found that the highcharts breaks if you add to the graph series before the initial animation is completed. The animation is why the clip-rect is zero-width (it animates from zero to full width over 1s when you first create the chart). You end up adding a point to the series before this animation even really starts. This kills the animation but it doesn’t fix the width of the clip-rect. The fix is to add animation is false for the series.
series: [{ name: 'Processing Queues', data: [], animation: false }]

It looks like you are not defining what your chart.series is until it is created. The line in your ajax is as follows and its not waiting for DOM ready:
var series = chart.series[0];
But you do not define chart until $(document).ready(function () {.... Try keeping your chart object in scope of your ajax.

add event to x-axis labels of bar highchart

I am trying to retrieve the text of a label on the char x-axis by clicking on it. I am using bar chart and the code is the following:
var chart = new Highcharts.Chart({
chart: {
type: 'column',
backgroundColor: '#eaedf1',
zoomType: 'x',
renderTo: 'container'
},
plotOptions: {
series: {
cursor: 'pointer',
pointWidth: 10,
point: {
events: {
click: function (event) {
console.log(event.point.name + " " + this.y);
}
}
}
}
},
title: {
text: 'Total Flow Types'
},
xAxis: {
type: 'category',
labels: {
rotation: -90
}
},
yAxis: {
min: 0,
title: {
text: 'millions'
}
},
legend: {
enabled: false
},
series: [{
name: 'Flow Types'
}]
});
Then by clicking on a button the chart gets populated using ajax which works fine. By checking the dom of the chart I saw that each of the labels is text /text. They are part of g/ element with a class highcharts-axis-labels highcharts-xaxis-labels. So I've tried retrieving the values using jquery like:
$('body').on('click', 'g.highcharts-axis-labels.highcharts-xaxis-labels text', function () {
console.log($(this).text());
});
or just
$('body').on('click', 'text', function () {
console.log($(this).text());
});
This all is part of the document.ready function. Unfortunately none of these retrieves the text of a x-axis label?

Instead of:
$('body').on('click', 'g.highcharts-axis-labels.highcharts-xaxis-labels text', function () {
console.log($(this).text());
});
Use this:
$('.highcharts-xaxis-labels text').on('click', function () {
console.log($(this).text());
});
You should not connect classes highcharts-axis-labels and highcharts-xaxis-labels with a dot. And also the class highcharts-xaxis-labels is enough to add the event on. Here's the fiddle: http://jsfiddle.net/8sxLr5j8/

You can use extension which allows do it.

How to toggle legend layout in highchart

I am interested to change legend layout on click event as below
1st click horizontal - bottom
2nd click horizontal top
3rd click virtical left
4th click virtical right
Here is Link to FIDDLE
I don't know how this can be done, this is what I have tried so far.
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<input id='legend' type='button' value='toggle legend'>
JAVASCRIPT
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy',
marginLeft: 50,
marginBottom: 90
},
yAxis: {
reversed: true,
//min: 0,
//max: 50
},
plotOptions: {
series: {
stacking: 'normal'
}
},
xAxis: {
opposite: true
},
series: [{
name: '01-Jan-2014',
data: [
[28, 10],
[30, 0]
]
}]
});
var last = 0;
$('#legend').click(function(){
var arr = ['vertical','horizontal'];
if(last>arr.length){last=0;}
setTimeout(function() { alert(arr[last++]);},10);
chart.series[0].update({ legend: { layout: arr[last] }});
});
});

Here's a way to do it here. I hate resorting to setting the internal dirty flags but it seems to work well:
var somePositions = [['center','bottom'],
['center','top'],
['left','middle'],
['right','middle']];
$('#btn').click(function(){
posIdx++;
if (posIdx == 4) posIdx = 0;
chart.legend.options.align = somePositions[posIdx][0];
chart.legend.options.verticalAlign = somePositions[posIdx][1];
chart.isDirtyLegend = true;
chart.isDirtyBox = true;
chart.redraw();
});

You need to use tranlsate() function which allows to move SVG elements like legend.
var legend = chart.legend.group;
$('#btn').click(function(){
legend.translate(0,0)
});
http://jsfiddle.net/F3cSa/1/

How to let user know that a Highcharts chart is clickable?

I'm using Highcharts Javascript library to generate charts.
I would like to make a chart clickable, which is supported by Highcharts using the syntax below:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart-container-revenue-per-purchaser',
defaultSeriesType: 'line',
events: {
click : function() { location.href = '/revenue/purchaser' }
}
},
However, when you mouse over the chart, there's no visual changes (eg border of the graph appearing, cursor changing shape) to indicate to the viewer that the chart is clickable.
Is this something Highcharts supports or I have to implement it using CSS?
Thank you.

try this:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart-container-revenue-per-purchaser',
defaultSeriesType: 'line',
events: {
click: function() {
location.href = '/revenue/purchaser'
}
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
alert('clicked');
}
}
},
marker: {
lineWidth: 1
}
}
}
});​
taken from http://www.highcharts.com/demo/line-ajax
This uses the 'cursor' option from plotOptions->serise
cursor : String
You can set the cursor to "pointer" if you have click events attached to the series, to signal to the user that the points and lines can be clicked. Defaults to ''.
http://www.highcharts.com/ref/#plotOptions-series--cursor

Add this to the object
plotOptions: {
line: {
allowPointSelect: true,
cursor: 'pointer'
}
},

Open Highcharts in modal window

I'm working on a site where I use Highcharts quite heavily for presenting data in charts. I want to user to be able to "zoom" each chart into a modal window for better readability.
I know how to manipulate the chart with its API, but I'm not quite sure how I can clone the chart and refer to the new chart with an variable?
I've done alot of searching, and all I've found is how to open in modal window with Highcharts own modal library, but I'm using a modal library called Lightview.

I have got this working using jQuery modal panel.
On click of original chart I am calling a javascript function popupGraph which will create a new highchart by merging the options of the existing highchart. On close event of modalPanel I am destroying the highchart that we have created for popup.
Hope this helps..
Code for actual chart that I show in small size.
trackingChart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: loadChart,
click: function() {
popUpGraph(this);
}
}
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
},
legend: {
layout: 'horizontal',
backgroundColor: '#FFFFFF',
align: 'center',
verticalAlign: 'bottom',
x: 10,
y: 0,
floating: false,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' points';
}
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0
}
},
exporting: {
enabled: false
},
series: [{
data: []
}, {
data: []
}]
});
Code for function opening modal panel
function dummy() {}
function popUpGraph(existingChart) {
var options = existingChart.options;
var popupChart = new Highcharts.Chart(Highcharts.merge(options, {
chart: {
renderTo: 'popup_chart',
height:300,
width:700,
zoomType: 'x',
events: {
load: dummy,
click: dummy
}
}
}));
$( "#dialog").dialog({
autoOpen: false,
height: 350,
width: 750,
modal: true,
show:'blind',
close: function(event, ui) { popupChart.destroy(); }
});
$("#dialog").dialog("open");
}

You can get the new range by the selection event and then get the respective position from the chart serie.
See my example.
http://jsfiddle.net/ricardolohmann/sZMFh/
So, if you want to show it inside the lightbox you have to change the following code:
chart2 = new Highcharts.StockChart({
chart: {
renderTo: 'container2'
},
series: newSeries
});
To this one, and set the container2 display to none
Lightview.show({ url: 'container2', type: 'inline' });

Further to Santhosh's answer, I added this at the end of popupGraph function to get data loaded up:
$.each(existingChart.series, function (prop, val) {
popupChart.series[prop].setData(val.options.data);
popupChart.series[prop].update(val.options);
});