I'm using highstock chart area. What I'm trying to achieve if possible is when the chart is initially drawn the area portion to be one color. When the user selects other options then the lines that are drawn come in another color. I've tried using the the highcharts theme and i've also set the highcharts setOptions. I also tried the plotOptions. When clicked it works as normal adds the additional line as black. But when clicked again it adds another line but as gray. The gray on gray when there are lots of lines some just can be seen.
Attached is what the chart looks like
Here is my code: ` Highcharts.setOptions({
colors: ['#778899','#000000']
});
$(selector).highcharts('StockChart', {
chart: {
height: 600,
borderRadius: 0
},
credits: { 'enabled': false },
legend: {
enabled: true,
borderRadius: 1,
borderWidth: 0,
itemStyle: {
fontSize: '11px'
},
itemHiddenStyle: {
color: '#999999'
}
}
plotOptions: {
series: { lineWidth: 1 },
area:{colors:['#000000']}
}
});`
You defined only 2 colors: #778899','#000000'. So when you add 3rd line it is gray, 4th line would be black, and so on. Example with 4 lines: http://jsfiddle.net/dpb3vcy0/1/
$(function () {
// Create the chart
Highcharts.setOptions({
colors: ['#778899', '#000000']
});
$('#container').highcharts('StockChart', {
rangeSelector: {
inputEnabled: $('#container').width() > 480,
selected: 1
},
series: [{
name: 'nr 1',
data: [5, 1, 1],
type: 'area',
threshold: null,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}, {
name: 'nr 2',
data: [0, 0, 5, 5],
type: 'area',
threshold: null,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}, {
name: 'nr 3',
data: [0, 0, 0, 2, 2, 7],
type: 'area',
threshold: null,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}, {
name: 'nr 4',
data: [0, 0, 0, 0, 0, 1, 1, 4],
type: 'area',
threshold: null,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}]
});
});
Related
How do I achieve a bar gauge chart?
I need a chart like this:
I followed the steps from here, but I am not able to define the stops properly.
https://www.safaribooksonline.com/library/view/learning-highcharts/9781849519083/ch04s04.html
These are my stops:
stops: [
[0, '#ffffff'],
[1, '#ff0000'],
[2, '#f3f03c'],
[3, '#FFA500'],
[4, '#02c102']
]
Please advice.
var value = "3.0";
Highcharts.chart('barGauge', {
chart: {
type: 'bar',
plotBorderWidth: 2,
plotBackgroundColor: '#D6D6EB',
plotBorderColor: '#D8D8D8',
plotShadow: true,
spacingBottom: 43,
width: 350,
height: 120
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
tickLength: 0
},
yAxis: {
title: {
text: null
},
labels: {
y: 1
},
min: 0,
max: 4,
tickInterval: 1,
minorTickInterval: 1,
tickWidth: 1,
tickLength: 8,
minorTickLength: 5,
minorTickWidth: 1,
minorGridLineWidth: 0
},
legend: {
enabled: false
},
series: [{
borderColor: '#7070B8',
borderRadius: 3,
borderWidth: 1,
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 0
},
stops: [
[0, '#ffffff'],
[1, '#ff0000'],
[2, '#f3f03c'],
[3, '#FFA500'],
[4, '#02c102']
]
},
pointWidth: 50,
data: [parseInt(value)]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="barGauge"></div>
So if the value is 1, the bar should progress from 0 to 1 and be red.
So if the value is 2, the bar should progress from 0 to 2 and be yellow.
So if the value is 3, the bar should progress from 0 to 3 and be orange.
So if the value is 4, the bar should progress from 0 to 4 and be green.
You can create an array of zones and apply a specific color to each value range.
An array defining zones within a series. Zones can be applied to the X axis, Y axis or Z axis for bubbles, according to the zoneAxis option. The zone definitions have to be in ascending order regarding to the value.
const gaugeValue = 4;
Highcharts.chart('barGauge', {
chart: {
type: 'bar',
height: 120
},
title: {
text: ''
},
yAxis: {
min: 0,
max: 4,
tickInterval: 1,
title: {
text: null
},
},
legend: {
enabled: false
},
series: [{
data: [parseInt(gaugeValue)],
zones: [{
value: 1,
color: '#ffffff'
}, {
value: 2,
color: '#ff0000'
},
{
value: 3,
color: '#f3f03c'
},
{
value: 4,
color: '#FFA500'
},
{
value: 5,
color: '#02c102'
}
]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="barGauge"></div>
jsfiddle
I want to implement speedometer to display internet bandwidth speed but I want to change its number sequence. I have search a lot but couldn't find anything.
Please find below code snippet for the highchart gauge. I want to change the label (number). In below example number sequence is 0,10,20,30,...,100.
But my requirement is number sequence should be 0,1,5,10,20,30,40,50,60,70,80,90,100
Check following image of gauge:
Highchart image
But my requirement is number sequence should be 0,1,5,10,20,30,40,50,60,70,80,90,100
Is there any way to change the numbers ?
Highcharts.chart('container', {
chart: {
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: 100,
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: 'Mbps'
},
plotBands: [{
from: 0,
to: 60,
color: '#55BF3B' // green
}, {
from: 60,
to: 80,
color: '#DDDF0D' // yellow
}, {
from: 80,
to: 100,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
You can specify specific tick-positions using yAxis.tickPositions (API).
In your case:
yAxis: {
tickPositions: [0,1,5,10,20,30,40,50,60,70,80,90,100]
}
In your example you have yAxis.labels.step set to 2, which needs to be removed so that you don't skip over any labels for your defined tickPositions (unless you want to that is).
See this JSFiddle demonstration of your suggested labels.
I'm building a vertical gauge and am having problems applying a custom image in place of the default marker.
Although the image renders, it's placement is off. I can't seem to get it to point exactly where the marker is positioned and I'm not sure if applying a static offset value to the 'y' attribute is the right approach.
Here's a fiddle.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
marginBottom: 25,
marginTop: 70,
marginLeft: 65,
marginRight: 10,
},
xAxis: {
categories: ['One'],
lineColor: 'white',
labels: {
enabled: false
},
tickLength: 0,
min: 0,
max: 2
},
plotOptions: {
column: {
stacking: 'normal',
animation: false,
borderWidth: 0,
}
},
yAxis: {
min: 0,
max: 9026,
tickInterval: 9026,
tickLength: 0,
tickWidth: 0,
tickColor: '#C0C0C0',
gridLineColor: '#C0C0C0',
gridLineWidth: 0,
minorTickInterval: 25,
minorTickWidth: 0,
minorTickLength: 0,
minorGridLineWidth: 0,
title: null,
labels: {
formatter: function () {
if (this.isFirst || this.isLast) {
return this.value;
}
},
x: 0
},
},
legend: {
enabled: false
},
series: [
{
data: [4513],
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, 'red'],
[1, 'orange']
]
}
},
{
data: [4513],
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, 'orange'],
[1, 'green']
]
}
},
{
type: 'scatter',
data: [3120],
marker: {
enabled: true,
symbol: 'circle'
},
dataLabels: {
useHTML: true,
formatter: function () {
return '<img width="40px" height="40px" src="http://icongal.com/gallery/image/57585/small_arrow_black_monotone_left.png" />'
},
enabled: true,
align: 'right',
x: -3,
y: 2,
overflow: "justify"
}
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 178px; height: 242px;"></div>
Would appreciate any help, thanks!
You should adjust the image position via x, y properties.
x: 0,
y: 30,
example: https://jsfiddle.net/ptezqnbf/1/
or even better, use renderer.image and control the position directly.
function renderImage() {
var chart = this,
point = chart.get('point'),
imgWidth = 40,
imgHeight = 40;
if (!chart.dataLabelImg) {
chart.dataLabelImg = this.renderer.image('http://icongal.com/gallery/image/57585/small_arrow_black_monotone_left.png', -1000, -1000, imgWidth, imgHeight).add(point.series.dataLabelsGroup);
}
chart.dataLabelImg.attr({
x: point.graphic.x + (imgWidth - 15) / 2,
y: point.graphic.y - (imgHeight - 10) / 2
});
example: https://jsfiddle.net/tpp1gdau/1/
I am using ng-highcharts and I'm trying to create a gauge that can handle negative values, I have almost got there. However, I want zero to be at the top (in others words, I want the chart to be rotated 90 degrees to the right), and for some reason, the -200 value is printed twice/overlapping. What am I missing/doing wrong?
http://jsfiddle.net/Hjdnw/2006/
this is what it should ideally look like, but I want the same thing in ng-highcharts so I can use in my angular application
http://jsfiddle.net/5rncm2nn/1/
I tried creating my own directive instead of using ng-highcharts,and its working as expected for me.
Also remove the options object which is wrapping the chart object in your config, that might also be creating problem
Use this config
{
chart: {
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: -200,
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: 200,
color: '#55BF3B' // green
}, { from: -200,
to: 0,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
}
Same as yours just removed the options object
Checkout this fiddle
http://jsfiddle.net/Hjdnw/2010/
Absolute novice here at JavaScript so please forgive any bad coding.
I have been working on a project using Highchart and wish to read the value of a file (actually read the file into an array and grab a specific value - I will use other values for other graphs).
With the help of others here I can now display the value of the array into HTML however I cannot pass this into the Highchart.
My prototype page (so you can see the output) can be found at
http://maccas.chickenkiller.com/1.html
The code is
<html debug="false">
<head>
<title>Adam's hacked up demo</title>
<META HTTP-EQUIV="refresh" CONTENT="300">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<script>
jQuery(function($){ // encapsulate jQuery
$.ajax(
{
url:'livedata.txt',
async:false,
success: function(data){
livedata = data.split(',');
}
});
function drawGraph(phvalue) {
var phvalue=livedata[3];
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'live pH'
},
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: 8,
max: 9,
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'
},
plotBands: [{
from: 8,
to: 8.3,
color: '#55BF3B' // green
}, {
from: 8.3,
to: 8.7,
color: '#DDDF0D' // yellow
}, {
from: 8.7,
to: 9,
color: '#DF5353' // red
}]
},
series: [{
name: 'Current pH',
data: [phvalue],
tooltip: {
valueSuffix: ' pH'
}
}]
});
}
$(document).ready(function () {
drawGraph();
});
});
</script>
<body>
<table>
<tr>
<td><div id="container" style="width:90%; height:400px;"></div></td>
</tr>
</table>
</body>
</html>
Does anyone have an idea how to get the var phvalue to display in Highcharts?
Thanks in advance.
Since ajax is asynchronous, you can draw the graph once the request is complete
jQuery(function($){ // encapsulate jQuery
$.ajax(
{
url:'livedata.txt',
async:false,
success: function(data){
livedata = data.split(',');
highcharts(livedata[3])
}
});
function highcharts (phvalue) {
$('#realtimeph').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'live pH'
},
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: 8,
max: 9,
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'
},
plotBands: [{
from: 8,
to: 8.3,
color: '#55BF3B' // green
}, {
from: 8.3,
to: 8.7,
color: '#DDDF0D' // yellow
}, {
from: 8.7,
to: 9,
color: '#DF5353' // red
}]
},
series: [{
name: 'Current pH',
data: [phvalue],
tooltip: {
valueSuffix: ' pH'
}
}]
});
}
});
This was surprisingly complicated. You want:
$('#container').highcharts().series[0].points[0].update(x)
where x is the number you want to update with