Google Charts, используя несколько гистограмм и зависимых элементов управления вместе - PullRequest
Новая
       24

Google Charts, используя несколько гистограмм и зависимых элементов управления вместе

1 голос
/ 19 мая 2011

Я пытаюсь сделать гистограмму, используя Google Charts с зависимыми элементами управления. Проблема, с которой я сталкиваюсь, связана с вводом данных в формате, пригодном для моей задачи.

Вот пример данных, которые я хочу использовать:

'Option1heading', 'Option2heading', 'Option3heading', 'val1', 'val2', 'val3', 'val4', 'val5', 'val6'

'Row1val1', 'Row1val2', 'Row1val3', 1336060, 1538156, 1576579, 1600652, 1968113, 123345

'Row2val1', 'Row2val2', 'Row2val3', 400361, 366849, 440514, 434552, 393032, 234374

'Row3val1', 'Row3val2', 'Row3val3', 1001582, 1119450, 993360, 1004163, 979198, 578236

'Row4val1', 'Row4val2', 'Row4val3', 997974, 941795, 930593, 897127, 108087, 4893

Первая строка в этом примере содержит параметры, которые я хочу отфильтровать для «Option1heading», «Option2heading» и «Option3heading». В действительности это могут быть что-то вроде «страна», «регион», «государство». Затем во второй строке содержатся данные: «Row1val1», «Row1val2», «Row1val3» - это информация фильтра (например, «Франция», «Север», «Париж»).

После этого 6 числовых значений будут отдельными столбцами данных для этой строки. В легенде для этого примера они будут равны 'val1' - 'val6' (согласно первому ряду). В действительности это могут быть такие вещи, как «население», «мужчина», «женщина», «0-10 лет» и т. Д.

Вот код в том виде, в каком он сейчас есть. Это «вид» работает, но не работает правильно. Возможно ли это, и может ли кто-нибудь указать мне правильное направление, чтобы это сделать? 

<html>
<head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="jquery.dump.js"></script>

    <script type="text/javascript">

    // Load the Visualization API and the controls package.
    google.load('visualization', '1.1', {'packages':['corechart', 'controls']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawDashboard);

    // Callback that creates and populates a data table,
    // instantiates a dashboard, a range slider and a pie chart,
    // passes in the data and draws it.
    function drawDashboard() {


        var data = new google.visualization.DataTable();

        var raw_data = [['Option1', 'Option2', 'option3', 'val 1', 'val 2', 'val 3', 'val 4', 'val 5', 'val 6'],
                        ['Ford', 's', 'm', 1336060, 1538156, 1576579, 1600652, 1968113, 123345],
                        ['Citroen', 's', 'm', 400361, 366849, 440514, 434552, 393032, 234374],
                        ['BMW', 's', 'm', 1001582, 1119450, 993360, 1004163, 979198, 578236],
                        ['Toyota', 's', 'm', 997974, 941795, 930593, 897127, 108087, 4893]];

        var my_rows = ['Row1', 'Row2', 'Row3', 'Row4', 'Row5', 'Row6'];

        data.addColumn('string', 'Year');
        for (var i = 0; i  < raw_data.length; ++i) {
            data.addColumn('number', raw_data[i][0]);

        }

        data.addRows(my_rows.length);
        for (var j = 0; j < my_rows.length; ++j) {
            data.setValue(j, 0, my_rows[j].toString());
        }

        for (var i = 1; i  < raw_data.length; ++i) {
            for (var j = 3; j  < raw_data[i].length; ++j) {
                data.setValue(j-3, i+1, raw_data[i][j]);
            }
        }

        // Create a dashboard.
        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

        var controlPicker1 = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'control1',
            'options': {
            'filterColumnLabel': 'Ford',
            'ui': {
                'labelStacking': 'horizontal',
                'allowTyping': false,
                'allowMultiple': true
            }
            }
        });

        var controlPicker2 = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'control2',
            'options': {
            'filterColumnLabel': 'Citroen',
            'ui': {
                'labelStacking': 'horizontal',
                'allowTyping': false,
                'allowMultiple': true
            }
            }
        });

        var controlPicker3 = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'control3',
            'options': {
            'filterColumnLabel': 'BMW',
            'ui': {
                'labelStacking': 'horizontal',
                'allowTyping': false,
                'allowMultiple': true
            }
            }
        });

        var barChart = new google.visualization.ChartWrapper({
            'chartType': 'BarChart',
            'containerId': 'chart_div',
            'options': {
            'width': '100%',
            'height': '100%',
            'vAxis': {title: "Year"},
            'hAxis': {title: "Cups"},
            'fontSize': 14,
            'chartArea': {top: 0, right: 0, bottom: 0, height:'100%', width:'70%'}
            },
            // Configure the barchart to use columns 2 (City) and 3 (Population)
        });

        google.visualization.events.addListener(dashboard, 'ready', function() {
            // Dashboard redraw, have a look at how many rows the barChart is displaying
            var numRows = barChart.getDataTable().getNumberOfRows();
            var expectedHeight = (numRows * 60)+50;
            if (parseInt(barChart.getOption('height'), 10) != expectedHeight) {
                // Update the chart options and redraw just it
                Div("chart_div", expectedHeight);
                barChart.setOption('height', expectedHeight);
                barChart.draw();

            }

        });

        // Establish dependencies, declaring that 'filter' drives 'pieChart',
        // so that the pie chart will only display entries that are let through
        // given the chosen slider range.
        dashboard.bind(controlPicker1, controlPicker2);
        dashboard.bind(controlPicker2, controlPicker3);
        dashboard.bind(controlPicker3, barChart);

        // Draw the dashboard.
        dashboard.draw(data);
    }

    function Div(id,h) {

        var div=document.getElementById(id);
        h = (h) + "px";

        var w=parseInt(div.style.width);
        if($(this).width() >= 1200){
            w = 1200 + "px";
        }else{
            w = ($(this).width()-30) + "px";
        }

        $(div).height(h);
        $(div).width(w);
    }

    </script>
</head>

    <style>
        #chart_div { width: 1200px; height: 30000px; }
    </style>

<body>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
    <!--Divs that will hold each control and visualization-->
    <div id="control1"></div>
    <div id="control2"></div>
    <div id="control3"></div>
    <div id="chart_div"></div>
    </div>
</body>
</html>

Заранее большое спасибо за любую помощь, которую вы можете предоставить.

1 Ответ

0 голосов
/ 19 мая 2011

Структура данных JSON должна выглядеть примерно так: 

{
    "cols": [ {"id":"Col1", "label":"", "type":"date"} ],
    "rows":
    [
        { "c": [ {"v":"a"}, {"v":"Date(2010,10,6)"} ] },
        { "c": [ {"v":"b"}, {"v":"Date(2010,10,7)"} ] }
    ]
}

Более подробная информация содержится в google.visualization.DataTable справочных документах.

...