Angular Gauge with data from Google spreadsheet

[Oulsen]

Hi all!

First of all, thanks for any help

I want to get data from a single cell in a google spreadsheet (a number) to give the data (number) back to the fusion angular chart, looking like this:

 

Spreadsheet:

I cant get it to work, but the code below works fine with like a column2d or what not. Any ideas?

 

Code im using:

</script>
    
    
    <script>var spreadsheetId = "1H1LaQjfAyX2uOI52TqKXvVtX8mueQ7fTOCfIe87FOfE",
    url = "https://spreadsheets.google.com/feeds/list/" +
          spreadsheetId +
          "/od6/public/basic?alt=json";

$.get({
  url: url,
  success: function(response) {
    var data = response.feed.entry,
      len = data.length,
      i = 0,
      parsedData = [];

    for (i = 0; i < len; i++) {
      parsedData.push({
        value: data.content.$t.replace('nps: ', '')
      });
    }

    FusionCharts.ready(function() {
      var chart = new FusionCharts({
          type: 'angulargauge',
          renderAt: 'nps',
          width: '100%',
          height: '50%',
          dataFormat: 'json',
          dataSource: {
            "chart": {
        "caption": "NPS",
    "lowerlimit": "0",
    "upperlimit": "50",
    "showvalue": "1",
    "theme": "fusion",
    "showtooltip": "0",
    "bgcolor": "#ffffff",
                "baseFont": "MMTextPro",
                animation : "1",
                animationDuration : "3",
                "captionFontSize": "60",
                "labelFontSize": "30",
                "valueFontSize": "80",
                  },
                "colorrange": {
    "color": [
      {
        "minvalue": "0",
        "maxvalue": "20",
        "code": "#F2726F"
      },
      {
        "minvalue": "20",
        "maxvalue": "30",
        "code": "#FFC533"
      },
      {
        "minvalue": "30",
        "maxvalue": "50",
        "code": "#62B58F"
      }
    ]
            },
              
"dials": {
    "dial": [
      {
        "value": parsedData
          
      }
    ]
  }
              
          }
        })
        .render();
    });
  }
});</script>

 

Edited November 13, 2018 by Oulsen

[Akash Biswas]

Hi,

 

The shared code works for bar, column or line charts as they are single-series charts, but the same code will not work for Angular Gauge type as the dataSource structure of FusionCharts Angular gauge is different from that of a bar or line chart.

So, you need to modify the sample : https://codepen.io/SitePoint/pen/rxorZd?editors=1010 so that the get() method generates the data complying the prescribed format of the Angular gauge.

 

Refer to the documentation for the structure of the Angular gauge JSON dataSource : https://www.fusioncharts.com/dev/chart-guide/gauges-and-widgets/angular-gauge

Check the documentation and the modified sample for reference and implement accordingly : https://codepen.io/anon/pen/xQdLpv?editors=0010

 

Thanks,

Akash.

 

 

[Oulsen]

Thanks alot for the info

Helped me alot.

 

1 more question, on  https://codepen.io/anon/pen/xQdLpv?editors=0010  "showvalue": "1", is on 1 but there is no number below or at the dial. How do i fix this

Edited November 16, 2018 by Oulsen

[Akash Biswas]

Hi,

 

Glad to know that the solution was helpful.

 

Regarding the value not displaying on the chart,  please set the attribute "valueFontSize" to a lesser value than it is currently in the shared fiddle. Like : "valueFontSize": "38".

Find a modified sample : https://codepen.io/anon/pen/EOwojv?editors=0010

 

Thanks,

Akash.