HighCharts JS Ajax Data Guage

HighCharts JS Ajax Data Guage - javascript

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

Related

How to make Tick lines around Solid Gauge in Highcharts

I am working on highcharts and so much dependency on it so i cant use other plugins
$(function () {
var gaugeOptions = {
'chart': {
'type': 'solidgauge'
},
'title': null,
'tooltip': {
'enabled': false
},
'pane': {
'center': ['50%', '50%'],
'size': '100px',
'startAngle': 0,
'endAngle': 360,
'background': {
'backgroundColor': '#EEE',
'innerRadius': '90%',
'outerRadius': '100%',
'borderWidth': 0
}
},
'yAxis': {
'min': 0,
'max': 100,
'labels': {
'enabled': false
},
'lineWidth': 0,
'minorTickInterval': null,
'tickPixelInterval': 400,
'tickWidth': 0
},
'plotOptions': {
'solidgauge': {
'innerRadius': '90%'
}
},
'series': [{
'name': 'Speed',
'data': [50],
'dataLabels': {
'enabled': true,
useHTML: true,
format: '<div ><span style="font-size:15px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span>' +
'<span style="font-size:08px;color:Black">%</span> <br/><br/></div>',
borderWidth: 0
}
}]
};
debugger;
$('#Chart2').highcharts(gaugeOptions);
});
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '50%'],
size: '40%',
startAngle: 0,
endAngle: 360,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
enabled: false
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -20,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
$('#sampleChart').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [80],
dataLabels: {
format: '<div ><span style="font-size:15px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span>' +
'<span style="font-size:12px;color:Black">%</span></div>',
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
});
http://jsfiddle.net/mmhukqtz/
this is my chart which i am using i want to give ticks on upper side of circle like this
And Also like this
Thankx For Help

You need to define a seperate pane and axis and set axis offset property to positive value - for the ticks outside the pane - or to negative value - for the ticks inside the pane.
Pane config:
pane: [{
size: '40%',
center: ['50%', '50%'],
background: {
innerRadius: '60%',
outerRadius: '100%'
}
}, {
size: '40%',
background: null
}]
Axis config:
yAxis: [{
min: 0,
max: 200,
tickWidth: 0,
minorTickInterval: null,
labels: {
enabled: false
},
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
]
}, {
linkedTo: 0,
pane: 1,
offset: 20, // offset property controls the distance from the pane
tickInterval: 10,
minorTickInterval: null,
lineWidth: 0,
labels: {
enabled: false
}
}],
Ticks are outside: http://jsfiddle.net/key8v7mn/
Ticks are inside: http://jsfiddle.net/key8v7mn/1/

Try this code in your yAxis:
tickLength: 5,
tickWidth: 4,
tickColor: 'black',
tickPosition: 'outside',
minorTickLength: 0,
tickInterval: 1,
tickInterval does the job.
Updated fiddle:
http://jsfiddle.net/jb242m6o/
tickPosition: "inside" means you will get ticks inside
tickPosition: "outside" means you will get ticks outside

Highcharts Angular gauge - How to remove data label stroke?

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/

High chart (spark line) displaying "Created with High charts 4.0.1 No data to display" instead of display graph?

High chart (spark line) displaying Created with High charts 4.0.1 No data to display instead of display graph?
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
min: 0,
title: {
text: ''
},
categories: ['a','b','c']
},
yAxis: [{
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
title: {
text: ''
},
labels:
{
enabled: false
}
},
{
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
title: {
text: ''
},
labels:
{
enabled: false
}
}],
series: [{
name: ' ',
yAxis: 1,
type: 'spline',
data: [1,2,3],
pointStart: 0
},
{
name: ' ',
yAxis: 1,
type: 'spline',
data: [4,5,6],
pointStart: 0
}],
legend: {
enabled: false,
width: 100,
floating: true,
align: 'left',
x: 0, // = marginLeft - default spacingLeft
itemWidth: 60
},
chart: {
height: 30,
width: 100,
marginBottom: 10
},
tooltip: {
positioner: function () {
return { x: -180, y: -25 };
},
shape: "square",
backgroundColor: '#FCE9CE',
borderWidth: 1,
borderColor: '#F90',
formatter: function () {
var bpValue = [];
var serviceDate;
$.each(this.points, function (i, point) {
bpValue.push('<span>' + point.y + '</span>');
serviceDate = point.x;
});
var content = "<span><b>Service:</b>" + serviceDate
+ "</span><br /><span><b>BP Value :</b></span>";
bpValue = bpValue.join('/');
return content + bpValue;
},
shared: true
}
Sometimes It is not displaying any line or dot. instead of that simply showing alternate text that is Created with Highcharts 4.0.1. What would be the issue? how can resolve this?

Highcharts map gradients to y-axis?

I'm trying to get the gradients to map to my y-axis. I have a min of 90 and a max of 150. I want a yellow gradient from the top down to 120 and I want it to be consistent across browsers. Can I do this? Here's my code:
$('#ao_vs_ppv').highcharts({
chart: {
backgroundColor:
{
linearGradient: [0, 215, 0, 220],
stops: [
[0, 'rgb(255,255,50)'],
[1, 'rgb(255,255,255)']
]
},
type: 'scatter'
},
title: {
text: 'Air Overpressure Vs. Peak Particle Velocity'
},
xAxis: {
min: .010,
max: 10,
type: 'logarithmic',
title: {
text: "Peak Particle Velocuty (in/sec)"
},
labels: {
overflow: 'justify'
},
tickmarkPlacement: 'on',
gridLineWidth: 1
},
yAxis: {
min: 90,
max: 150,
title: {
text: 'Air Overpressure (dBL)'
},
tickInterval:10,
labels: {
overflow: 'justify'
}
},
plotOptions: {
scatter: {
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'AO: {point.y}dBL<br>PPV: {point.x}in/sec'
}
}
},
legend: {
layout: 'horizontal',
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
series:formatHighChartsScatter(data[i]['x_data'],data[i]['y_data'], seismoNames)
});

Change from backgroundColor to plotBackgroundColor, and use object format, not pixel, see: http://jsfiddle.net/92Nw8/1/
$('#ao_vs_ppv').highcharts({
chart: {
plotBackgroundColor: {
linearGradient: {
x1: 0,
x2: 0,
y1: 1,
y2: 0
},
stops: [
[0, 'rgb(255,255,50)'],
[1, 'rgb(255,255,255)']
]
},
type: 'scatter'
}
}

Live data will not load in HighCharts gauge

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?

Develop Reference

JavaScript is the programming language of the Web.

HighCharts JS Ajax Data Guage - javascript

Related

How to make Tick lines around Solid Gauge in Highcharts

Highcharts Angular gauge - How to remove data label stroke?

High chart (spark line) displaying "Created with High charts 4.0.1 No data to display" instead of display graph?

Highcharts map gradients to y-axis?

Live data will not load in HighCharts gauge

Categories

Resources