2015-04-27 9 views
4

Я получаю данные json из rest api, и я хочу использовать его в качестве входных данных для ZingFeed.Zing Feed получить данные из rest api

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="ISO-8859-1"> 
    <title>Insert title here</title> 
    <script src='http://cdn.zingchart.com/zingchart.min.js'></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
</head> 

<body> 
    <script> 
    function getNewData() 
    { 
     $.ajax({ 
      type: "GET", 
      dataType: "json", 
      headers: { 
       Accept:"application/json", 
       "Access-Control-Allow-Origin": "*" 
      }, 
      url: "/PerformanceMonitor/showProcessUsage/chrome", 
      success: function(data){ 
       var mem = data.mem.size/10000; 
       return mem/10000; 
       //$("#processInfo").append(data.mem.size); 
       //$("#processInfo").append(" ") 

      } 
     }); 
     //return parseInt(memSize); 
    } 

    var chartData = { 
     "type":"line", 
     "refresh": { 
      "type": "feed", 
      "transport": "js", 
      "url": "feed()", 
      "interval": 200 
     }, 
     "series":[ 
      { 
       "values":[] 
      } 
     ] 
    }; 


    window.onload = function() { 
     zingchart.render({ 
      id: "chartDiv", 
      data: chartData, 
      height: 600, 
      width: "100%" 
     }); 
    }; 

    window.feed = function(callback) { 
     var tick = {}; 
     // tick.plot0 = parseInt(10 + 900 * Math.random(), 10); 
     tick.plot0 = parseInt(getNewData()); 
     //tick.plot0 = parseInt(1); 
     callback(JSON.stringify(tick)); 
    }; 
    </script> 
    <div id="processInfo"></div> 
    <div id='chartDiv'></div> 

</body> 

</html> 

Это работает хорошо, когда видели в данных firebug.The (т.е. мем в этом случае действительно огромный, поэтому я разделил его дважды, прежде чем присваивать его tick.plot0). После получения присвоенного tick.plot0 .. он показывает Nan, когда он зависает в инструментах разработчика. Не могли бы вы помочь мне черчения эти огромные значения в ZingFeed Графики

Заранее спасибо

ответ

8

Вопрос здесь является характер асинхронных функций в JavaScript. Возврат данных из AJAX не работает так, как вы пытались сделать выше. You can read more about it here.

Это рабочее решение.

Я работаю над командой ZingChart. Дайте мне знать, если у вас есть другие вопросы о библиотеке ZingChart.

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="ISO-8859-1"> 
    <title>Insert title here</title> 
    <script src='http://cdn.zingchart.com/zingchart.min.js'></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
</head> 

<body> 
    <script> 
    var chartData = { 
     "type":"line", 
     "refresh": { 
      "type": "feed", 
      "transport": "js", 
      "url": "feed()", 
      "interval": 200 
     }, 
     "series":[ 
      { 
       "values":[] 
      } 
     ] 
    }; 

    window.onload = function() { 
     zingchart.render({ 
      id: "chartDiv", 
      data: chartData, 
      height: 600, 
      width: "100%" 
     }); 
    }; 

    window.feed = function(callback) { 
     $.ajax({ 
      type: "GET", 
      dataType: "json", 
      headers: { 
       Accept: "application/json", 
       "Access-Control-Allow-Origin": "*" 
      }, 
      url: "/PerformanceMonitor/showProcessUsage/chrome", 
      success: function (data) { 
       var mem = data.mem.size/10000; 
       var tick = { 
        plot0: parseInt(mem) 
       }; 
       callback(JSON.stringify(tick)); 
      } 
     }); 
    }; 
    </script> 
    <div id="processInfo"></div> 
    <div id='chartDiv'></div> 

</body> 

+0

Эй я пытаюсь построить несколько серий я выше ZingFeed.I размещен новый вопрос относительно того же. Не могли бы вы взглянуть на это. http://stackoverflow.com/questions/30028870/zing-feed-plotting-multiple-series-in-1-chart Спасибо :) –

 Смежные вопросы

  • Нет связанных вопросов^_^