Oulsen

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:

FUSION1.PNG.2fe9d7b3559a6e01bbacbf6be36f733b.PNG

 

Spreadsheet:

5beb419446657_Fusion2.PNG.3da402fae0472cd16df4fbe751fb93a2.PNG

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 by Oulsen

Share this post


Link to post
Share on other sites

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.

 

 

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