I have a standard Angular gauge, and I can't figure out how to remove the silver border (stroke) from the data labels.
Using the following code, taken from http://www.highcharts.com/demo/gauge-speedometer
$(function () {
$('#container').highcharts({
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: 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) {
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);
}
});
});
I understand I can style the text within the data label, for example:
dataLabels: {
format: '<span style="font-size:18px">Consumption: {y} kWh</span>',
x: 0,
y: 50
},
But I can't seem to find a way to remove the stroke. Looking at the source it's written as attributes in the rect-tag.
<rect x="0.5" y="0.5" width="95" height="27" fill="none" stroke="silver" stroke-width="1" rx="3" ry="3"></rect>
Is there a way to remove this stroke using Highcharts? Any help is appreciated!
If you want to remove border from displayed dataLabel, you can use dataLabels.borderWidth parameter from Highcharts API:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.borderWidth
plotOptions: {
series: {
dataLabels: {
borderWidth: 0
}
}
},
Here you can see an example how it can work:
http://jsfiddle.net/74eqcqso/1/
Related
I try to disable tooltip for gauge but no matter what I do, it doesn't work.
I tried to place:
tooltip: {
enabled: false
}
under chart, pane, series ...
Here is a demo I use: Fiddle
and this is a code:
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
tooltip: {
enabled: false
}
},
exporting: {enabled: false},
title: {
text: 'meetings',
//align: 'bottom'
verticalAlign: 'bottom',
y: 10,
style: {
fontWeight: 'bold',
fontSize:'18px'
}
},
pane: {
tooltip: {
enabled: false
},
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: {
tooltip: {
enabled: false
},
min: 0,
max: max,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 0,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 0,
tickWidth: 0,
tickPosition: 'inside',
tickLength: 0,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: '',
y: 150,
style: {
fontWeight: 'bold',
fontSize:'18px'
}
},
plotBands: [{
from: 0,
to: color_threshold_values[0],
color: '#DA2626'
}, {
from: color_threshold_values[0],
to: color_threshold_values[1],
color: '#F19E26'
}, {
from: color_threshold_values[1],
to: color_threshold_max,
color: '#88A61F'
}]
},
series: [{
name: 'Count',
data: [data.count],
dataLabels: {
enabled:false,
borderColor: 'red',
borderWidth: 0,
padding: 5,
shadow: true,
style: {
fontWeight: 'bold',
fontSize:'25px'
}
},
}]
});
Any ideas?
Try adding it to the config object itslef?
http://jsfiddle.net/hesonazx/
$('#container').highcharts({
tooltip: {
enabled: false
},
chart: {
...
});
This is based on the documentation. Notice that the toottip property for a guage type chart doesn't have an enabled option. The general tooltip property does however.
You can just add .highcharts-tooltip{opacity: 0;}
See fiddle http://jsfiddle.net/DIRTY_SMITH/dpyy732d/2/
Im looking to have a set min and max (0-200) and to cap the gauge line at the 200. The data could be over 200, but the line on the gauge would still need to cap at 200.
Is there a parameter to do this?
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: 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: [555],
tooltip: {
valueSuffix: ' km/h'
}
}]
You can use plotOptions.gauge.wrap: false to prevent wrapping around.
The API description:
wrap: Boolean
When this option is true, the dial will wrap around the axes. For instance, in a full-range gauge going from 0 to 360, a value of 400 will point to 40. When wrap is false, the dial stops at 360. Defaults to true.
Example usage (JSFiddle):
plotOptions: {
gauge: {
wrap: false
}
}
I am using highcharts speed o meter with PHP and MYSQL. It is working fine but the problem is that when I merge the JavaScript in my website, the speed o meter is not displaying. It does not appear any error, just blank screen where the speed o meter code is used. Here is my code:
$(function () {
$('#containers').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: ''
},
pane: {
startAngle: -90,
endAngle: 90,
center: ['50%', '100%'],
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: 'Speed 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: [<?php echo join($result, ',') ?>],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
}
});
});
I don't know what is problem if any one knows please tell me.
The only thing i see is that you forgot a semi-colon:
<?php echo join($result, ',') ?>
Change to
<?php echo join($result, ','); ?>
Otherwise try the console-debugger for the javascript-part.
Could someone please assist me on modifying the code from HighCharts Angular Gauge demo to load data from a comma-separated values file?
The comma-separated values column should be specifiable. i.e: data[0], data[1], data[2]
$(function () {
$('#container').highcharts({
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: 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) {
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);
}
});
});
An Example of comma-separated values data being loaded into Highcharts Demo - Ajax loaded data, clickable points.
$(function () {
// Register a parser for the American date format used by Google
Highcharts.Data.prototype.dateFormats['m/d/Y'] = {
regex: '^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{2})$',
parser: function (match) {
return Date.UTC(+('20' + match[3]), match[1] - 1, +match[2]);
}
};
// Get the CSV and create the chart
$.get('/samples/highcharts/demo/line-ajax/analytics.csv', function (csv) {
$('#container').highcharts({
data: {
csv: csv
},
title: {
text: 'Daily visits at www.highcharts.com'
},
subtitle: {
text: 'Source: Google Analytics'
},
xAxis: {
type: 'datetime',
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
this.y +' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: 'All visits',
lineWidth: 4,
marker: {
radius: 4
}
}, {
name: 'New visitors'
}]
});
});
});
Many Thanks,
First of all I see that you have empty series.data which doesn't exists. In case when you download data by ajax, you push your data to series or use i.e setData() / addPoint() functions. All of them are documented here: http://api.highcharts.com/highcharts
I advice to familiar with article about preprocessing data http://docs.highcharts.com/#preprocessing
I am trying to make a Gauge chart.
The chart is displaying 80 but live data is not working.
I use the following code:
$(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() {
$(function() {
$.getJSON("livedata.php", function(data) {
$.each(data, function(key, val) {
if (key == 'Gas')
{
newVal = val;
var point = chart.series[0].points[0];
point.update(newVal);
}
});
});
}, "json");
}, 3000);
})
});
my simple test livedata.php is as follow:
// Set the JSON header
header("Content-type: text/json");
// The y value is a random number
$x = "Gas";
$y = rand(10, 100);
// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret, JSON_NUMERIC_CHECK);
Can anybody tell me what is going wrong?
How can I test that the function is called?
How can I test that the livedata has passed?