I'm having trouble to implement style ranges in my html code. Im implementing google fusion tables in a html, where i want a color for a certain polygon who's value falls within a range of numbers. So the color red for every polygon within the range of 1-10. I know how to use > or <= but I cant find the right code for ranging. here is the sample:
layer = new google.maps.FusionTablesLayer({
query: {
select: "KML",
from: "1uYmJOaw2DGBur0f4tJxRcKbu1FbakZUxCdR1yLgL14"
},
templateId: 2,
styles: [
{
where: 'col2 = 0',
polygonOptions: {
fillColor: '#999999',
fillOpacity: 0.3
}
},
{
where: 'col2 = 1-10',
polygonOptions: {
fillColor: '#ea9999',
fillOpacity: 0.3
}
}
]
});
layer.setMap(map);
Thanks in advance!
To get a range you need to combine the operators you already know with AND:
{
where: 'col2 >= 1 AND col2 <= 10', //equals all numbers from 1 to 10
polygonOptions: {
fillColor: '#ea9999',
fillOpacity: 0.3
}
}
Related
Hi i am new to highcharts and facing a difficulty in getting a proper fixed column chart which deals with percentage values.
I would like:
But i am able to achieve:
You can format data labels using series.dataLabels.formatter callback. Check demo and code posted below.
Code:
series: [{
name: 'NSV',
color: 'rgba(165,170,217,1)',
data: [38891, 35098, 21296, 19345, 19092],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Margin',
color: 'rgba(126,86,134,.9)',
data: [8594.911, 6422.934, 5302.704, 580.35, 3417.468],
pointPadding: 0.4,
pointPlacement: -0.2,
dataLabels: {
formatter: function() {
var chart = this.series.chart,
percentage = (this.y / chart.series[0].points[this.point.index].y) * 100;
return percentage.toFixed(1) + '%';
}
}
}]
Demo:
http://jsfiddle.net/BlackLabel/pxLmjvkh/1/
API reference:
https://api.highcharts.com/highcharts/series.bar.dataLabels.formatter
I built a widget with multiple y Axes very similar to the official sample here: http://www.highcharts.com/stock/demo/candlestick-and-volume
I'm trying to have some sort of visual separation between the chart panes, either by
applying a special style to the maximum grid line for each pane, or
adding a horizontal line in the whitespace between the panes
The only approach i got working is using PlotLines, but I'd rather have a separator that's independent of zoom levels. Any ideas on how to achieve this?
Use Renderer to draw a path between y axes.
function drawSeparator() {
let separator = this.separator;
const options = this.options.chart.separator;
if (options && options.enabled) {
if (!separator) {
this.separator = separator = this.renderer.path({
d: 'M 0 0',
'stroke-width': options.width === undefined ? 1 : options.width,
stroke: options.color || 'black'
}).add();
}
const topAxisBottom = this.yAxis[0].top + this.yAxis[0].height;
const bottomAxisTop = this.yAxis[1].top;
const y = topAxisBottom + (bottomAxisTop - topAxisBottom) / 2;
separator.attr({
d: `M 0 ${y} L ${this.chartWidth} ${y}`
});
}
}
Call the method on load/redraw event
chart: {
events: {
load: drawSeparator,
redraw: drawSeparator
},
separator: {
enabled: true,
width: 3,
color: 'blue'
}
},
You can modify the path's d attribute, the path starts from axis.left and stops on axis.left + axis.width
Live example and output
http://jsfiddle.net/L11uqxgq/
I am using highcharts for statistical data displaying. I want to display , on the stack label , the average of all the values .
Below is what i am doing but i cant seem to get it right :
yAxis: {
min: 0,
title: {
text: 'Task'
},
stackLabels: {
style: {
color: 'black'
},
enabled: true,
formatter: function() {
return (this.axis.series[1].yData[this.x]).toPrecision(2) + '%';
}
}
},
The above only takes the last value on the stack and shows the percentage. For instance , if the last value is 50 , the above displays 50% as the stack value . I want to take an average of all the values. Any help would be appreciated.
If you want to show any stack's percentage mean if your stacked column has two stack A-5 and B-10 , then the % of B in column is 66% and % of A is 33%. If you want to show that use following in formatter function ( refer This Fiddle Link)
formatter: function() {
return (this.axis.series[1].yData[this.x] / this.total * 100).toPrecision(2) + '%';
}
Updating as per OP 's comment Refer Working fiddle here
Use following code : Make your data in a variable and calculate the sum
var seriesData = [{
name: 'Incomplete',
data: [1, 3, 4, 7, 20]
}, {
name: 'Complete',
data: [3, 4, 4, 2, 5]
}];
var total = 0;
$.each(seriesData,function(item){
$.each(seriesData[item].data,function() {
total += this;
});
});
And then use following in stacklabel formatter :
formatter: function() {
return ( this.total/ total * 100).toPrecision(2) + '%';
}
series:seriesData
hope it helps :)
This doesn't seem to be as easy as it should be.
I would accomplish this by pre-processing the data to generate an array of averages, and then referencing that array from the stackLabels formatter function.
Example, build the averages (assumes array 'data' with sub array for each series data values):
var sum = 0;
var averages = [];
var dataLen = data.length;
$.each(data[0], function(x, point) {
sum = 0;
for(var i = 0; i < dataLen; i++) {
sum += data[i][x];
}
averages.push(sum/dataLen);
})
And then in the formatter:
yAxis : {
stackLabels: {
enabled: true,
formatter: function() {
return Highcharts.numberFormat(averages[this.x],2);
}
}
}
Example:
http://jsfiddle.net/jlbriggs/vatdrecb/
If I could find a way to get a reliable count of the points in each stack, you could just use
return this.total/countOfPoints;
in the formatter without needing to build an array, but I can't seem to reliably get that count.
I am new to Highcharts.
I have a line chart. Here is the categories:
["9/7/14", "9/8/14", "9/9/14", "9/10/14", "9/11/14", "9/12/14", "9/13/14", "9/14/14", "9/15/14", "9/16/14", "9/17/14", "9/18/14", "9/19/14", "9/20/14", ...]
Here is the data series:
[1, 4, 0, 2, 1, 1, 1, 5, 3, 1, 0, 0, 6, 8, ... ]
I added zoom to my chart, very similar to this jsfiddle demo: http://jsfiddle.net/348sh/3/
chart: {
renderTo: 'container',
zoomType: 'x'
},
I would like to get the total of only those Y values within the zoomed-in window, not the total of the entire data series. For this, I need to capture what values are included in the x axis in the zoomed window. So I added the following based on my research:
xAxis: {
type: 'line',
events: {
setExtremes: function(event) {
console.log(event.min);
console.log(event.max);
}
}
}
However, the values for event.min or event.max are numbers such as 3.6552511415525117, 7.10730593607306. I have no way to know which x values are included in the zoomed window. How can I find which x values are included? Any way to get the start and end x values ?
Thanks!
I did further research. I notice that I may have answered my question already in my question. It turns out that the numbers I gave in my question are very helpful, not clueless. Math.ceil(min) and Math.floor(max) are just the beginning and ending index of the data points in the data series that are show up in the zoomed window. The another thing to note is to use afterSetExtremes event. This is the moment where chart finalizes the starting and ending points in the X axis. So the complete answer is:
xAxis: {
type: 'line',
events: {
afterSetExtremes: function(event) {
var start = Math.ceil(event.min);
var end = Math.floor(event.max);
}
}
}
I am new to Highcharts and love to get corrected if I am wrong.
Cheers.
This may help you . Try this fiddle : http://jsfiddle.net/7kv9a25r/ .
chart: {
events: {
selection: function (event) {
var text,
label;
if (event.xAxis) {
text = 'min: ' + Highcharts.numberFormat(event.xAxis[0].min, 2) + ', max: ' + Highcharts.numberFormat(event.xAxis[0].max, 2);
} else {
text = 'Selection reset';
}
label = this.renderer.label(text, 100, 120)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function () {
label.fadeOut();
}, 1000);
}
},
zoomType: 'x'
},
Can you please take a look at this example and let me know how I can format the dataLabels to be display only with two decimal numbers?
Here is the numver formats which I have in the series
series: [{
name: 'Tokyo',
data: [7.554555, 6.34345559, 9.5555, 14.5555, 18.4333433, 21.5555, 25.2, 26.5333333, 23.33333, 18.23243543, 13.776565669, 9.65454656]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
and I would like to present them like 7.55 , 6.34, 9.55 . Thanks
You need to combine the dataLabels formatter and Highcharts.numberFormat:
...
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y,2);
}
}
...
See jsFiddle
I would simply add a the format option to data labels as follows:
dataLabels: {
enabled: true,
format: '{point.y:,.2f}'
}
It's the simple way of doing it without having to define a function using formatter.
extra:
The comma after the colon makes sure that a number like 1450.33333 displays as 1,450.33 which is nice also.
In case someone wants to go "further", I'm showing data that can be 10^1 to 10^9 so I'm converting them and showing the unit afterwards.
Remember, Highcarts deals only with integers so if you want to add units (and not in the YAxis because of multiple units) you can give it in the source data but you have to format them afterwards:
column: {
dataLabels: {
enabled: true,
formatter: function () {
// Display only values greater than 0.
// In other words, the 0 will never be displayed.
if (this.y > 0) {
if (this.y >= Math.pow(10, 9))
{
return Highcharts.numberFormat(this.y /Math.pow(10, 9) , 1) + " mias";
}
else if (this.y >= Math.pow(10, 6))
{
return Highcharts.numberFormat(this.y /Math.pow(10, 6) , 1) + " mios";
}
else
{
return Highcharts.numberFormat(this.y, 0);
}
}
},
mias : stands for "milliards" (french translation of billiards)
mios : stands for "millions" (french translation of millions)
I noticed in the comments you wanted to not display trailing zeroes.
This was the simplest solution I was able to muster:
...
dataLabels: {
enabled: true,
formatter: function () {
return parseFloat(this.y.toFixed(2)).toLocaleString();
}
}
...
If you don't want the number to end up with a comma-separator (depending on locale) remove the .toLocaleString().
Sidenote: Unfortunately using format (instead of formatter and a js func like we do above) is limited to a subset of float formatting conventions from the C library function sprintf, as indicated here on highcharts website. That library has the code g that would automatically do this for us but unfortunately it is not implemented in Highcharts :(, i.e. format: '{point.y:,.2g}' does not work.