Проблема с использованием Flot + JQuery в Android - PullRequest
Новая
       18

Проблема с использованием Flot + JQuery в Android

0 голосов
/ 11 июня 2010

Кто-нибудь уже использовал Flot в Android?

Я читал это http://rapidandroid.org/wiki/Graphing и я повторно использовал мой код, который работает на веб-сайте.

Проблема в том, что графика не отображается.

Примерно так:

-------------- JAVASCRIPT, КОТОРЫЙ ПОЛУЧАЕТДАННЫЕ -------------------- 

    if ($('#newsStatsCheckbox').is(':checked')) {

        $.ajax( {
            url : mobileClippingStatistics.baseUrl
                    + "countNews.json?aggregation="
                    + $("#aggregation").val() + "&start="
                    + $("#start").val() + "&end=" + $("#end").val(),
            type : "GET",
            dataType : "json",
            success : mobileClippingStatistics.addToGraphic,
            error : function(xhr, ajaxOptions, thrownError) {
                console.error("News hits data is not available...");
                console.error(xhr.status);
                console.error(thrownError);
                alert("News hits data is not available...");
            }
        });

    }

------------- ДРУГИЕ МЕТОДЫ ---------- 

          addToGraphic : function(jsonData) {
    // To keep the colors the same  

    if (typeof jsonData == 'string') {
        var splitData = jsonData.split(" ");

        for ( var i = 0; i < splitData.length - 1; i++) {
            var json = eval('(' + splitData[i] + ')');

            json.color = mobileClippingStatistics.plotDataColor;

            mobileClippingStatistics.plotData.push(json);
            mobileClippingStatistics.plotDataBackup.push(json);

            var div = $("<div style='padding-right:10px; position:relative; float:left;' />");

            var label = $("<label/>");
            label
                    .html(mobileClippingStatistics.plotData[mobileClippingStatistics.plotData.length - 1].label);

            var check = $('');
            check.attr('id', "checkbox"
                    + mobileClippingStatistics.plotDataColor);

            div.append(label);
            div.append('<input id="checkbox'+mobileClippingStatistics.plotDataColor+'" type="checkbox" checked="checked" onchange="mobileClippingStatistics.refreshGraphic()" />');

            $("#plotOptions").append(div);

            mobileClippingStatistics.plotDataColor++;

        }

    }

    else {
        jsonData.color = mobileClippingStatistics.plotDataColor;
        mobileClippingStatistics.plotData.push(jsonData);
        mobileClippingStatistics.plotDataBackup.push(jsonData);

        div = $("<div style='padding-right:10px; position:relative; float:left;' />");

        var label = $("<label/>");
        label
                .html(mobileClippingStatistics.plotData[mobileClippingStatistics.plotData.length - 1].label);

        check = $('<input type="checkbox" checked="checked" onchange="mobileClippingStatistics.refreshGraphic()" style="padding-right:10px; />');
        check.attr('id', "checkbox"
                + mobileClippingStatistics.plotDataColor);

        div.append(label);
        div.append('<input id="checkbox'+mobileClippingStatistics.plotDataColor+'" type="checkbox" checked="checked" onchange="mobileClippingStatistics.refreshGraphic()" />');

        $("#plotOptions").append(div);

        mobileClippingStatistics.plotDataColor++;

    }

    mobileClippingStatistics.plotGraphic();

},

plotGraphic: function () {

    // Plot graphic
    var plot = $.plot($("#plot"), mobileClippingStatistics.plotData,
            mobileClippingStatistics.options);

    var overview = $.plot($("#plotOverview"),
            mobileClippingStatistics.plotData, {
                series : {
                    lines : {
                        show : true,
                        lineWidth : 1
                    },
                    shadowSize : 0
                },
                xaxis : {
                    ticks : [],
                    mode : "time"
                },
                yaxis : {
                    ticks : [],
                    autoscaleMargin : 0.1
                },
                selection : {
                    mode : "x"
                },
                legend : {
                    show : false
                }

            });

    mobileClippingStatistics.showPlots();

    $("#plot").bind(
            "plotselected",
            function(event, ranges) {
                // do the zooming

                plot = $.plot($("#plot"),
                        mobileClippingStatistics.plotData, $.extend(true,
                                {}, mobileClippingStatistics.options, {
                                    xaxis : {
                                        min : ranges.xaxis.from,
                                        max : ranges.xaxis.to
                                    }
                                }));

                // don't fire event on the overview to prevent eternal loop
                overview.setSelection(ranges, true);
            });

    $("#plotOverview").bind(
            "plotselected",
            function(event, ranges) {
                // plot.setSelection(ranges);
                $("#plot").html("");
                $.plot($("#plot"), mobileClippingStatistics.plotData, $
                        .extend(true, {}, mobileClippingStatistics.options,
                                {
                                    xaxis : {
                                        min : ranges.xaxis.from,
                                        max : ranges.xaxis.to
                                    }
                                }));
            });

},

defineOptions : function() {
    mobileClippingStatistics.options = {
        lines : {
            show : true
        },
        points : {
            show : true
        },
        xaxis : {
            mode : "time"
        },
        yaxis : {
            min : 0
        },

        grid : {
            markings : mobileClippingStatistics.weekendAreas
        }

    };

},

Графическое изображение не отображается, хотя отображаются элементы div / / с именем данных.

Ideias

1 Ответ

1 голос
/ 30 декабря 2010

Получил, что это работает.

Сначала выведите график без данных.

Затем получите данные и повторите их.

Были сделаны некоторые другие исправления / модификации, поэтому мне нелегко опубликовать одну модификацию, которая применила бы это.

...