Solid Gauge Highcharts data Spreadsheets - highcharts

Question

I'm having problems in the integration of Solid Gauge in Highcharts with Google Sheets. I manage lines, bars and others, but this could not pull data.
Has anyone done something like that in Highcharts?
..............................................................................................................................................................
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
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: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'Speed'
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [80],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
// The RPM gauge
$('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 5,
title: {
text: 'RPM'
}
},
series: [{
name: 'RPM',
data: [1],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
'<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
},
tooltip: {
valueSuffix: ' revolutions/min'
}
}]
}));
// Bring life to the dials
setInterval(function () {
// Speed
var chart = $('#container-speed').highcharts(),
point,
newVal,
inc;
if (chart) {
point = chart.series[0].points[0];
inc = Math.round((Math.random() - 0.5) * 100);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}
// RPM
chart = $('#container-rpm').highcharts();
if (chart) {
point = chart.series[0].points[0];
inc = Math.random() - 0.5;
newVal = point.y + inc;
if (newVal < 0 || newVal > 5) {
newVal = point.y - inc;
}
point.update(newVal);
}
}, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.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/solid-gauge.js"></script>
<div style="width: 600px; height: 400px; margin: 0 auto">
<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
</div>

Answer 1

Looks like possibly bug, reported here: https://github.com/highslide-software/highcharts.com/issues/4427

Answer 2

Work, but, i use JS from Highchart cloud.
function parseData(completeHandler, chartOptions) {
try {
var dataOptions = {
"googleSpreadsheetWorksheet": "3",
"endColumn": null,
"seriesMapping": [
{
"x": 0
}
],
"googleSpreadsheetKey": "1u0vGMYJM-iAP04NMARJuB875Y3xOj8gDGPbfzEf1FL8",
"startRow": null,
"startColumn": null,
"endRow": null
};
dataOptions.sort = true
dataOptions.complete = completeHandler;
Highcharts.data(dataOptions, chartOptions);
} catch (error) {
console.log(error);
completeHandler(undefined);
}
}
var template = {
chart: {
renderTo: 'container'
},
navigation: {
menuItemStyle: {
fontFamily: Highcharts.SVGRenderer.prototype.getStyle().fontFamily,
padding: '2px 10px'
}
},
};
var chartOptions = {
"plotOptions": {
"solidgauge": {
"dataLabels": {
"useHTML": true,
"borderWidth": 0,
"y": 10
}
}
},
"yAxis": {
"tickPixelInterval": 50,
"tickWidth": 0,
"minorTickInterval": null,
"min": 0,
"max": 16,
"stops": [
[
0.1,
"#55BF3B"
],
[
0.5,
"#DDDF0D"
],
[
0.9,
"#DF5353"
]
],
"title": {
"y": -70,
"style": {
"fontSize": 20
},
"text": null
},
"lineWidth": 0,
"labels": {
"y": 16
}
},
"xAxis": {
"labels": {
"format": null
}
},
"credits": {
"enabled": false
},
"series": [
{
"dataLabels": {
"format": "\u003cdiv style\u003d\"text-align:center\"\u003e\u003cspan style\u003d\"font-size:25px;color:#000000\"\u003e{y}\u003c/span\u003e\u003c/div\u003e"
},
"index": 0
}
],
"subtitle": {
"text": null
},
"tooltip": {
"enabled": false
},
"title": {
"text": "METAS MÊS"
},
"pane": {
"startAngle": "-90",
"size": "140%",
"background": {
"backgroundColor": "#EEE",
"innerRadius": "60%",
"outerRadius": "100%",
"shape": "arc"
},
"center": [
"50%",
"85%"
],
"endAngle": "90"
},
"chart": {
"type": "solidgauge"
}
};
parseData(function (dataOptions) {
// Merge series configs
if (chartOptions.series && dataOptions) {
Highcharts.each(chartOptions.series, function (series, i) {
chartOptions.series[i] = Highcharts.merge(series, dataOptions.series[i]);
});
}
var options = Highcharts.merge(dataOptions, chartOptions, template);
var chart = new Highcharts['Chart'](options);
}, chartOptions);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://akasicuro.com/plataforma/highstock-cloud.js"></script>
<div id="container" style="width:100%; height:100%;max-width:1000px;margin: 0 auto"></div>