Develop Reference

trying to output the json value in Highcharts

Using value, value_classification, and timestamp values in json data
I am trying to print as a solid gauge of Highcharts.
The values in series data are inserted as blank values.
What's the problem?
{
"name": "Fear and Greed Index",
"data": [
{
"value": "27",
"value_classification": "Fear",
"timestamp": "21-12-2021",
"time_until_update": "-1639979045"
}
],
"metadata": {
"error": null
}
}
Using that value,
I am trying to complete the solid gauge of Highcharts.
Highcharts Demos › Solid gauge
https://www.highcharts.com/demo/gauge-solid
The code I've tried so far is below.
HTML
<div id="container-speed" class="chart-container"></div>
JAVASCRIPT
$(function () {
var processedData = [];
$.getJSON("https://api.alternative.me/fng/?date_format=en", function (json) {
for (i = 1; i > json.length; i++){
processedData.push(json[i].value);
}
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
tickWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'test'
}
},
credits: {
enabled: false
},
series: [{
name: 'test',
data: processedData,
dataLabels: {
format:
'<div style="text-align:center">' +
'<span style="font-size:25px">{y}</span><br/>' +
'<span style="font-size:12px;opacity:0.4">km/h</span>' +
'</div>'
}
}]
}));
});
});

Hint: Check if processedData outputs something.
Mistake: Looping over json data is incorrect as the response is an object and not an array.
Create an IIFE and verify the first part then move ahead with chart creation.
eg.
$(function () {
var processedData = [];
$.getJSON("https://api.alternative.me/fng/?date_format=en", function (json) {
// wrong
for (i = 1; i > json.length; i++){
processedData.push(json[i].value);
}
});
console.log(processedData);
});

I reproduce your code and receive the data using this approach:
fetch("https://api.alternative.me/fng/?date_format=en")
.then(response => response.json())
.then(output => {
const chartData = output.data.map(d => parseFloat(d.value))
Demo: https://jsfiddle.net/BlackLabel/s1fczwj0/

Add class to the title to change the color according to the data value of gauge highcharts

Can we add class or change color of the title according to the from and to color values in gauge highcharts
I am working on the following code:
$('#container').highcharts({
chart: {
type: 'gauge',
borderWidth: 0,
},
title: {
useHTML: true,
verticalAlign: 'middle',
floating: false,
text: '<div style="text-align:center"><span class="gauge-count">80</span><span class="gauge-category-title">mg/L</span></div>'
},
pane: {
startAngle: -160,
endAngle: 160,
background: null
},
// the value axis
yAxis: {
min: 0,
max: 100,
minorTickPosition: 'inside',
minorTickColor: 'transparent',
tickPosition: 'inside',
tickColor: 'transparent',
labels: {
enabled: false
},
plotBands: [{
from: 0,
to: 30,
className: 'red-band'
}, {
from: 30,
to: 60,
className: 'yellow-band'
}, {
from: 60,
to: 100,
className: 'green-band'
}]
},
plotOptions: {
gauge: {
dataLabels: {
formatter: function() {
return null;
},
y: 80,
borderWidth: 0,
useHTML: false
},
}
},
series: [{
name: 'Speed',
data: [80]
}]
}, );
Live example: https://codepen.io/qadeershaikh/pen/MRmJwP?editors=0010

To dynamically set the chart's title color, you can use css method for SVG elements, for example in render event function:
chart: {
type: 'gauge',
borderWidth: 0,
events: {
render: function() {
var value = this.series[0].yData[0],
color;
if (value < 30) {
color = '#DF5353';
} else if (value < 60) {
color = '#DDDF0D';
} else {
color = '#55BF3B';
}
this.title.css({
color: color
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/fj7mLrxa/
API Reference:
https://api.highcharts.com/highcharts/chart.events.render
https://api.highcharts.com/class-reference/Highcharts.SVGElement#css

Draggable Jquery Meter

I have just started to learn Javascript and Jquery. I have been able to create a simple meter which shows random generated values. I am trying to make this meter draggable.
Here is my project.
https://jsfiddle.net/apoorvasomani/aLnvvn00/
Javascript Code -
<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>
HTML -
$(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'
}
}]
}));
// 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);
}
}, 2000);
});
I have searched google and most of them tell how to make an html element draggable and not something made using jquery draggable. Please help me here understand what needs to be done.

HighCharts JS Ajax Data Guage

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

Can't force HighCharts Speedometer to Zero

I'm working on using the highcharts speedometer. I'm basically faking a connection meter. If there is a good connection, then the meter will tick between 30 and 100. If the connection comes back anything (Ajax call) other than 4 & 200, it is supposed to drop to zero. I have the call going through...when the server is up, all is well. When I turn off Apache, it doesn't go to zero. I've tested a couple of sceanrios on the function (chart) to see if it was something simple (which I'm sure it still is I'm just not seeing it). Nothing has worked. I've dropped the chart point to 0. But it still won't go to zero. Any suggestions? Please God I hope so. I'd love to wrap this up tomorrow then I can actually use it for work after some tweaking.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<title>Sales Meter</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
var flag;
var xmlhttp;
var url="http://192.168.0.5/ajax_info.txt"+'?_dc='+(new Date()).getTime();
//ajax call
function loadXMLDoc(url, cfunc){
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url, true);
xmlhttp.send();
}
function myFunction(){
loadXMLDoc(url, function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
flag = 1;
}
});
}
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Sales-O-Meter'
},
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: 2.5,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 15,
tickWidth: 1,
tickPosition: 'inside',
tickLength: 5,
tickColor: '#666',
labels: {
step: 5,
rotation: 'auto'
},
title: {
text: 'sales/min'
},
plotBands: [{
from: 0,
to: 10,
color: '#DF5353' // green
}, {
from: 10,
to: 20,
color: '#DDDF0D' // yellow
}, {
from:20,
to: 100,
color: '#55BF3B' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' sales/sec'
}
}]
},
// Add some life
function (chart) {
flag = 0;
myFunction();
setInterval(function () {
if(flag==1){
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - .5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 100) {
newVal = point.y - inc;
}
point.update(newVal);
}
else{
var point = chart.series[0].points[0],
newVal = 0,
inc = 0;
point.update(newVal);
}
}, 1000);
});
});
</script>
</head>
<body>
<script src="highcharts.js"></script>
<script src="highcharts-more.js"></script>
<!--<script src="exporting.js"></script>-->
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
</body>
</html>

It looks like you need to call my function inside your SETI thermal function as it need to be called to set the flag.
function (chart) {
flag = 0;
setInterval(function () {
myFunction();
if(flag==1){