1

I'm retrieving data using ThingSpeak API. I want to show data in fusion chart. How to show dynamic data in the charts? This code working for other 3rd party APIs but not with this API.

sample data:

172.70

API:

https://api.thingspeak.com/channels/23037xxx/fields/field1/last?api_key=EG628M4J9SP76xxx

<script>
  FusionCharts.ready(function() {
    LoadChart();
  });

  function LoadChart() {
    $.ajax({
      url: 'https://api.thingspeak.com/channels/230xxx/fields/field1/last?api_key=EG628M4J9SP76xxx', // local address
      type: 'GET',
      crossDomain: true,
      success: function(data) {
        if (data.success) {
          var chlorine = data;
          var phfusioncharts = new FusionCharts({
            type: 'angulargauge',
            renderAt: 'ph-container',
            width: '450',
            height: '300',
            dataFormat: 'json',
            dataSource: {
              "chart": {
                "caption": "Chlorine ",
                "lowerLimit": "0",
                "upperLimit": "14",
                "showValue": "1",
                "valueBelowPivot": "1",
                "theme": "fint"
              },
              "colorRange": {
                "color": [{
                  "minValue": "0",
                  "maxValue": "5",
                  "code": "#6baa01"
                }, {
                  "minValue": "5",
                  "maxValue": "10",
                  "code": "#f8bd19"
                }, {
                  "minValue": "10",
                  "maxValue": "14",
                  "code": "#e44a00"
                }]
              },
              "dials": {
                "dial": [{
                  "value": chlorine
                }]
              }
            }
          });

          phfusioncharts.render();
        }
      }
    });
  }
</script>
</head>
<body>
  <table class="">
    <tr>
      <td>
        <div id="ph-container" style="float:left;"></div>
      </td>
    </tr>
  </table>
Rick
  • 4,030
  • 9
  • 24
  • 35
Swapna
  • 403
  • 3
  • 6
  • 24
  • Could you be more specific on "_this code is not working_" ? What error do you get? Please edit your question and add further information. – Lucky Feb 22 '17 at 13:26
  • im not getting any error from console.its not showing any charts. – Swapna Feb 22 '17 at 13:26
  • Please recreate your code in jsfiddle.net and post the link here. – Lucky Feb 22 '17 at 13:29
  • You just copy pasted the code in jsfiddle and didn't create a runnable demo. Please create a full demo in future while posting your questions. – Lucky Feb 22 '17 at 13:47

1 Answers1

1

You don't need to check if data.success. Your api responds with only a float value. So data.success is undefined. It never enters the if condition.

Check the demo : http://jsfiddle.net/x5FBh/1201/

JS:

FusionCharts.ready(function () {
  LoadChart();
});

function LoadChart() {
  $.ajax({
    url: 'https://api.thingspeak.com/channels/230372/fields/field1/last?api_key=EG628M4J9SP769UT', // local address
    type: 'GET',
    crossDomain: true,
    success: function (data) {
        console.log('xhr success')
      //if (data.success) {
        console.log("success");
        var chlorine = data;
        var phfusioncharts = new FusionCharts({
          type: 'angulargauge',
          renderAt: 'ph-container',
          width: '450',
          height: '300',
          dataFormat: 'json',
          dataSource: {
            "chart": {
              "caption": "Chlorine ",
              "lowerLimit": "0",
              "upperLimit": "14",
              "showValue": "1",
              "valueBelowPivot": "1",
              "theme": "fint"
            },
            "colorRange": {
              "color": [{
                "minValue": "0",
                "maxValue": "5",
                "code": "#6baa01"
              }, {
                "minValue": "5",
                "maxValue": "10",
                "code": "#f8bd19"
              }, {
                "minValue": "10",
                "maxValue": "14",
                "code": "#e44a00"
              }]
            },
            "dials": {
              "dial": [{
                "value": "22"
              }]
            }
          }
        });

        phfusioncharts.render();
      //}
    }
  });
}
Lucky
  • 16,787
  • 19
  • 117
  • 151
  • can u please tell me how to refresh chart in every 30 secs – Swapna Feb 22 '17 at 13:49
  • You're welcome. You just need to use `setInterval()` method in javascript and call the `LoadChart()` method every `n` seconds. Please see here, http://stackoverflow.com/questions/21638574/run-a-function-every-30-seconds-javascript It goes like, `setInterval(function(){ LoadChart()}, 30000)` Don't forget to check the tick mark on the left of my answer to accept it. – Lucky Feb 22 '17 at 13:51