Can be the bar chart columns width modified?

Submitted by kyheo on Mon, 08/25/2008 - 23:35.

I'm using the charting schema to show statistics about data from a postgres sql database. I'm using the stacked bar chart to show free and used ports on different machines.
I've done some testing and can't figure out how to change the graph bar width. I want to do this because I don't know how many results I'll be displaying, but when showing a few (1, 2 or 3) with a chart width of 720 pixels I'm getting huge columns that makes the chart look pretty ugly.

This is the code that I've, copied from the dojox/charting/tests/test_event2d.html file. Note that both chart3.addSeries only have 1 value in the value array.

The javascript code:

dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.themes.PlotKit.green");

dojo.require("dojox.charting.action2d.Highlight");
dojo.require("dojox.charting.action2d.Magnify");
dojo.require("dojox.charting.action2d.MoveSlice");
dojo.require("dojox.charting.action2d.Shake");
dojo.require("dojox.charting.action2d.Tooltip");

dojo.require("dojox.charting.widget.Legend");

dojo.require("dojo.colors");
dojo.require("dojo.fx.easing");

var dc = dojox.charting;
makeObjects = function(){

var chart3 = new dc.Chart2D("test3");
chart3.setTheme(dc.themes.PlotKit.green);
chart3.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true});
chart3.addPlot("default", {type: "Columns", gap: 2});
chart3.addSeries("Series A", [1], {stroke: {color: "black"}, fill: "red"});
chart3.addSeries("Series B", [5], {stroke: {color: "black"}, fill: "blue"});
var anim3a = new dc.action2d.Highlight(chart3, "default");
var anim3b = new dc.action2d.Tooltip(chart3, "default");
chart3.render();
var legend3 = new dojox.charting.widget.Legend({chart: chart3, horizontal: false}, "legend3");
};

dojo.addOnLoad(makeObjects);

And the HTML code:

3: Columns with gaps beetwen them, vertical axis aligned on major ticks, custom strokes, fills. Actions: Highlight, Tooltip.
<div id="test3" style="width: 400px; height: 200px;"></div>
<div id="legend3"></div>

Any help or tip I'll be thankful.

Login or register to post comments
Subscribe post

There is no direct parameter

Submitted by eugene on Tue, 08/26/2008 - 18:51.

There is no direct parameter to set bar/column width, but you can affect it by specifying "gap" between bars/columns. It is a numeric property in pixels, just set it big enough to reduce the width of bars when you show small number of data items, and change it accordingly when you show a lot of them. Take a look at http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/... to see how can be used.

Fill the chart with empty values will work too

Submitted by kyheo on Wed, 08/27/2008 - 12:19.

Well, I tried that, and also try adding empty values to the series and setting the xLabels to blank, both of this methods works, the things is that I was looking for a direct method/parameter to do that. I'll keep up using the empty value solution for now.

Thanks Eugene!

Search