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.
Related
I need to add SolidGauge - HighCharts with drilldown.
I couldn't add drilldown for gauge. So I ve tried to load the div by calling script function
<div id="YTDSolidGauge" onload="drawGaugeChart();" onclick="drawBarChart(this);" ></div>
<div id="YTDBar" onclick="drawGaugeChart();"></div>
And trigger function in the barchart's function,
events:{
click: function(){
alert('test');
drawGaugeChart();
}
}
When I wrote the onload function in the gauge, the chart has disappeared.
I want the gauge to be loaded first and when we click on it, bar should be loaded.
When we click on the bar chart, it should be back to the gauge.
or we can reload the particular div to load another div.
I have a lot of charts, so it's better to call by function instead of writing 'onload' function in the body.
You need to catch click event in the series.point.events, destroy chart and create new one (bar). Then add also click event and call destroy/init.
var barOptions,
solidOptions;
barOptions = {
chart:{
type: 'bar'
},
series:[{
data:[1,2,3]
}],
plotOptions: {
series: {
point: {
events: {
click: function() {
var chart = this.series.chart;
chart.destroy();
Highcharts.chart('container', solidOptions);
}
}
}
}
},
}
solidOptions = {
chart: {
type: 'solidgauge'
},
legend: {
enabled: false
},
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
plotOptions: {
series: {
point: {
events: {
click: function() {
var chart = this.series.chart;
chart.destroy();
Highcharts.chart('container', barOptions);
}
}
}
}
},
tooltip: {
enabled: false
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
}]
}]
};
Highcharts.chart('container', solidOptions);
Demo:
http://jsfiddle.net/nxaLpnLz/
I have this fiddle JSfiddle
Here is the reproduced code:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Heroku', 'Ruby','Lisp','Javascript','Python','PHP']
},
yAxis: {
categories: ['low','medium','high'],
title: {
text: 'expertise',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: [{
data: ['low','high','low','medium','medium']
}]
});
});
If you look at the fiddle the yAxis does not render and has a value of for every x category. I've been looking at the highcharts api, but I can't seem to get this right. The code makes sense to me but I'm obviously doing something wrong. Can someone point out why the YAxis is not displaying correctly?
As mentioned in my comment, you need to supply the numeric value of the category, not the category name.
In the case of categories, the numeric value is the array index.
Also, in your case, the way you are trying to plot the values, I would add an empty category at the beginning, otherwise your first category of low gets plotted as 0, which doesn't seem right.
So,
categories: ['low','medium','high']
Becomes
categories: ['','low','medium','high'],
And
data: ['low','high','low','medium','medium']
Becomes
data: [1,3,1,2,2]
Updated fiddle:
http://jsfiddle.net/jlbriggs/k64boexd/3/
Check this fiddle:
http://jsfiddle.net/navjot227/k64boexd/2/
Trick is to utilize the formatter function. You can use a similar formatter function on y-axis labels too if that's desired. Though it seems like you need it for data labels for this problem.
$(function() {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Heroku', 'Ruby', 'Lisp', 'Javascript', 'Python', 'PHP']
},
yAxis: {
title: {
text: 'expertise',
align: 'high'
},
labels: {
overflow: 'justify',
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function() {
if (this.y == 0) {
return 'low'
} else if (this.y == 1) {
return 'medium'
} else {
console.log(this.y);
return 'high'
}
}
}
}
},
series: [{
data: [0, 2, 0, 1, 1]
}]
});
});
In my opinion, it is kinda unlikely for a line graph to have a y-axis category, since it speaks more of amount or value. In your case, "low, medium, and high" speaks of ranges, with which a certain value can be assigned to any of it.
Thus, Highcharts accepts series data in numeric form. But you can work around it by setting ['low', 'medium', 'high'] in the category attribute of yAxis, then setting series data as an array of number corresponding to the index of the category, i.e. [0,1,1,2,...] and tweaking the tooltip to display the category instead of the y value using formatter attribute.
Here is the code:
$(function() {
yCategories = ['low', 'medium', 'high'];
$('#container').highcharts({
title: {
text: 'Chart with category axes'
},
xAxis: {
categories: ['Heroku', 'Ruby','Lisp','Javascript','Python','PHP']
},
yAxis: {
categories: yCategories
},
tooltip: {
formatter: function() {
return this.point.category + ': ' + yCategories[this.y];
}
},
series: [{
data: [0, 1, 2, 2, 1]
}]
});
});
Here is a working example : JSFiddle
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.
Here is my code:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
tooltip: {
shared: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
alert("column index: " + this.series.columnIndex);
}
}
}
}
},
series: [{
name: 'Tokyo',
data: [216.4, 194.1]
}, {
name: 'New York',
data: [91.2, 83.5]
}, {
name: 'London',
data: [52.4, 65.2]
}, {
name: 'Berlin',
data: [47.6, 39.1]
}]
});
});
Here is fiddle: http://jsfiddle.net/a9mp9vhj/1/
Click on the top of the first column and you will see the message: "column index: 0" which is correct. Click on the middle or bottom of the first column and you will see other indeces.
if you set tooltip to be not shared everything starts working.
Is it Highcharts bug? How to get the correct column index with shared columns?
It almost seems like Highcharts isn't taking the x-value of the click into account, and only looks at the y-value of your click location (you can get every index if you click in the "correct" height).
It seems that the event.target.point is correct, while event.point (or this) is not. An example of how this workaround can be used to get the correct columnIndex as Highcharts is currently working (JSFiddle example):
plotOptions: {
series: {
point: {
events: {
click: function(event) {
alert("column index: " + event.target.point.series.columnIndex);
}
}
}
}
}
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);
});