将表转换为datarow

时间:2014-12-17 17:42:10

标签: javascript

我想转换一下:

Province | Major                  | Qty
New York | Computer Science       | 4
New York | Information System     | 5
New York | Information Technology | 1
DC       | Information System     | 2
DC       | Information Technology | 3
Los      | Information System     | 4

到:

Province | Computer Science | Information System | Information Technology 
New York | 4                | 5                  | 1
DC       | 0                | 2                  | 3
Los      | 0                | 4                  | 0

这是我的代码:

    @model LPDPWebApp.Models.DKP.Chart5Model
<div class="col-md-6 grid">
    <div class="panel panel-grid">
        <div class="panel-heading">
            <h4 class="panel-title">Distribusi Penerima Beasiswa Berdasarkan Asal Daerah dan Jurusan/Peminatan</h4>
        </div>
        <div class="panel-body">
            <div id="chart5" height="300">

            </div>

            @using (Html.BeginForm("GetChart5", "DKP", FormMethod.Post, new { id = "formChart5", @class = "form-vertical" }))
            {
                <div class="row">
                    @Html.AntiForgeryToken()
                    <div class="col-md-4" hidden>
                        <div class="form-group form-group-alt">
                            <label>province</label>
                            @Html.DropDownList("Province", LPDPWebApp.Helpers.Provinces.GetSelectList(), new { id = "ddlChart5Provinces", @class = "form-control panel-content-dropdown" })
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group form-group-alt">
                            <label>major</label>
                            @Html.DropDownList("Major", LPDPWebApp.Helpers.Majors.GetSelectList(), new { id = "ddlChart5Majors", @class = "form-control panel-content-dropdown" })
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="form-group form-group-alt">
                            <button type="submit" class="btn btn-primary btn-submit pull-right">submit</button>
                        </div>
                    </div>
                </div>
            }

        </div>
    </div>
</div>





<script>
    $(function () {
        $('#ddlChart5Provinces').val("Jakarta");
        $('#ddlChart5Majors').val("Computer Science");
        $('#formChart5').submit();
    });
    $('#formChart5').submit(function (e) {
        var $form = $(this);
        // We check if jQuery.validator exists on the form
        if (!$form.valid || $form.valid()) {
            $.post($form.attr('action'), $form.serializeArray())
                .done(function (json) {
                    json = json || {};
                    // In case of success, we redirect to the provided URL or the same page.
                    if (json.is_success) {
                        //ubah disini
                        var rawData = json.data;
                        console.log(rawData);
                        var data = new google.visualization.DataTable();
                        var colName = [];
                        data.addColumn('string', 'Province');
                        colName.push('Province');
                        for (var ii = 0; ii < rawData.length; ii++) {
                            data.addColumn('number', rawData[ii].Major);
                            colName.push(rawData[ii].Major);
                        }

                        var dataset = [];
                        for (var ii = 0; ii < rawData.length; ii++) {
                            var datasetPos = 0;
                            if (dataset.length == 0) {
                                dataset.push([]);
                                dataset[0].push(rawData[ii].Province);
                                datasetPos = 0;
                            }
                            else {
                                if (dataset[dataset.length - 1][0] != rawData[ii].Province) {

                                    dataset.push([]);
                                    dataset[dataset.length - 1].push(rawData[ii].Province);
                                }

                                datasetPos = dataset.length - 1;
                            }

                            for (var jj = 1; jj < colName.length; jj++) {


                                if (colName[jj] == rawData[ii].Major) {
                                    dataset[datasetPos].push(rawData[ii].Quantity);
                                    break;
                                }
                                else if (jj < dataset.length)
                                    dataset[datasetPos].push(0);
                            }

                        }
                        console.log(dataset);
                        data.addColumn({ type: 'string', role: 'style' });

                        var colors = ['#F44336', '#3F51B5', '#2196F3', '#1abc9c', '#4CAF50', '#CDDC39', '#FF5722'];


                        chartdata = [];
                        for (var ii = 0; ii < rawData.length; ii++) {
                            chartdata.push([rawData[ii].Province, rawData[ii].Quantity, colors[ii]]);
                        }
                        //data.addRows(chartdata);
                        data.addRows(dataset);
                        //console.log(chartdata);
                        // Set chart options
                        var options = {
                            'height': '320',
                            legend: {
                                position: 'bottom'
                            },
                            chartArea: {
                                left: 40,
                                top: 15,
                                width: '100%',
                                height: 260
                            },
                            colors: ['#F44336', '#3F51B5', '#2196F3', '#1abc9c', '#4CAF50', '#CDDC39', '#FF5722']
                        };

                        // Instantiate and draw our chart, passing in some options.
                        var chart5 = new google.visualization.ColumnChart(document.getElementById('chart5'));
                        chart5.draw(data, options);


                        //end
                    } else {
                        console.log($form, json.message);
                    }
                })
                .error(function () {
                    alert("error");
                });
        }

        // Prevent the normal behavior since we opened the dialog
        e.preventDefault();
    });

    var randomScalingFactor = function () { return Math.round(Math.random() * 100) };


</script>

我得到了这个结果:

 Province | Computer Science | Information System | Information Technology 
    New York | 4                | 5                  | 1
    DC       | 0                | 2                  | 0                      | 3
    Los      | 0                | 4          

请帮助我,如何将原始数据转换为数据集的表数据?

0 个答案:

没有答案