How to draw a Bar chart where bars stick to each other ?

[Benjamin Jaton]

Hi,

1) How to draw a Bar chart where bars stick to each other ?
2) How to specify the X axis values for the beginning & end of one bar.

Example :
http://img836.imageshack.us/i/testq.png/

I cannot figure out which renderer to use, did I miss something ?

Any help appreciated,

Benjamin

[Benjamin]

Hi,

1) How to draw a Bar chart where bars stick to each other ?
2) How to specify the X axis values for the beginning & end of one
bar.

Example :

[JordiS]

Use stackedSeries:true property, and it works!

The problem is when having more than one stack in one axis value.

[Benjamin Jaton]

I believe you mean

    stackSeries: false, // if true, will create a stack plot.
                        // Currently supported by line and bar graphs.

But it doesn't change my behaviour since my bars are not stacked.

I noticed
  barMargin: 10      // number of pixels between adjacent groups of bars.
but I guess it's only relevant for bars in the same group.

So I think I have to play with the barWidth option, but to achieve this I need
to know the pixel distance between 2 ticks on the X axis ...
Any idea on how to compute that ?

Benjamin

--
You received this message because you are subscribed to the Google Groups "jqplot-users" group.
To post to this group, send email to jqplot...@googlegroups.com.
To unsubscribe from this group, send email to jqplot-users...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jqplot-users?hl=en.

[Chris Leonello]

So I think I have to play with the barWidth option, ...

barMargin should be independent of plot width.  0 should make bars in adjacent groups touch.  This might not be the case if you've specified bar width.

but to achieve this I need
to know the pixel distance between 2 ticks on the X axis ...

The idea is that you never need to know this.  Bar width is auto calculated, you just let jqplot know how much "barPadding" to put between bars in a group/category and how much "barMargin" to put between adjacent categories.

So, setting both of these (barPadding and barMargin) to 0 should make everything touch.  You'll probably want to turn off shadows.

If you specify "barWidth" on any of the series, this may not work as expected.

I haven't thoroughly stress tested these options, so let us know how it goes.

--

Chris Leonello

[Benjamin Jaton]

Hi, thanks for the reply.

This thing is that I don't use categories. I just have a simple case like :

between x=3 and x=4 : y=2
between x=4 and x=5 : y=3
between x=5 and x=6 : y=4
between x=6 and x=7 : y=3
between x=7 and x=8 : y=1

I do agree that playing directly with bar width in pixels is ugly.
So far, here is a minimal example of what I have :

$(document).ready(function() {
    line1 = [[3.5,2],[4.5,3],[5.5,4],[6.5,3],[7.5,1]];
   
    plot1 = $.jqplot('chart2', [line1], {
        series:[
            {label:'Test', renderer:$.jqplot.BarRenderer}
        ],
        axes:{
            xaxis:{ ticks: [1,'',2,'',3,'',4,'',5,'',6,'',7,'',8,'',9,'',10] }
        },
        seriesDefaults: {
            shadow: false,
            rendererOptions: {
                barMargin: 0,      // number of pixels between adjacent groups of bars.
                barWidth: null     // width of the bars.  null to calculate automatically.
            }
        },
       
    });
           
});

It's tricky, I use the default "2 ticks" width of a bar to do what I need. Then I hide the intermediate ticks that I don't want...

May be somebody knows how to clean this up ?

Thanks,
Ben

[Chris Leonello]

This thing is that I don't use categories. I just have a simple case like :

...

It's tricky, I use the default "2 ticks" width of a bar to do what I need. Then I hide the intermediate ticks that I don't want...

Oh.  Bar charts are designed to work with category axes. Category axes are really just linear axes that take care of what you are doing here manually but behind the scenes.  They automatically put data at monotonically increasing x values with ticks in between (no hiding every other tick).  

Since you are already specifying a custom tick array for x axis labels, and you data looks to be monotonically increasing, a category axis might work for you.  If you can't use it, you'll get difficulties customizing the look like you've found.

--

Chris Leonello

[Benjamin Jaton]

From the example file docs/jqplot/examples/barTest.html there is a bar chart using the default X axis renderer (linear) :

    plot3 = $.jqplot('chart3', [s1, s2, s3], {
        stackSeries: true,
        captureRightClick: true,
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {
                highlightMouseDown: true   
            },
            pointLabels: {show: true}
        },
        legend: {
            show: true,
            location: 'e',
            placement: 'outside'
        }     
    });
   
But in this case, we don't seem to have any control on the width / space of those bars. Is this a deprecated example ?

Anyway I tried to work with a category renderer, and here is what I have now :


$(document).ready(function() {
    line1 = [[3,2],[4,3],[5,4],[6,3],[7,1]];

   
    plot1 = $.jqplot('chart2', [line1], {
        series:[
            {label:'Test', renderer:$.jqplot.BarRenderer}
        ],
        axes:{
            xaxis:{

                ticks: [1,2,3,4,5,6,7,8,9,10],
                renderer:$.jqplot.CategoryAxisRenderer

            }
        },
        seriesDefaults: {
            shadow: false,
            rendererOptions: {
                barMargin: 0,      // number of pixels between adjacent groups of bars.
                barWidth: null     // width of the bars.  null to calculate automatically.
            }
        },
       
    });
           
});

Much cleaner, but one last problem : how to display the category name as a regular tick ? I'd like it to be at the beginning of the vertical line instead of in the middle of the category.

Thanks,
Ben

[Chris Leonello]

From the example file docs/jqplot/examples/barTest.html there is a bar chart using the default X axis renderer (linear) :

Not deprecated.  It is there to show that it doesn't work as well with linear axes.  I didn't mean it couldn't be done, just that the bar renderer is designed to work best with category axes.  The general case of a bar chart can be massaged to work O.K. with linear axes, but I'm not sure what you want to do would be easy.

Much cleaner, but one last problem : how to display the category name as a regular tick ? I'd like it to be at the beginning of the vertical line instead of in the middle of the category.

Try specifying a different ticks array like [0.5, 1.5, 2.5, ...]  I think those will be the values between bars.  Haven't tried that before.

--

Chris Leonello