too large bar width in jqplot

Question

I'm new to jqplot, when I want to draw a bar chart, x axis is date, interval is 1 day. This is part of my code:

     axesDefaults:{                                                                  
          tickRenderer: $.jqplot.CanvasAxisTickRenderer,                              
         tickOptions:{
            fontSize:'10pt',
         },                                                                          
    },                                                                              
     axes:{                                                                          
         xaxis:{
            renderer:$x_renderer,                                                   
             tickOptions:{
               formatString:'%Y-%#m-%#d',                                          
            },
            rendererOptions:{                                                       
                 tickOptions:{
                     angle:-90,                                                      
                 }                                                                   
              },                                                                      
             label:'$label',
             tickInterval:'86400000',
         },
         yaxis:{                                                                     
            tickOptions:{
               formatString:'%.2f',                                                
             },                                                                      
           autoscale:true                                                          
         }, 
    },                                                                              
     highlighter:{ 
         show:true,                                                                  
    },

But I find the width of each bar is too large to cover each other. How to fix it?

Thanks!

score 10 · Answer 1 · answered Mar 06 '13 at 12:01

10

You can specify it in your series options :

seriesDefault:{
   renderer: $.jqplot.BarRenderer,
   rendererOptions: {
      barWidth: 5
   }
}

Don't forget to include barRenderer plugins. For more documentations about bar chart on jqplot please take a look at : Jqplot documentation

answered Mar 06 '13 at 12:01

AnthonyLeGovic

2,335
1
13
22

Thanks for your answer. It works. But when the number of data points grows, I'm not sure the width is still suitable. I will calculate the width of the bar dynamically, but if there is a better way to adjust the chart for better display? – dusiliang Mar 07 '13 at 01:32

score 10 · Accepted Answer · edited May 23 '17 at 12:10

The AnthonyLeGovic answer is indeed correct, but if you need to change the column width according to the number of data points you can do the following:

// Get the size of the container of the plot
var width = jQuery(containerName).width();

// Divide by the number of data points.
width = width / number_of_data_points;

// Reduce the width to a % of the total for each data point.
width = (width * 20) / 100;

// Set the value
$.jqplot(containerName, [data],
{
    // whatever
    // ...

    seriesDefault:
    {
        renderer: $.jqplot.BarRenderer,
        rendererOptions: { barWidth: width }
    }

    // whatever
    // ...
}

Note that I'm not taking into account the width of the legend. The legend width can only be obtained after plotting, so if you want to reduce the column width considering even the width of the legend you must do it after plotting, and then replot.

I've prepared a fiddle that shows an example.

Hope it helps.

score 2 · Answer 3 · edited Jul 03 '14 at 05:51

2

I added below code and I got the result. The reason behind my width was coming too large because of bar-width were not set in series Default block.

 seriesDefault:{
   renderer: $.jqplot.BarRenderer,   
   rendererOptions: {
          barWidth: 5   
  }
}

Thanks to :AnthonyLeGovic

edited Jul 03 '14 at 05:51

Nandu

3,076
8
34
51

answered Jan 14 '14 at 12:35

user2282645

51
1
6

too large bar width in jqplot

3 Answers3