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" ></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>'
                }
              }]

            }));

    });
});

CodePudding user response：

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);
});

CodePudding user response：

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/