无法使用Google图表创建完整的饼图

Question

i have been trying to implement the google Graph and Dashboard,

Here is the snippet for my code,

     <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"],....

The Problem here is that my graph(pie chart) do generate but it loads only partially lets say if i select 1 value from category drop down,only its pie is displayed, i cannot see other values from the chart, i hope some 1 can help me here.

Answer 1

First off, as I mentioned in my answer to your other question , you have to input your numbers as numbers, not strings, if you want the PieChart to work. As an example, you need to change this:

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

to this:

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

With that fixed, the control works exactly as you designed it: it filters on the "Provider State" column. With the sample data you provided, the PieChart only shows one slice, but that is because the data only contains one row per state. See working example based on your code here: http://jsfiddle.net/asgallant/tqB92/