добавление нескольких (динамический номер) Google-диаграммы на странице - PullRequest
Новая
       6

добавление нескольких (динамический номер) Google-диаграммы на странице

0 голосов
/ 31 октября 2018

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

До сих пор я пытался сгенерировать линейные графики, используя метод обратного вызова в цикле for, но все графики имеют одинаковые данные. когда я отладил код, я обнаружил, что код в методе обратного вызова для создания таблицы данных всегда выполняется для последнего действия и генерирует одну и ту же диаграмму для каждого действия.

вот код, который я пробовал HTML 

<div id="container">
    <div id="report" class="table-responsive">
        <select id="app" name="app" aria-placeholder="Select Application">
            <option>-- Select Application --</option>
        </select>
        <select id="activity" name="activity" aria-placeholder="Select Activity">
            <option>-- Select Activity --</option>
        </select>
        <select id="type" name="type" aria-placeholder="Select StartupType">
            <option value="coldstart" >Cold</option>
            <option value="warmstart" selected>Warm</option>
        </select>
        <br/>
        <div id="chartContainer">

        </div>
    </div>
    <div align="center" class="loader">
        <img src="images/loader.gif" id="load" width="400" height="400" align="absmiddle" />
    </div>
</div>

1008 * Javascript * 

var appXml;
var summaryXml;
$(document).ready(function () {
    prepareCharts();

    $("#app").change(function () {
        var app = $(this).val();
        if (app != "") {
            $(appXml).find('package').each(function () {
                if ($(this).attr('appname') == app) {
                    var options = '<option value="">-- Select activity --</option>';
                    $(this).find('activity').each(function () {
                        options += '<option value="' + $(this).attr('activityname') + '">' + $(this).attr('activityname') + '</option>';
                    });
                    $('#activity').html(options);
                }
            });
        }
    });

    $("#activity").change(function () {
        if ($(this).val() != "")
            drawActivityChart();
        else
            drawActivityCharts(appXml, $('#type').val());
    });

    $('#type').change(function () {
        var type = $(this).val();
        if ($('#activity').val() == "")
            drawActivityCharts(appXml, type);
        else
            drawActivityChart();
    });
});

function prepareCharts() {
    $.ajax({
        type: "GET",
        url: "Startuptime.xml",
        dataType: "xml",
        success: drawCharts
    });
}

function drawCharts(xml) {
    console.log('drawing charts');
    appXml = xml;
    prepareDropdowns(xml);
    drawActivityCharts(xml);
}

function prepareDropdowns(xml) {
    var options = '<option value="">-- Select application --</option>';
    $(xml).find('package').each(function () {
        options += '<option value="' + $(this).attr('appname') + '">' + $(this).attr('appname') + '</option>';
    });

    $('#app').html(options);
    $('#app option:nth-child(2)').attr('selected', 'selected').change();
}

function drawActivityCharts(xml, type) {
    $('#chartContainer').children().remove();
    if (typeof type === 'undefined')
        type = 'warmstart';
    google.charts.load('current', { 'packages': ['corechart'] });
    var app = $('#app').val();
    $(xml).find('package').each(function () {
        var that = this;
        if ($(that).attr('appname') == app) {
            var i = 1;
            $(that).find('activity').each(function () {
                var activityName = $(this).attr('activityname');
                console.log(i);
                console.log(activityName);
                i++;
                if ($(this).find(type).length > 0) {
                    that = this;
                    $('#chartContainer').append('<div id="' + activityName + '"></div>')
                    google.charts.setOnLoadCallback(function () {
                        var data = new google.visualization.DataTable();
                        data.addColumn('number', 'Occurance');
                        data.addColumn('number', 'Time');
                        var row = 1;
                        $(that).children(type).find('displaytime').each(function () {
                            data.addRow([row, parseFloat($.trim($(this).find('timetoinitialdisplay').text()))]);
                            console.log(row + " " + parseFloat($.trim($(this).find('timetoinitialdisplay').text())));
                            row++;
                        });
                        // Set chart options
                        var options = {
                            'title': activityName,
                            'width': 800,
                            'height': 200
                        };
                        // Instantiate and draw our chart, passing in some options.
                        var chart = new google.visualization.LineChart(document.getElementById(activityName));
                        chart.draw(data, options);
                    });
                }
            });
        }
    });
}

function drawActivityChart() {
    $('#chartContainer').children().remove();
    google.charts.load('current', { 'packages': ['corechart'] });
    var app = $('#app').val();
    var activity = $('#activity').val();
    var type = $('#type').val();

    $(appXml).find('package').each(function () {
        var that = this;
        if ($(that).attr('appname') == app) {
            $(that).find('activity').each(function () {
                var activityName = $(this).attr('activityname');
                if (activityName == activity) {
                    if ($(this).find(type).length > 0) {
                        that = this;
                        $('#chartContainer').append('<div id="' + activityName + '"></div>')
                        google.charts.setOnLoadCallback(function () {
                            var data = new google.visualization.DataTable();
                            data.addColumn('number', 'Occurance');
                            data.addColumn('number', 'Time');
                            var row = 1;
                            $(that).find('displaytime').each(function () {
                                data.addRow([row, parseFloat($.trim($(this).find('timetoinitialdisplay').text()))]);
                                console.log(row + " " + parseFloat($.trim($(this).find('timetoinitialdisplay').text())));
                                row++;
                            });
                            // Set chart options
                            var options = {
                                'title': activityName,
                                'width': 800,
                                'height': 200
                            };
                            // Instantiate and draw our chart, passing in some options.
                            var chart = new google.visualization.LineChart(document.getElementById(activityName));
                            chart.draw(data, options);
                        });
                    }
                }
            });
        }
    });
}

drawActivityCharts () - метод, который должен рисовать диаграммы активности и схема XML будет как ниже. 

    <?xml version='1.0' encoding='UTF-8' ?>
<appstartuptime>
    <package appname="appname" name="packagename" packageversion="version">
        <activity activityname="activityname">
            <coldstart numberoftimes="1">
                <displaytime>
                    <timetoinitialdisplay>841</timetoinitialdisplay>
                </displaytime>
            </coldstart>
        </activity>
        <activity activityname="activityname">
                <warmstart numberoftimes="2">
                <displaytime>
                    <timetoinitialdisplay>454</timetoinitialdisplay>
                </displaytime>
                <displaytime>
                    <timetoinitialdisplay>467</timetoinitialdisplay>
                </displaytime>
            </warmstart>
        </activity>
    </package>
</appstartuptime>

1 Ответ

0 голосов
/ 31 октября 2018

и google.charts.load, и google.charts.setOnLoadCallback необходимо вызывать только один раз для загрузки страницы.

кроме того, google.charts.load будет ждать загрузки страницы по умолчанию,
как таковой, он может использоваться вместо $(document).ready

вы также можете включить Google callback в оператор load. 

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

или используйте обещание, которое он возвращает. 

google.charts.load('current', {
  packages:['corechart']
}).then(drawChart);

учитывая это, рекомендуем сначала загрузить Google,
тогда вы можете нарисовать столько графиков, сколько необходимо.

Я не прошел весь код, но должно работать что-то похожее на следующее ... 

var appXml;
var summaryXml;

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
    prepareCharts();

    $("#app").change(function () {
        var app = $(this).val();
        if (app != "") {
            $(appXml).find('package').each(function () {
                if ($(this).attr('appname') == app) {
                    var options = '<option value="">-- Select activity --</option>';
                    $(this).find('activity').each(function () {
                        options += '<option value="' + $(this).attr('activityname') + '">' + $(this).attr('activityname') + '</option>';
                    });
                    $('#activity').html(options);
                }
            });
        }
    });

    $("#activity").change(function () {
        if ($(this).val() != "")
            drawActivityChart();
        else
            drawActivityCharts(appXml, $('#type').val());
    });

    $('#type').change(function () {
        var type = $(this).val();
        if ($('#activity').val() == "")
            drawActivityCharts(appXml, type);
        else
            drawActivityChart();
    });
});

function prepareCharts() {
    $.ajax({
        type: "GET",
        url: "Startuptime.xml",
        dataType: "xml",
        success: drawCharts
    });
}

function drawCharts(xml) {
    console.log('drawing charts');
    appXml = xml;
    prepareDropdowns(xml);
    drawActivityCharts(xml);
}

function prepareDropdowns(xml) {
    var options = '<option value="">-- Select application --</option>';
    $(xml).find('package').each(function () {
        options += '<option value="' + $(this).attr('appname') + '">' + $(this).attr('appname') + '</option>';
    });

    $('#app').html(options);
    $('#app option:nth-child(2)').attr('selected', 'selected').change();
}

function drawActivityCharts(xml, type) {
    $('#chartContainer').children().remove();
    if (typeof type === 'undefined')
        type = 'warmstart';
    var app = $('#app').val();
    $(xml).find('package').each(function () {
        var that = this;
        if ($(that).attr('appname') == app) {
            var i = 1;
            $(that).find('activity').each(function () {
                var activityName = $(this).attr('activityname');
                console.log(i);
                console.log(activityName);
                i++;
                if ($(this).find(type).length > 0) {
                    that = this;
                    $('#chartContainer').append('<div id="' + activityName + '"></div>')

                    var data = new google.visualization.DataTable();
                    data.addColumn('number', 'Occurance');
                    data.addColumn('number', 'Time');
                    var row = 1;
                    $(that).children(type).find('displaytime').each(function () {
                        data.addRow([row, parseFloat($.trim($(this).find('timetoinitialdisplay').text()))]);
                        console.log(row + " " + parseFloat($.trim($(this).find('timetoinitialdisplay').text())));
                        row++;
                    });
                    // Set chart options
                    var options = {
                        'title': activityName,
                        'width': 800,
                        'height': 200
                    };
                    // Instantiate and draw our chart, passing in some options.
                    var chart = new google.visualization.LineChart(document.getElementById(activityName));
                    chart.draw(data, options);
                }
            });
        }
    });
}

function drawActivityChart() {
    $('#chartContainer').children().remove();
    var app = $('#app').val();
    var activity = $('#activity').val();
    var type = $('#type').val();

    $(appXml).find('package').each(function () {
        var that = this;
        if ($(that).attr('appname') == app) {
            $(that).find('activity').each(function () {
                var activityName = $(this).attr('activityname');
                if (activityName == activity) {
                    if ($(this).find(type).length > 0) {
                        that = this;
                        $('#chartContainer').append('<div id="' + activityName + '"></div>')

                        var data = new google.visualization.DataTable();
                        data.addColumn('number', 'Occurance');
                        data.addColumn('number', 'Time');
                        var row = 1;
                        $(that).find('displaytime').each(function () {
                            data.addRow([row, parseFloat($.trim($(this).find('timetoinitialdisplay').text()))]);
                            console.log(row + " " + parseFloat($.trim($(this).find('timetoinitialdisplay').text())));
                            row++;
                        });
                        // Set chart options
                        var options = {
                            'title': activityName,
                            'width': 800,
                            'height': 200
                        };
                        // Instantiate and draw our chart, passing in some options.
                        var chart = new google.visualization.LineChart(document.getElementById(activityName));
                        chart.draw(data, options);
                    }
                }
            });
        }
    });
}
...