color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, 'red'],
[1, 'orange']
]
}
Current result:
Desired result:
Multiple gradients are not supported on a single SVG element, but you can add additional rect elements as layers with radial gradient fill.
chart: {
events: {
load: function() {
...;
this.renderer.rect(...)
.attr({
fill: { // BLUE
radialGradient: {
cx: 0.9,
cy: 1,
r: 0.9
},
stops: [
[0, '#0000ff'],
[1, 'rgba(0, 0, 255, 0.1)']
]
}
})
.add();
this.renderer.rect(...)
.attr({
fill: { // RED
radialGradient: {
cx: 1,
cy: 0,
r: 0.9
},
stops: [
[0, '#ff0000'],
[1, 'rgba(255, 0, 0, 0.1)']
]
}
})
.add();
}
}
},
series: [{
type: "treemap",
color: { // GREEN
radialGradient: {
cx: 0,
cy: 0.5,
r: 0.9
},
stops: [
[0, '#00ff00'],
[1, 'rgba(0, 255, 0, 0.1)']
]
},
...
}]
Result:
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4975/
Related
I want to create background quadrants like shown here in the fiddle
http://jsfiddle.net/vo97dry6/
But unlike the fiddle above my max/min range is [0-1 ] so i am getting overlapping quadrants..
http://jsfiddle.net/25d6g398/
xAxis: {
min: 0,
max: 1,
tickInterval: 0.5,
tickLength: 0,
minorTickLength: 0,
gridLineWidth: 1,
showLastLabel: true,
showFirstLabel: false,
lineColor: '#ccc',
lineWidth: 1,
},
yAxis: {
min: 0,
max: 1,
tickInterval: 0.5,
tickLength: 3,
minorTickLength: 0,
lineColor: '#ccc',
lineWidth: 1,
},
series: [
{ // next four series are for color
type: 'area',
fillOpacity: 0.1,
data: [[0.5,1.1], [-0.1, 1.1]],
lineWidth: 0
},
{
type: 'area',
fillOpacity: 0.1,
data: [[0.5, 1.1], [1.1, 1.1]],
lineWidth: 0
},
{
type: 'area',
fillOpacity: 0.1,
data: [[-0.1, 0.5], [1.1, 0.5]],
lineWidth: 0
},
{
type: 'area',
fillOpacity: 0.1,
data: [[-0.1, 0.5], [1.1, 0.5]],
lineWidth: 0
}
]
How an i hack to create neat background quadrants
How can I add quadrant labels clicking on which should perform some function (for example do a drilldown on that quadrant)
How can i make my axis to center at 0.5,0.5 instead of 0,0
Thanks for your help
Just use 4 points instead of 2:
series: [{
type: 'area',
fillOpacity: 0.4,
data: [
[0.5, 0],
[1, 0],
[1, 0.5],
[0.5, 0.5]
],
lineWidth: 0
}, {
type: 'area',
fillOpacity: 0.4,
data: [
[0, 0],
[0.5, 0],
[0.5, 0.5],
[0, 0.5]
],
lineWidth: 0
}, {
type: 'area',
fillOpacity: 0.4,
data: [
[0, 0.5],
[0.5, 0.5],
[0.5, 1],
[0, 1]
],
lineWidth: 0
}, {
type: 'area',
fillOpacity: 0.4,
data: [
[0.5, 0.5],
[1, 0.5],
[1, 1],
[0.5, 1]
],
lineWidth: 0
}]
Demo:
http://jsfiddle.net/BlackLabel/0rv8641f/
i have a gauge charts with defined tick positions and want to show some text labels there. e. g.:
-300 => Text 1
-200 => Text 2
-100 => Text 3
...
Is there a way to do that? Here's a fiddle of the chart.
jsfiddle.net/r8d3jnx6/
$('#container').highcharts({
chart: {
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: null
},
tooltip: {
enabled: false
},
pane: {
startAngle: -70,
endAngle: 70,
background: null
},
plotOptions: {
gauge: {
dial: {
baseWidth: 2,
baseLength: '100%',
radius: '100%',
rearLength: 0
},
pivot: {
radius: 5
},
dataLabels: {
enabled: false
}
}
},
yAxis: [ {
min: -300,
max: 500,
tickPositions: [-300, -200, -100, 0, 100, 200, 300, 400, 500],
lineColor: '#933',
lineWidth: 0,
minorTickPosition: 'outside',
tickLength: 0,
minorTickLength: 0,
labels: {
distance: 12,
//rotation: 'auto'
},
//categories: ['Grunder'],
offset: 0,
plotBands: [{
from: -300,
to: 2,
thickness: 15,
color: '#55BF3B'
}, {
from: 0,
to: 202,
thickness: 15,
color: {
linearGradient: {x1: 0, x2: 1, y1: 0, y2: 0},
stops: [
[0, '#55BF3B'], //green
[1, '#DDDF0D'] //yellow
]
}
}, {
from: 200,
to: 500,
thickness: 15,
color: {
linearGradient: {x1: 0, x2: 1, y1: 0, y2: 0},
stops: [
[0, '#DDDF0D'], //yellow
[1, '#ff0000'] //red
]
}
}]
}, {
min: -200,
max: 200,
lineColor: '#339',
tickColor: '#339',
minorTickColor: '#339',
offset: -100,
lineWidth: 2,
labels: {
enabled: false
},
tickLength: 5,
minorTickLength: 5,
endOnTick: false
}],
series: [{
data: [250]
}]
});
You can use a yAxis.labels.formatter function to check what the label value is, and return a text of your choice depending on that value.
To take your example, it could look like this:
yAxis: {
labels: {
formatter: function() {
if(this.value == -300) return '-300 => Text 1';
if(this.value == -200) return '-200 => Text 2';
if(this.value == -100) return '-100 => Text 3';
return this.value;
}
}
See this updated JSFiddle of how it works. As you can see you'll have to face the potential issue of labels overlapping the gauge, but you can fix that with distance, rotation and some other attributes (see API), depending on how your labels end up looking.
I am trying to have some cells half empty like here:
http://jsfiddle.net/fuw65g95/3/
But When there is not a cell on top of one half coloured, it is shown only in one colour: http://jsfiddle.net/fuw65g95/6/
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [ {
x: 0,
y: 0,
value: 90,
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, '#000000'],
[0.49999999, '#000000'],
[0.5, '#007340'],
[1, '#007340']
]
}
}],
And where there is one on top, it works fine http://jsfiddle.net/fuw65g95/7/
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [ { ... }, [0,1,2]],
I am trying to use the Highcharts gauge. Is there a way to set the plotband to a linear gradient? If my gauge has a value from 0-100, I want the plot band to shift from red at 0 to yellow at 50 to green at 100.
I thought that I could just generate the indiviual plotband sections for each stop point, 1-100 but if there was a way to set a linear grandient that would be so much cleaner. Any one know a way?
Yes, it is possible. Try something like this:
yAxis: {
min: 0,
max: 100,
plotBands: [{
color: {
linearGradient: [300, 300, 0, 0],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(150, 200, 155)']
]
},
from: 0,
to: 100
}],
},
http://jsfiddle.net/fsQZ7/
By carefully chosing your colours, linearGradients and from/to, you should be able to combine several plotbands to do what you want.
read "LINEAR GRADIENTS" on
http://www.highcharts.com/docs/chart-design-and-style/colors
Example: from yellow to green to red:
plotBands: [{
from: 0,
to: 29,
color: '#DDDF0D' // yellow
},{
from: 29,
to: 40,
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#55BF3B'], //green
[1, '#DDDF0D'] //yellow
]
}
}, {
from: 40,
to: 51,
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#55BF3B'], //green
[1, '#DF5353'] //red
]
}
}, {
from: 51,
to: 80,
color: '#DF5353' //red
}]
I have used highcharts library in my project and i have to update Gauge every 1 second with data creating by PHP file .
The highcharts Gauge Example have some code to make it trigger every 1 second , but i cant found some thing like This Link to get data from PHP file with Ajax Technic .
Anyone have any idea to implement this scenario and apply Ajax to this chart ?
You not found example because it is generic, see how it can be done with $.post():
http://jsfiddle.net/oceog/zpwdp/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
setInterval(function () {
$.post('/echo/json/',{
json: JSON.stringify({
//This is just a sample data, see comments after code to real world usage
inc: Math.round((Math.random() - 0.5) * 20)
})},
function(data) {
var point = chart.series[0].points[0],
newVal,
inc = data.inc;
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
},"json");
}, 3000);
});
});
In real world you use something like
$.post('new_data.php',{last_time: last_time},function(data) {
//set point here
},"json")
in new_data.php you do something like
$data=get_data($last_time);
echo json_encode($data);
exit;