2013-11-27 30 views
0

我一直在努力實現谷歌的圖表和儀表板,無法使用谷歌圖表

這裏是我的代碼片段創建完整的餅圖,

 <script type="text/javascript"> 

      function drawVisualization(dataArray) { 
       //    function drawVisualization() { 
       // Prepare the data 
       var data = google.visualization.arrayToDataTable(dataArray); 
       // Define a category picker control for the Gender column 
       var categoryPicker = new google.visualization.ControlWrapper({ 
        'controlType': 'CategoryFilter', 
        'containerId': 'control2', 
        'options': { 
         'filterColumnLabel': 'Provider State', 
         'ui': { 
          'labelStacking': 'vertical', 
          'allowTyping': false, 
          'allowMultiple': false 
         } 
        } 
       }); 

       // Define a Pie chart 
       var pie = new google.visualization.ChartWrapper({ 
        'chartType': 'PieChart', 
        'containerId': 'chart1', 
        'options': { 
         'width': 300, 
         'height': 300, 
         'legend': 'none', 
         'title': 'Demo Data Displayed', 
         'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0}, 
         'pieSliceText': 'label' 
        }, 
        // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten) 
        // from the 'data' DataTable. 
        'view': {'columns': [1, 5]} 
       }); 

       // Define a table 
       var table = new google.visualization.ChartWrapper({ 
        'chartType': 'Table', 
        'containerId': 'chart2', 
        'options': { 
         'width': '300px' 
        } 
       }); 

       // Create a dashboard 
       new google.visualization.Dashboard(document.getElementById('dashboard')). 
        // Establish bindings, declaring the both the slider and the category 
       // picker will drive both charts. 
       bind([categoryPicker], [pie, table]). 
        //     bind([pie, table]). 
       // Draw the entire dashboard. 
       draw(data); 
      } 

     </script> 
// This is the dataArray [["DRG Definition","Provider State","Total Discharges","Average Covered Charges","Average Total Payments","id"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","AL","879","29855.3481218009","5857.17519906485","2"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","AZ","606","33581.3151824257","7034.48184806271","4"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","CO","255","33554.1607857647","6911.51372542745","6"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","DC","47","44919.3829785106","9241.59574459574","8"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","FL","2847","38464.4531085423","6145.54970143098","10"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","HI","24","27809.95833","10982.04167","12"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","ID","113","18150.97345","6457.23893819469","14"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","IN","1078","26888.4359918275","6597.5454545872","16"],["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","KY","728","22308.0645596154","6347.6085165467","18"],.... 

這裏的問題是,我的圖(餅圖)做生成,但它只加載部分讓我說,如果我從類別下拉選擇1值,只有它的餡餅顯示,我不能看到圖表的其他值,我希望有一個可以幫助我在這裏。

回答

1

首先,正如我在my answer to your other question中提到的那樣,如果您想使用PieChart,則必須將數字輸入爲數字,而不是字符串。舉個例子,你需要改變這一點:

["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","AL","879","29855.3481218009","5857.17519906485","2"] 

這樣:

["039 - EXTRACRANIAL PROCEDURES W\/O CC\/MCC","AL",879,29855.3481218009,5857.17519906485,2] 

隨着該固定,控制工程完全按照你設計了它:它過濾的「提供者狀態」欄。使用您提供的樣本數據,PieChart只顯示一個切片,但這是因爲數據只包含每個狀態一行。請參閱基於您的代碼在這裏工作示例:http://jsfiddle.net/asgallant/tqB92/

+0

Thx你清除我的視野在這裏最後一個問題,我試圖躲在布什後面,但在這裏我想我必須按照你的建議做,我會標記爲正確的一次我實現它 –

+0

僅供參考我的服務器端腳本是PHP,我剛剛添加了這個參數,echo json_encode($ dataArray,JSON_NUMERIC_CHECK);這解決了這個問題。 –