javascript - 使用 JSON blob 的谷歌折线图可视化

Question

所以我有一个谷歌折线图可视化，其中的数据集已转换为 JSON

这是一些具有属性的代码:

var chartOptions = {curveType: 'none',
    width: 1200, height: 768,
    vAxis: {maxValue: 8000, title: 'Load time in ms'},
    hAxis: {title: 'Date and Time'},
    title: 'A Line Graph Example',
    titlePosition: 'out', 
    titleTextStyle: {fontSize: 14,textIndent: 10},
    fontSize: 12
};
    //Load core chart visualization
    google.load('visualization', '1', {packages: ['corechart']});

    //On load call back invoke function
    google.setOnLoadCallback(getData);

我必须遍历并显示在折线图中的 JSON blob 看起来像这样:

{
    "cols": [
        {
            "id": "formatted_timestamp",
            "label": "Formatted timestamp",
            "type": "number"
        },
        {
            "id": "fully_loaded",
            "label": "Fully loaded",
            "type": "number"
        },
        {
            "id": "load_time",
            "label": "Load time",
            "type": "number"
        },
        {
            "id": "location",
            "label": "Test location",
            "type": "string"
        },
        {
            "id": "time_to_first_byte",
            "label": "Time to first byte",
            "type": "number"
        },
        {
            "id": "timestamp",
            "label": "Timestamp",
            "type": "datetime"
        },
        {
            "id": "url",
            "label": "URL",
            "type": "string"
        },
        {
            "id": "view",
            "label": "View #",
            "type": "number"
        }
    ],
    "rows": [
        {
            "c": [
                {
                    "v": 1288888570000
                },
                {
                    "v": 9236
                },
                {
                    "v": 6348
                },
                {
                    "v": "Dulles, VA USA"
                },
                {
                    "v": 466
                },
                {
                    "v": "Date(2010, 10, 4, 16, 36, 10)"
                },
                {
                    "v": "http://example.com"
                },
                {
                    "v": 1
                }
            ]
        },
        {
            "c": [
                {
                    "v": 1288888592000
                },
                {
                    "v": 4499
                },
                {
                    "v": 3630
                },
                {
                    "v": "Dulles, VA USA"
                },
                {
                    "v": 322
                },
                {
                    "v": "Date(2010, 10, 4, 16, 36, 32)"
                },
                {
                    "v": "http://example2.com"
                },
                {
                    "v": 2
                }
            ]
        },
        {
            "c": [
                {
                    "v": 1288888582000
                },
                {
                    "v": 4499
                },
                {
                    "v": 3630
                },
                {
                    "v": "Dulles, VA USA"
                },
                {
                    "v": 322
                },
                {
                    "v": "Date(2010, 10, 4, 16, 36, 32)"
                },
                {
                    "v": "http://example3.com"
                },
                {
                    "v": 2
                }
            ]
        },

为了简洁起见，我对行进行了缩写，因为其中有很多行，但它们几乎重复了不同的数据。

我的问题是如何遍历此 blob，然后将其显示在 google 折线图可视化中？另外，我如何从中选择不同的数据集并将其显示在同一图表上绘制的其他数据之上？

提前致谢。

Answer 1

因此，在使用 Google Visualization API 反复试验之后，我想出了如何显示 JSON 数据集中的数据。

    //Load core chart visualization package
    google.load('visualization', '1', {packages: ['corechart']});

    //On load call back initiate function
    google.setOnLoadCallback(getData);


    function getData() {

        //get Google vis data
        var query = new google.visualization.Query('/example/datatable');

        //set query parameters
        query.setQuery('select timestamp, this_time, foo group by foo');

        //send parameters and initiate function
        query.send(drawTable);

    }


function drawTable(response) {
        //error checking
        if (response.isError()){
        alert('Error in query: ' + response.getMessage() + '' + response.getDetailedMessage());
        return;
    }

    //convert response to JSON string
    var googleDataQuery = response.getDataTable().toJSON();

    //Convert JSON to google Data table
    var convertedData = new google.visualization.DataTable(googleDataQuery, 0.5);

    //Initialize a specific data table sub set view and store into a variable  
    var view = new google.visualization.DataView(convertedData);

    /*specify rows you want to see, in this case rows 1 through 100.  You can use an array for 
    specific rows ie [0,3,5]*/
    view.setRows(1, 100);

    //specify column data
    view.setColumns([1,2]); 

    //initiate type of chart. in this case a line chart
    visualization = new google.visualization.LineChart(document.getElementById('gchart'));

    //draw data table sub set with chart options
visualization.draw(view, chartOptions);
    }