I have series data set as
series0 = [[x0,y0,name0],[x1,y1,name1],[x2,y2,name2]...]
and can easily pick x or y values to use in the dataLabel with format: {point.y} for example, but can't work out how to access the name value.
Any help much appreciated.
if you made your series like so:
series0 = [ {x:x0,y:y0,name:name0},{x:x1,y:y1,name:name1},{x:x2,y:y2,name:name2}...]
then you could use {point.name} in your labels
http://jsfiddle.net/TuVZQ/
Related
This a sample in highcharts for what exactly i need to create. The issue i am facing is the blue color should be in the area chart series, but highchart is applying the color at the top (outside the series). I apologize if i am not able to explain the issue correctly.
This happens when i use reversed: true, in yAxis.
Please help or let me know if you need me to explain the issue in different words.
When you reverse the axis, the data reverses as well, to match.
I would probably do this by using negative values as the axis min/max, and the data points.
Then, in the axis label formatter, return the absolute value (removing the '-').
labels: {
formatter: function() {
return Math.abs(this.value);
}
}
You can use the same formatting method to fix the tool tips, data labels, and anything else that might need it.
Example:
http://jsfiddle.net/jlbriggs/MybCM/27/
I have some pie charts on my site and they show quite a bit of data. I was wondering if there is a way to load the data, but initially hide any data that is less than some arbitrary value. When I say hide, I mean in the same way you can hide the certain data by clicking on the label in the legend. Then through the legend, have the user be able to show this data on the graph by clicking on the label in the legend. Is there a property or something I can use to accomplish this?
You can define any variable as maxValue, then iterate on each point and call setVisible as false.
var minValue = 10
$.each(chart.series[0].data, function(i, point){
if(point.y < minValue) {
point.setVisible(false);
}
});
Example: http://jsfiddle.net/ct2jejgv/
Simply use this.chart.series[i].hide() / .show(). In your script, manually search for series less than your value and hide them like above. Its a simple foreach.
I am new to highcharts and trying to show the chart and data at the same time.
Like the whole display should be like this.
First column : Station Name(data)
Second column : horizontal bar
Third column : Data.
Is it possible to paint it only using highcharts API's ?
Thanks
Sukanta
You are basically talking about a regular bar chart with a categorical axis and data labels:
http://jsfiddle.net/JVNjs/288/
categories:['group a','group b','group c','group d','group e']
I don't think that there is a default setting that will align the data labels all to the right in a column as you requested, but I am sure there is a workaround that will allow it to be done.
I looking for a way to only draw part of the data set in area chart. There is a slider above the chart that can limit the range of one series in the chart while other stile rendered in whole. I wonder whats the best way to do this. The only idea at the moment is to redraw the chart every time the slider moves but I'm afraid this could result in worse performance. Maybe this could be done with something like mask on the SVG element.
I came up with a simple solution by just clipping the svg graph with an clip path:
//var chart is the actual HighChartsInstance;
var renderer = chart.renderer;
var group = renderer.g().add();
var clipPath = renderer.createElement("clipPath");
clipPath.element.id = 'clip';
var rect = renderer.rect(0, 0, 200, 400).add(clipPath);
this.clippingMask = rect.element; //reference to the clipping rect which width is changed by the slider
clipPath.add(group);
chart.series[1].group.element.setAttribute('clip-path', "url(#clip)");
chart.series[1].group.element.childNodes[0].setAttribute('clip-path', "url(#clip)");
You have a few ways
use highstock which contains "slider" http://www.highcharts.com/stock/demo/
use highstock.js and highcharts chart with scroller http://jsfiddle.net/UCmUx/
scrollbar:{
enabled:true
},
use highcharts chart without scroller http://jsfiddle.net/UCmUx/1/ and in case when you move your own scroller, then use setExtremes() http://api.highcharts.com/highcharts#Axis.setExtremes()
I think one option is to modify the series data which you want to restrict, and then call:
chart.series[n].setData(newData);
where 'n' is the number of the series you are truncating. newData is a copy of the series data with the unwanted points taken out. You will need to specify x and y values in the series in order for it to be plotted in the correct position.
There, bizarrely, doesn't seem to be a way to target which Y axis a series is added to using the chart.addSeries() method. Nothing here (http://api.highcharts.com/highstock#Chart.addSeries%28%29) about targeting axes. This results in lines destined to be plotted against the oposite axis being incorrectly plotted in the left hand one; something I would have thought to be a basic prerequisite of the method.
Has anyone seen any hacks or plugins that might solve this or know where to go in the source to fix this?
That's what the yAxis property is used to specify in the series configuration object you pass into addSeries as the options parameter.
You can add serie as you define series in Highcharts, so you can use yAxis index. Take look at example http://jsfiddle.net/68Fp4/1/
$('#button').click(function() {
chart.addSeries({
name: 'ADBE',
data: ADBE,
yAxis:1
});
});