Визуализация гистограммы с помощью блога JSON

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);

BLOB-объект JSON, который я должен перебрать и отобразить на линейной диаграмме, выглядит примерно так:

{
    "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

Для этого типа задач существует действительно классная библиотека с именем underscore.js .Используйте функцию «щипать», чтобы собирать и объединять свойства из родственных объектов.Кроме того, вы можете использовать комбинацию datawrangler и jsondata.com , чтобы действительно сделать жизнь сладкой!

Answer 2

Итак, после некоторых проб и ошибок с API визуализации Google я понял, как отображать данные из набора данных 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);
    }