CODEWITHSUNDEEP
javascriptjqueryflotbar-chart
Burak Karakuş
Burak Karakuş

Reputation: 1410

Jquery Flot Bar Chart doesn't fit to the board

I have two bar charts, one of them shows top ten categories, the other one shows min ten categories. There is no problem with top ten bar chart, but I use the very same code to draw min ten bar chart that I used in top ten bar chart, but here is the result.

This is top ten:

enter image description here

And this is min ten:

enter image description here

As you can see above image, min ten chart's bars look like damaged and labels below the bars can't be seen.

And here is the codes that produce these results:

MinTen produced html which feeds the bar chart:

var initCatMinTenBarChart = function ()
    {

        var dataMin = new Array();

var ticks = [[0, 'Kozmetik'],[1, 'Ev&Yaşam'],[2, 'Cep Telefonu'],[3, 'Ayakkabı'],[4, 'Bilgisayar'],[5, 'Beyaz Eşya']];var labels = ['Kozmetik','Ev&Yaşam','Cep Telefonu','Ayakkabı','Bilgisayar','Beyaz Eşya'];var minTenCat_d1 = 18;var minTenCat_d2 = 12;var minTenCat_d3 = 8;var minTenCat_d4 = 7;var minTenCat_d5 = 6;var minTenCat_d6 = 4;            
            var isempty = false;

var d_min_ten_cat_bar = [[0,18],[1,12],[2,8],[3,7],[4,6],[5,4]];

        dataMin.push({
            label: labels,
            data: d_min_ten_cat_bar,
            bars: {
                show: true,
                barWidth: 0.2,
                order: 1
            }
        });

        if (!isempty) {
            $.plot("#MinTenCatBarChart", dataMin, $.extend(true, {}, Plugins.getFlotDefaults(), {
                legend: {
                    show: false
                },
                series: {
                    lines: { show: false },
                    points: { show: false }
                },
                grid: {
                    hoverable: true,
                    clickable: true
                },
                tooltip: true,
                tooltipOpts: {
                    content: function (label, x, y) { return 'İçerik Sayısı: ' + y; }
                },
                bars: {
                    align: "center",
                    barWidth: 0.1
                },
                xaxis: {
                    align: "center",
                    ticks: ticks
                },
                yaxis: {
                    tickLength: 0
                }
            }));
        }
}

TopTen produced html data which feeds the bar chart:

var initCatTopTenBarChart = function ()
    {
        var dataTop = new Array();

var ticks = [[0, 'Kozmetik'],[1, 'Ev&Yaşam'],[2, 'Cep Telefonu'],[3, 'Ayakkabı'],[4, 'Bilgisayar'],[5, 'Beyaz Eşya']];var labels = ['Kozmetik','Ev&Yaşam','Cep Telefonu','Ayakkabı','Bilgisayar','Beyaz Eşya'];var topTenCat_d1 = 18;var topTenCat_d2 = 12;var topTenCat_d3 = 8;var topTenCat_d4 = 7;var topTenCat_d5 = 6;var topTenCat_d6 = 4;            
            var isempty = false;

var d_top_ten_cat_bar = [[0,18],[1,12],[2,8],[3,7],[4,6],[5,4]];

        dataTop.push({
            label: labels,
            data: d_top_ten_cat_bar,
            bars: {
                show: true,
                barWidth: 0.2,
                order: 1
            }
        });

        if (!isempty) {
            $.plot("#TopTenCatBarChart", dataTop, $.extend(true, {}, Plugins.getFlotDefaults(), {
                legend: {
                    show: false
                },
                series: {
                    lines: { show: false },
                    points: { show: false }
                },
                grid: {
                    hoverable: true,
                    clickable: true
                },
                tooltip: true,
                tooltipOpts: {
                    content: function (label, x, y) { return 'İçerik Sayısı: ' + y; }
                },
                bars: {
                    align: "center",
                    barWidth: 0.1
                },
                xaxis: {
                    align: "center",
                    ticks: ticks
                },
                yaxis: {
                    tickLength: 0
                }
                // tick olasyına bak 0,10 arası işlemez burda max-min şeyapmak lazım
            }));
        }
    }

Upvotes: 0

Views: 279

Answers (1)

SteamDev
SteamDev

Reputation: 4404

Maybe the positioning is off because of when the chart is being rendered? Try drawing the charts only once their corresponding tab is selected and visible.

Upvotes: 1

Related Questions