Additional Chart Frame formatting (specifically the x axis labels)

[Ryan_B]

How much control do you have with the formatting of the x and y axis labels on a bar chart?

 

I have built a bar chart using the following:

var str = '';

str += '<row type="header">';
str += '<cell><cell>Jan'+"$"+Field("JanTotal")+'<cell>Feb'+"$"+Field("FebTotal")+'<cell>Mar'+"$"+Field("MarTotal")+'<cell>Apr'+"$"+Field("AprTotal")+'<cell>May'+"$"+Field("MayTotal")+
      '<cell>June'+"$"+Field("JunTotal")+'<cell>July'+"$"+Field("JulTotal")+'<cell>Aug'+"$"+Field("AugTotal")+'<cell>Sep'+"$"+Field("SepTotal")+'<cell>Oct'+"$"+Field("OctTotal")+
      '<cell>Nov'+"$"+Field("NovTotal")+'<cell>Dec'+"$"+Field("DecTotal");

str += '<row>';
str += '<cell><cell>'+Field("JanTotal")+'<cell>'+Field("FebTotal")+'<cell>'+Field("MarTotal")+'<cell>'+Field("AprTotal")+'<cell>'+Field("MayTotal")+'<cell>'+Field("JunTotal")+'<cell>'+
      Field("JulTotal")+'<cell>'+Field("AugTotal")+'<cell>'+Field("SepTotal")+'<cell>'+Field("OctTotal")+'<cell>'+Field("NovTotal")+'<cell>'+Field("DecTotal");

return str;

Which returns this:

 

As you can see, the category (x) axis labels are not displaying in any sort of consistent format. What I'd like to display is the month with the amount spent beneath it.

 

I have tried the following, to no avail:

'<cell><cell>Jan<br>'+"$"+Field("JanTotal")

'<cell><cell>Jan<br/>'+"$"+Field("JanTotal")

'<cell><cell>Jan<p>'+"$"+Field("JanTotal")

'<cell><cell>Jan'+'<p>'+"$"+Field("JanTotal")

'<cell><cell>Jan\n'+"$"+Field("JanTotal")

 

When validating the rule in the editor, it would appear that my desired results will be returned, however that is not the case.

 

According to page 29 in the TagsRefGuide, (I realize this is for a table, but I would think it'd be the same concept for charts) the <br> should work.

Their example:

The results:

 

 

Does anybody have any ideas on what to try next?

[Dan Korn]

This seems to work for me if I put a space between the month name and the dollar sign. If that doesn't work for you, can you post the template?

[Ryan_B]

Which one did you use? <br>? \n?

[Ryan_B]

Or did you mean an actual space like:

'<cell><cell>Jan'+"$"+" "+Field("JanTotal")

[Dan Korn]

Or did you mean an actual space like:

'<cell><cell>Jan'+"$"+" "+Field("JanTotal")

 

Yes, I mean an actual space, BEFORE the dollar sign:

'<cell><cell>Jan'+" $"+Field("JanTotal")

[Dan Korn]

Or you could just do this:

var headerRow = [], dataRow = [];
for (var m = 1; m <= 12; m++)
{
   var month = Left(MONTH_NAMES["English"][m-1], 3);
   row.push(month + " $" + Field(month + "Total"));
   dataRow.push(Field(month + "Total"));
}

return '<row type=header>\n<cell>\n<cell>' + headerRow.join("\n<cell>") +
       '\n\n<row>\n<cell>\n<cell>' + dataRow.join("\n<cell>");

[Ryan_B]

Hey Dan

 

I've zipped up and attached the template and a handful of records from the data file for you to take a look at. When you open and preview the template, pg 5 ("TE") is where the bar chart in question is. You will see that the first two records still do not format properly. Records three and four are formatted properly, but only because the monthly amount spent is long enough to force it to the next line. The name of the rule that builds the chart is simply called Bar Chart.

 

My original plan for displaying the monthly dollar amount spent is on pg 4 ("PLCC"). Changing the field "Type" in the data file to "PLCC" will display why that won't work for me. If a customer spends $1000 or more, the y axis label grows, thus pushing the x axis labels to the right, and making my text frames overlap the labels. You can see what I'm talking about on record #2.

 

FP_Forum.zip

[Ryan_B]

Hey Dan.

 

Any luck with this?

[Dan Korn]

Okay, thanks for attaching the job. I see what's going on. Almost all text attributes, such as tags and entities, are ignored when putting down the chart axis labels. So things like <br> tags get stripped out, and multiple spaces, even   entities, get collapsed.

 

I did come up with a way to get the output you want. Basically, we need to insert some kind of invisible character (but not a regular space) to "pad out" the space between the month name and the amount, to force the amount to always be wrapped onto the next line. I tried several characters, and finally settled on a Unicode full-width filler character, 0xFFA0.

 

So, what we need to do is iterate through all of the values, find the longest one, and pad out all of them to the same length, with that invisible character. This is what I came up with:

var values = [];
for (var m = 1; m <= 12; m++)
{
   var month = Left(MONTH_NAMES["English"][m-1], 3);
   values.push(Field(month + "Total"));
}

var longest = values.sort(function (a, b) { return b.length - a.length; })[0];
var longlength = longest.length + 1; // add one for the dollar sign
var pad = new Array(longlength).join(' ');

var headerRow = [], dataRow = [];
for (var m = 1; m <= 12; m++)
{
   var month = Left(MONTH_NAMES["English"][m-1], 3);
   headerRow.push(month + " " + Right(pad + "$" + Field(month + "Total"), longlength).replace(/\s/g, Chr(0xFFA0)));
   dataRow.push(Field(month + "Total"));
}

return '<row type=header>\n<cell>\n<cell>' + headerRow.join("\n<cell>") +
       '\n\n<row>\n<cell>\n<cell>' + dataRow.join("\n<cell>");

Note that you'll need to go into the Chart Properties dialog and switch the font for the Axis Labels to a font that supports that 0xFFA0 Unicode character, so that you don't just get a box for an undefined character in the output. I suggest Arial Unicode MS.