nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Bar Chart category series labels change

rajkishore

Hi,
 
I have created a bar chart with one year data, grouped by weeks and it is working fine. But the problem with BIRT is that it groups the data on chart by Calendar week and not by fiscal week. So even if the data is from 5-Jan-2013, it shows the first label as 30-Dec-2012 (as shown in the attached Chart), as it is the starting date of the week. Instead of that, I would like to display 5-Jan-2013. 
 
I think there is no direct way of achieving this. So, I am planning to change the label dynamically. Can someone help me with a sample of doing this. Or is there a better way of doing this, that I am missing here.
 
To reproduce this issue i have created sample report , please find it in attachments.
 
Regards
Kishore

Find more posts tagged with

Comments

JFreeman

You can call the formatter for the axis labels in the beforeDrawAxis function of the client scripts and use javascript to modify the date as needed.

For Example:
<pre class="_prettyXprint _lang-js">
beforeDrawAxis: function(axis, axisOptions, chart, axisIndex)
{
if(axis.isXAxis){
axisOptions.labels.formatter = function() {
var m_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var currentDate = new Date(this.value);
var newDate = new Date(currentDate);
newDate.setDate(currentDate.getDate() + 7);
var newDateInt = newDate.getDate();
var newDateMonth = newDate.getMonth();
var newDateYear = newDate.getFullYear();
var newDateString = newDateInt + "-" + m_names[newDateMonth] + "-" + newDateYear;
return newDateString;
}
}
},
</pre>
Take a look at the attached modified version of your sample for reference.

rajkishore

Hi JFreeman,
 
Thanks for your suggestions, I just modified the report to give more clarity. I just created two parameters start and end date. For a given selected dates it should display labels. for ex: start and end dates are jan 3 2013 and march 28 2013. The chart must be display first label as 3-January-2013 and last label as 28-March-2013 and in between the label should not change.
<blockquote class="ipsBlockquote" data-author="JFreeman" data-cid="134117" data-time="1425315050">
<div>
You can call the formatter for the axis labels in the beforeDrawAxis function of the client scripts and use javascript to modify the date as needed.
For Example:
<pre class="_prettyXprint _lang-js">
beforeDrawAxis: function(axis, axisOptions, chart, axisIndex)
{
if(axis.isXAxis){
axisOptions.labels.formatter = function() {
var m_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var currentDate = new Date(this.value);
var newDate = new Date(currentDate);
newDate.setDate(currentDate.getDate() + 7);
var newDateInt = newDate.getDate();
var newDateMonth = newDate.getMonth();
var newDateYear = newDate.getFullYear();
var newDateString = newDateInt + "-" + m_names[newDateMonth] + "-" + newDateYear;
return newDateString;
}
}
},
</pre>
Take a look at the attached modified version of your sample for reference.
</div>
</blockquote>
 
Regards
Kishore

rajkishore

Hi JFreeman,
 
Why i am looking this is , especially when running one year date 1st jan to 31st dec, it is displaying the week start date as previous year label. Lets consider 2nd jan i selected as start date it is displaying 28-December-2014, since the report is grouped by weeks.
 
Regards
Kishore G

JFreeman

You can use the same base code that I provided earlier to modify the x-axis labels as desired and you can pass the report parameters into browser window parameters in the load script of the chart area. You will then just need to perform some logic to only change the first and last bars on the chart based on the parameters provided.
 
For Example:
Chart Area Load Script:
<pre class="_prettyXprint _lang-js">
window.startDate = params["StartDate"].value;
window.endDate = params["EndDate"].value;
</pre>
Client Script:
<pre class="_prettyXprint _lang-js">
beforeDrawAxis: function(axis, axisOptions, chart, axisIndex)
{
if(axis.isXAxis){
axisOptions.labels.formatter = function() {
var newDate;
if(this.value == axis.categories[0]){
newDate = formatDate(window.startDate);
}else if(this.value == axis.categories[(axis.categories.length -1)]){
newDate = formatDate(window.endDate);
}else{
newDate = formatDate(this.value);
}
return newDate;
}
}

function formatDate(dateToFormat){
var currentDate = new Date(dateToFormat);
var monthNames = new Array("Jan", "Feb", "Mar", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec");
var newDate = new Date(currentDate);
newDate.setDate(currentDate.getDate() + 1);
var newDateInt = newDate.getDate();
var newDateMonth = newDate.getMonth();
var newDateYear = newDate.getFullYear();
var newDateString = newDateInt + "-" + monthNames[newDateMonth] + "-" + newDateYear;
console.log(newDateString);
return newDateString;
}
},
</pre>
Take a look at the modified version of the new sample for reference.

rajkishore

I have modified accordingly, it is working as expected.Thanks Jfreeman

JFreeman

I'm glad I could be of assistance.
Let us know if you have additional questions.

rajkishore

Hi. 
could you please pick this one. 
<a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/topic/36270-days-grouping-to-the-given-interval-dates/i'>http://developer.actuate.com/community/forum/index.php?/topic/36270-days-grouping-to-the-given-interval-dates/i</a> 
can you please pick this one. 
Regards 
Kishore G