Bar Chart - how to control positioning of major tick marks and width of bars

I'm trying to create a series of bar charts in BDPro that will comparitively display the same data for 4 different customers. The only possible category values for the x-axis are the numbers 1-9. I always want to see the numbers 1-9 across the x-axis; I want their spacing to be consistent; I want the width of the bars to remain fixed.
 
In execution, I get a a chart that may or may not display 1,2,3,4,5,6,7,8,9 across the x-axis. Depending upon the which and how many of the categories have a y series values, I sometimes see 0,2,4,6,10. To fix this, I used beforeRendering function to set the tick positions using "options.xAxis.tickPositions=[1,2,3,4,5,6,7,8,9]. Great! this worked. I now see 1,2,3,4,5,6,7,8,9 across the x-axis on all four charts, regardless off which categories have a value. However, the relative spacing between the tick marks and the starting position of the first tick mark, relative to the y-axis will vastly change depending upon how many of the categories have values to plot, In addition, the bar widths also vary widely.
 
thanks,
Keith

Find more posts tagged with

Comments

Clement Wong

Keith,
 
If I understand your requirements correctly, you can repopulate the data in the HTML5 chart and pad those missing X-axis categories with 0 (zeroes).
 
Attached is a sample. The script is in the beforeGeneration:
<pre class="_prettyXprint">
beforeGeneration: function(options)
{
// Save the current data set
//
var newDataPointArray = [];
var categoryCounter = 0;

for (var i=0; i<9; i++) {
if (options.xAxis.categories[categoryCounter] == i+1) {
newDataPointArray.push(options.series[0].data[categoryCounter]);
categoryCounter++;
}
else {
newDataPointArray.push(0);
}
}

// Clear out the data
//
options.xAxis.categories = [];
options.series[0].data = [];

// Repopulate the data
//
for (var i=0; i<9; i++) {
options.xAxis.categories.push(i+1);
options.series[0].data.push(newDataPointArray[i]);
}

},
</pre>

kbpeavey

Thank you Clement,
 
That works as advertised, until I try to implement optional y-series grouping. I apologize for forgetting to mention that I was using it. When y-series grouping is used, things appear to fall apart. I still get the 1-9, but the series get lost and nothing graphs nearly correct.
 
Keith

kbpeavey

Using Clement's sample code, I finally sorted this one by adding a few lines to it. It's late and I have to go. I will post my solution within the next 24 hours. Thanks to all.
 
Keith

kbpeavey

Clement's code was exactly the answer for my original request. Unfortunately, I forgot to mention that I was also using optional y-series grouping while trying to consistently display all my categories that had no values. After much trial and error, I figured out how to add a few simple lines to recursively step through each series. Addditionally, the entire code needs to be nested inside a validation check to ensure the chart has data, otherwise, it will crash the entire report.
 
Unfortunately, I am not permitted by my SA to post the rptdesign file. Here is a hand-poked copy of my modified version of Clement's previously posted example. I apologize if there are any typos.
<pre class="_prettyXprint _lang-js">
beforeGeneration: function(options)
{
// must check that chart has data, otherwise this will crash the entire report
var hasData = options.xAxis.categories;
if (options.xAxis.categories)
{

// make copies of category and series arrays to use inside 'for' loop
var newCategoryArray = options.xAxis.categories;
var newSeriesArray = options.series;

// clear the category array, we'll repopulate later
options.xAxis.categories = [];

// need to know how many series to process
var seriesLen = options.series.length;

// my chart needs to display the categories 1-9 on the x-axis
var categoryLen = 9

// process each series
for (var j = 0; j < seriesLen; j++)
{
var newDataPointArray = [];
var categoryCounter = 0;

// for each series, iterate across the categories, replacing null values with 0
for (var i = 0; i < categoryLen; i++)
{
if (options.xAxis.categories[categoryCounter] == i+1)
{
newDataPointArray.push(options.series[j].data[categoryCounter]);
categoryCounter++;
}
else
{
newDataPointArray.push(0);
}
}

// Clear out the series data
options.series[j].data = [];

// Repopulate the data
for (var i = 0; i < categoryLen; i++)
{
options.xAxis.categories.push(i+1);
options.series[j].data.push(newDataPointArray[i]);
}
}
}
},
</pre>
. Thanks again to Clement.