與阿賈克斯的JSON數據創建highchart

我試圖創建使用MySQL數據頁面的簡單的圖表使用的MySQL腳本與阿賈克斯的JSON數據創建highchart

檢索到的我不知道如何使用最適合需要的數據Ajax調用整合圖表。我不太瞭解各種圖表插件，以使我的生活變得輕鬆，並且正在試用高圖。

我的PHP腳本返回以下JSON：

[{"name":"golfers"},{"data":[5.7879,6.6286,6.1724,5.3125,7.1481,6.1333,4.5769]}]

我的圖表腳本是：

$(function() { 

visitorData(function(data) { 
    console.info(data); 
    $('#chart1').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Average Visitors' 
     }, 
     xAxis: { 
      categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] 
     }, 
     yAxis: { 
      title: { 
       text: 'Number of visitors' 
      } 
     }, 
     series: data, 
    }); 
}); 
});

我的功能，使Ajax調用：

$.ajax({ 
     url: '/visitdata', 
     type: 'GET', 
     async: true, 
     dataType: "json", 
     success: function (data) { 
      console.warn(data); 
      return data; 

     } 
    });

但此刻什麼都沒有顯示。

我不確定如何有效地進行ajax調用並將其集成到圖表函數中。我決定根據先前的嘗試和帖子進行回調，以確保在創建圖表之前返回數據 - 這是否正確？

我不是100％確定JSON數據被正確地構造

我不知道I;已經施加的數據變量到串聯正確

基本上 - 需要在此，所以我的教程可以得到它的工作和實驗

所有幫助表示讚賞

感謝

來源

2013-10-07 Ray

我認爲你不能從SUC返回值cess調用，而不是你需要調用一個函數。因此，建立你的函數初始化圖表，並在阿賈克斯成功的呼叫與數據

與您的代碼示例函數

function visitorData (data) { 
    $('#chart1').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Average Visitors' 
    }, 
    xAxis: { 
     categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] 
    }, 
    yAxis: { 
     title: { 
      text: 'Number of visitors' 
     } 
    }, 
    series: data, 
    }); 
} 
$(document).ready(function() { 
$.ajax({ 
    url: '/visitdata', 
    type: 'GET', 
    async: true, 
    dataType: "json", 
    success: function (data) { 
     visitorData(data); 
    } 
    }); 
});

來源

2013-10-07 22:58:01 ryuutatsuo

感謝 - 這得到它的工作 – Ray

我怎麼能實現這一點：如果我要怎麼建立實時的，由多個Ajax調用更新圖表？ – Kishan

在你的ajax成功函數調用數據的visitorData功能[1] .data（因爲這就是你的json格式化）

$.ajax({ 
     url: '/visitdata', 
     type: 'GET', 
     async: true, 
     dataType: "json", 
     success: function (data) { 
      visitorData(data[1].data); 

     } 
    });

另外，你的visitorData函數def單數。

vistorData = function(data)

或

function vistorData(data)

來源

2013-10-07 23:00:23

我認爲@ryuutatsuo答案是正確的 - 在你的情況下，創建圖表時作者需要更改結構。 –

謝謝。這是第一次嘗試使用ajax進行回調，但沒有確定正確的方法。你的回答很有幫助 – Ray

-1

//parse json response 
var chartSeriesData = []; 
var chartCategory = []; 

$.each(response, function() { 

    if(this.name!="TOTAL" && this.no!="0") { 

    var series_name = this.name; 
    var series_data = this.no; 

    var series = [ 
     series_name, 
     parseFloat(series_data) 
    ]; 
    chartSeriesData.push(series); 
    } 
}); 

//initialize options for highchart 
var options = { 
    chart: { 
    plotBackgroundColor: null, 
    plotBorderWidth: null, 
    plotShadow: false 
    }, 
    title: { 
    text: 'SalesOrder ' 
    }, 
    tooltip: { 
    pointFormat: '{series.name}: <b>{point.y}</b>' 
    }, 
    plotOptions: { 
    pie: { 
     allowPointSelect: true, 
     cursor: 'pointer', 
     center:['60%','60%'], 
     size:150 
     , 
     dataLabels: { 
     enabled: true, 
     color: '#000000', 
     distance: 40, 
     connectorColor: '#000000', 
     format: '<b>{point.name}</b>: {point.y} ' 
     } 
    } 
    }, 
    series: [{ 
    type: 'pie', 
    name: 'Browser share', 
    data:chartSeriesData //load array created from json 
    }] 
} 

//options.series[0].setData(datavaluejson); 
var chart= $('#container').highcharts(options);

來源

2014-01-22 14:48:43 Lem

與阿賈克斯的JSON數據創建highchart

回答

相關問題