Jump to content

Additional Chart Frame formatting (specifically the x axis labels)


Ryan_B

Recommended Posts

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:

original.JPG.ff67c1d6f90559ca8eff1e272b55900a.JPG

 

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.

validation.JPG.4cf1ead464a506d09d6151e55ee0340a.JPG

 

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:

documentation.JPG.bd82ceeb1c3c055273746d1660c06181.JPG

The results:

documentationResults.JPG.fe5c77b7ef70b00fd99945dc08d4d518.JPG

 

 

Does anybody have any ideas on what to try next?

Link to comment
Share on other sites

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>");

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...