Highcharts不生成圖表用於AJX返回

我已經寫從mixpanel以下列格式返回一個JSON對象一個代碼對象：Highcharts不生成圖表用於AJX返回

**{"legend_size": 1, "data": { "series": ["2013-09-25 14:00:00", "2013-09-25 15:00:00", "2013-09-25 16:00:00"], "values": { "Demoevent": {"2013-09-25 20:00:00": 0, "2013-09-25 12:00:00": 44, "2013-09-25 15:00:00": 1, "2013-09-25 01:00:00": 0 }}}}**

的代碼的進程被傳遞此JSON對象到HighCharts方法來動態生成圖表。

這裏是它的原始格式代碼：

<html> 
<head> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js" />  
<script type="text/javascript" src="jquery.md5.js"></script></script> 
<script type="text/javascript" src="mixpanelClient.js"></script></script> 
<script type="text/javascript" src="underscore-min.js"></script></script> 
<script type="text/javascript" src="md5.js"></script></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 

<script> 

$(document).ready(function() { 

    var eventToDisplay = "acall finished"; 
    var apiKey = "BigSecret1"; 
    var apiSecret = "BigSEcret2"; 

    var mpEvent = { 
    'event': [eventToDisplay, ], 
    'type': 'general', 
    'unit': 'hour', 
    } 

var mpClient = MixpanelClient(apiKey, apiSecret); 
var requestUrl = mpClient.getRequestUrl(['events'], mpEvent); 
console.log("The RequestUrl is:", requestUrl); 

var JsonData=null; 


var options = { 

chart: { 
     renderTo: 'container', 
     type: 'column' 
     }, 
     title:{ 
     text: 'Total Calls Finished' 
     }, 
     xAxis: { 
     type: 'datetime', 
     title: { 
     text: "Date" 
     }, 
    }, 
     yAxis: { 
     title:{ 
      text: 'Count of Calls', 
      }, 
      }, 

      series:[] 
     }; 



$.ajax({ 

type:"GET", 
url: requestUrl, 
//The request url returns a JSON object.I have checked it on the console.Attached the screenshot too. 

success: function(data) { 

    JsonData=data; 

    **options.series[0].data.values = JsonData.data.values["acall finished"]; 
    var chart = new Highcharts.Chart(options);** 
    alert("Chart Created"); 

}, 

    error: function(jqXHR, textStatus, errorThrown) { 
    alert(jqXHR.status); 
}, 

dataType: "jsonp" 

}); 
}); 

</script> 
</head> 
<body> 
<div id="container"></div> 
</body> 
</html>

現在，這裏是清楚地表明我的控制檯上的JSON對象控制檯的屏幕截圖。

Console screenshot

的問題是，我得到一個空白圖表。沒有列，沒有。 KINDLY幫助。我對HighCharts很新穎。

感謝 Kavish

來源

2013-09-25 Kavish Ahuja

您追加到HighChart的數據在哪裏？有數據選項，請檢查一下。您尚未提供任何數據選項。 –

數據選項在哪裏？我沒有遇到任何。並感謝您的及時回覆。 –

我在選擇方法試過這種過於：系列：[{ \t \t \t \t \t \t名稱： '呼叫數量'，數據：[] \t \t \t}]， –

檢查fiddle。在ajax的成功函數中，調用下面的函數。我認爲這會幫助你。

function buildChart(data){ 
    var seriesOptions = [], 
     yAxisOptions = [], 
     seriesCounter = 0, 
     colors = Highcharts.getOptions().colors; 

     dataLength = data[0].length; 
     var today = data[0][dataLength-1][0]; 
     var namearray = new Array(); 
    for(var i = 0; i < data.length; i++){ 
     var dataarray = new Array(); 
     for(var j = 0; j < data[i].length; j++){ 
      dataarray[j] = new Array(); 
       dataarray[j][0] = data[i][j][0]; //TS 
       dataarray[j][1] = data[i][j][2]; //END VALUE 
       namearray[i] = data[i][j][data[i][j].length-2]; //DESCRIPTION 
     } 

     seriesOptions[i] = { 
      name: namearray[i], 
      data: dataarray 
     }; 

     console.log(seriesOptions); 
     // As we're loading the data asynchronously, we don't know what order it will arrive. So 
     // we keep a counter and create the chart when all the data is loaded. 
     seriesCounter++; 

     if (seriesCounter == data.length) { 
      createChart(); 
     } 

    }; 

    // create the chart when all data is loaded 
    function createChart() { 
     var options = { 
      chart: { 
       renderTo: 'line' 
      }, 

      title: { 
       text: $(".item.selected td").first().text() 
      }, 

      rangeSelector : { 
       buttons: [{ 
        type: 'month', 
        count: 1, 
        text: '1M' 
       }, { 
        type: 'month', 
        count: 6, 
        text: '6M' 
       }, { 
        type: 'year', 
        count: 1, 
        text: '1y' 
       }, { 
        type: 'ytd', 
        text: 'YTD' 
       }, { 
        type: 'all', 
        text: 'All' 
       }], 
       selected : 2 // year 
      }, 
      xAxis: { 
       type: 'datetime' 
      }, 
      series: [{ 
       data: seriesOptions[0].data, 
       type: "area" 


      }] 
     } 

     chart = new Highcharts.Chart(options); 

     $.each(seriesOptions, function (itemNo, item) { 
      chart.addSeries({       
       name: item.name, 
       data: item.data 
      }, false); 

     }); 
     chart.redraw(); 
}; 
}; 

var data = 
[[[1041375600000,28.95,28.95,28.95,28.95,0,"Quote"],[1041462000000,29,29.9,28.6,29.9,27300,"Quote"],[1041548400000,30.5,30,29.8,30.8,27700,"Quote"],[1041807600000,30.8,30.3,28.9,30.8,25600,"Quote"],[1041894000000,30.5,30.1,29.1,30.5,41700,"Quote"],[1041980400000,30.1,28.7,28.4,30.1,33400,"Quote"],[1042066800000,28.37,28.5,27.35,28.9,66900,"Quote"]],[[1041375600000,28.95,28.95,28.95,28.95,0,"series2"],[1041462000000,29,29.9,28.6,29.9,27300,"series2"],[1041548400000,30.5,30,29.8,30.8,27700,"series2"],[1041807600000,30.8,30.3,28.9,30.8,25600,"series2"],[1041894000000,30.5,30.1,29.1,30.5,41700,"series2"],[1041980400000,30.1,28.7,28.4,30.1,33400,"series2"],[1042066800000,28.37,28.5,27.35,28.9,66900,"series2"]]]; 

buildChart(data);

來源

2013-09-25 10:52:42

@Sebastian如何將我的JSON數據轉換爲時間戳？ JSON由mixpanel導出api返回。 –

你可以拆分yoru字符串並使用Date.UTC（） –

它的工作..謝謝大家的幫助！乾杯！ –

Highcharts不生成圖表用於AJX返回

回答

相關問題