HumbleSoftware / Flotr2

Graphs and Charts for Canvas in JavaScript.
http://www.humblesoftware.com/flotr2/
MIT License
2.44k stars 526 forks source link

Bar chart Horizontal = true, axes donot change #175

Closed girija45701 closed 11 years ago

girija45701 commented 11 years ago

Hi all,

I am using Flotr2 to create a bar chart (Horizontal = true). The problem is that the axes do not interchange because of which the bar chart does not make any sense. For example, in the below code, I expect the countries name in Y-axis and the values to be on X-axis. (Opposite of a bar chart (horizontal = false).

Am I missing any options ?

Below is my code. Please suggest :

function createBar(container, legend) {

    var
        d1 = [[1, 3], [2, 8], [3, 5], [4, 13], [5, 8]], // First data series
        d2 = [[1, 4], [2, 7], [3, 6], [4, 12], [5, 7]],
        i, graph;

    var
        bars = {
            data: d1,
            label: "series1",
            bars: {
                show: true,
                barWidth: 0.8,
                stacked: false,
                grouped: true,
                horizontal: true
            }
        },
        bars2 = {
            data: d2,
            label: "series2",
            bars: {
                show: true,
                barWidth: 0.8,
                stacked: false,
                grouped: true,
                horizontal: true
            }
        };

    // Draw Graph
    graph = Flotr.draw(container,
        [bars, bars2], {
            HtmlText: false,
            title: "My chart",
            xaxis: {
                ticks: [[1, "UK"], [2, "Aus"], [3, "US"], [4, "Cananda"], [5, "Singapore"]],
                minorTickFreq: 4,
                labelsAngle: 45,
                title: "X-Axis",
                min: 0
            },
            yaxis:
                {
                    min: 0,
                    title: "Y axis",
                },
            grid: {
                minorVerticalLines: false,
                verticalLines: false,
                horizontalLines: false,
            },
            colors: ['#ff0000', '#ff7f00', '#ffbf00'],
            mouse: { track: true },
            legend: {
                show: true,
                container: legend
            }
        });
}