从Thingspeak检索数据并在FusionChart角规中显示

时间:2019-07-16 09:14:09

标签: javascript fusioncharts

我正在使用ThingSpeak API检索数据。我想在融合图中显示数据。如何在图表中显示动态数据?当我在JS bin中编译此代码时,它将引发以下错误:

  

SyntaxError:输入意外结束       在https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:13924       在https://static.jsbin.com/js/prod/runner-4.1.7.min.js:1:10866

  <!DOCTYPE html>
  <html>
 <head>
<meta charset="utf-8">
<meta name="theme-color" content="#0084ff">
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js'></script>
<!-- Step 1 - Include the fusioncharts core library -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<!-- Step 2 - Include the fusion theme -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>

         <div id="chart-container">FusionCharts will render here</div>
            <script>
          FusionCharts.ready(function () {
         LoadChart();
        });

        function LoadChart() {

        {
        var url = 'https://api.thingspeak.com/channels/812218/feeds.json? 
        key=3WOJGGLAAMDTROT2&results=1';
       $.ajax({
        url: url,
        type: 'GET',
        //contentType: "application/json",
         dataType: "json",
        crossDomain: true,
        success: function (data, textStatus, xhr) {
       $.each(data, function (i, item) {
       if (i == 'feeds') {
          var ubound = item.length;
       $('#txtField1').val(item[ubound - 1].field1);
        console.log('txtField1')

    var p = 'txtField1';
    var phfusioncharts = new FusionCharts({
      type: 'angulargauge',
      renderAt: 'chart-container',
      width: '450',
      height: '300',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "caption": "Speed ",
         "subCaption" : "RPM",
          "lowerLimit": "0",
          "upperLimit": "10000",
          "showValue": "1",
          "valueBelowPivot": "p",
          "theme": "fusion"
        },
        "colorRange": {
          "color": [{
            "minValue": "0",
            "maxValue": "2000",
            "code": "#6baa01"
          }, {
            "minValue": "2000",
            "maxValue": "5000",
            "code": "#f8bd19"
          }, {
            "minValue": "5000",
            "maxValue": "10000",
            "code": "#e44a00"
          }]
        },
        "dials": {
          "dial": [{
            "value": "p"
          }]
           }
           }
          });

           phfusioncharts.render();
           //}
           }
          });
          }
                  </script>
               </head>
               </html>

0 个答案:

没有答案