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; } } }

How to show few month values on graph with 12 month time line

vraaijmakers

Hi, we designed a graph for our customer that shows values of a year.
So the x-axis displays the 12 months.
 
We currently have only values for the month of jan and feb, so after that the graph drops to 0.
Question we got is, to just stop displaying values after February.
 
Is that possible?

Find more posts tagged with

Comments

JFreeman

It looks like you have two series on this chart.
Does the other series contain data for all 12 months?

vraaijmakers

Hi Jesse, yes it does.

JFreeman

Thank you for the confirmation.
 
Which version of BIRT are you using?
What type of chart are you using (SVG, PNG, HTML, etc)?
 
Is it possible for you to attach a sample report with a flat file data source that we can run to replicate the issue?

vraaijmakers

Hi Jesse, I can send you the report, however it will take me some time to create a data model.
Report is very complex using multiple sources (Excel, mySQL, SQLServer)
 
Not sure if I understand your type of Graph question, this is just the graph selection from the palette.
 
 
This is what I use on the mac:
Actuate BIRT Designer Professional 
Version: 4.4.0
Build id: v20150206

JFreeman

Thank you for the confirmation on your BIRT Version.
 
Regarding the chart type, on the first page of the chart builder dialogue after adding it to the report, there is a drop down to select the chart type, labeled as Output Format. In the version you are using the choices are: HTML, PNG, JPG, BMP, and SVG.
 
The default type in the version you are using with be HTML.
 
Please let which format you are using. I think what you want to accomplish should be possible through some scripting and the scripting needed will be different depending on the format you are using.

vraaijmakers

Ah I see, thanks. Yes it is set to HTML5.

JFreeman

With an HTML5 chart, you can use javascript in the afterRendering of the chart scripts to trim the first series that has data points at 0 and then trim the second series to align with the first series.
 
For example:
<pre class="_prettyXprint _lang-js">
afterRendering: function(chart)
{
function trimFirstSeries(){
var pointNumber = chart.getCore().series[0].data.length;
var pointsToRemove = []
var count = 0;

for(var i=0; i<pointNumber; i++){
var point = chart.getCore().series[0].data[i];
if(point.y == 0){
pointsToRemove[count] = i;
count++;
}
}

for(var x=(count-1); x>=0; x--){
if(x == 0){
//Rerender chart on the last point to be removed.
chart.getCore().series[0].data[pointsToRemove[x]].remove(true);
}else{
//Do not rerender chart yet.
chart.getCore().series[0].data[pointsToRemove[x]].remove(false);
}
}
return chart.getCore().series[0].data.length;
}

function alignSecondSeries(firstSeriesLength){
var secondSeriesLength = chart.getCore().series[1].data.length;
for(var i=(secondSeriesLength-1); i>=firstSeriesLength; i--){
if(i == (firstSeriesLength)){
chart.getCore().series[1].data[i].remove(true);
}else{
chart.getCore().series[1].data[i].remove(false);
}
}
}

var newSeriesLength = trimFirstSeries();
alignSecondSeries(newSeriesLength);
},
</pre>
<div> 
</div>
<div>Take a look at the attached example for reference. I have created two charts. One with the code to trim the x axis and one without to illustrate the change.</div>

vraaijmakers

Hi Jesse, thanks for the script! Initially I thought the script was working but then I realized that the data you use is not 100% of what I have.
When I change the data in your expel I get only the lines for the months that have value.
 
Something you can fix you think?
 
So my data looks like this:
 
mon val1 val2
1.00 75 40
2.00 35 40
3.00 0 0
4.00 0 0
5.00 0 0
6.00 0 0
7.00 0 0
8.00 0 0
9.00 0 0
10.00 0 0
11.00 0 0
12.00 0 0

vraaijmakers

Jesse, sorry I realized this morning that your script should actually work. My data looks kind the same as your example. Will investigate and let you know.

JFreeman

Alright, let me know if you have additional questions.

vraaijmakers

Jesse,I'm not sure how your example worked in your environment, but if I run it, the HTML only shows month 1 and 2 on the x-axis.
I would expect to see the values for
 
val1: months 1-2 and
val2: months 1-12
 
Correct?
 
Vincent

JFreeman

I think I misunderstood your requirement.
 
I was thinking you wanted to trim the entire chart to only show months where the both series had data.
 
If you only want to trim the first series and leave the second series to display all 12 months, remove the function "alignSecondSeries" and then only call the first function "trimFirstSeries".
 
Something like:
<pre class="_prettyXprint _lang-js">
afterRendering: function(chart)
{
function trimFirstSeries(){
var pointNumber = chart.getCore().series[0].data.length;
var pointsToRemove = []
var count = 0;

for(var i=0; i<pointNumber; i++){
var point = chart.getCore().series[0].data[i];
if(point.y == 0){
pointsToRemove[count] = i;
count++;
}
}

for(var x=(count-1); x>=0; x--){
if(x == 0){
//Rerender chart on the last point to be removed.
chart.getCore().series[0].data[pointsToRemove[x]].remove(true);
}else{
//Do not rerender chart yet.
chart.getCore().series[0].data[pointsToRemove[x]].remove(false);
}
}
}

trimFirstSeries();
},
</pre>

vraaijmakers

Bingo! Thank you so much, this is exactly what I was looking for!
 
Very much appreciated!!

JFreeman

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