Angular Gauge with data from Google spreadsheet

Recommended Posts

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:





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>var spreadsheetId = "1H1LaQjfAyX2uOI52TqKXvVtX8mueQ7fTOCfIe87FOfE",
    url = "https://spreadsheets.google.com/feeds/list/" +
          spreadsheetId +

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

    for (i = 0; i < len; i++) {
        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


Edited by Oulsen

Share this post

Link to post
Share on other sites



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






Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now