0

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
            }));
        }
    }
Improve this question
2
  • 2
    The JS is practically identical, makes me think its an issue with the container CSS? Some style in the first tab (min 10) is different than the other. Or 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.
    – SteamDev
    Commented Jan 6, 2015 at 16:42
  • Thanks, that worked! I think you should write it as an answer so that I can accept it as the solution.
    – Burak Karakuş
    Commented Jan 7, 2015 at 11:20

1 Answer 1

Reset to default
1

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.