2

I have created a simple chart in coldfusion 10. For some reason the labels on Y-axis are too crowded. Granted they are long texts (not more than 100 characters though), they should still appear on single lines instead of wrapping. Here is the screen-shot:

<cfchart chartheight="1000" chartwidth="1000" showxgridlines="no" showygridlines="no" showborder="no" fontbold="no" fontitalic="no" show3d="no" rotated="no" sortxaxis="no" showlegend="no" showmarkers="no"  format="jpg" xaxistitle="Issues">
<cfchartseries type="horizontalbar" serieslabel="Survey Count"  >
<cfchartdata item="lwkencfkenklnr lknevfvfv ghthrtg y;l;lm;'m jkbjed lknl klnelvkn lknlknrweknn" value="10">
<cfchartdata item="lewfll; ;lmrtgbjweb vkn wkencfkenklnr lknevlknl klnelvkn lknlknrweknn wcwfewflfojewmlrm" value="20">
<cfchartdata item="efklnwkln lknkleng lwkencfkenefe klnr lknevlknl klnelvkn lknlknrweknn ewe" value="40">
<cfchartdata item="lkenglk klkn kjbghdchg lwk ewefrewf ncfkenklnr lknevlknl klnelvkn lknlknrweknn" value="10">
<cfchartdata item="lwkencfkenklnr lknevlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="60">
<cfchartdata item="lwkencfkenklnr lkneffvlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="80">
<cfchartdata item="lwkencfkenklnr lknevlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="50">
<cfchartdata item="lwkencfkenklnr lknevlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="5">
<cfchartdata item="lwkencfkenklnr lknevlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="100">
<cfchartdata item="lwkencfke btgnklnr lknevlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="20">
<cfchartdata item="lwkencfkenklnr lknevlvvrgr knl klnelvkn lknlknrweknn wcwfojewmlrm" value="10">
<cfchartdata item="lwkencfkenklnr lkneffvfg vlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="50">
<cfchartdata item="lwkffdfdf encfkenklnr lknevlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="60">
<cfchartdata item="lwkenc hy jujuyjj fkenklnr lknevlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="10">
<cfchartdata item="lwkencrfrf fkenklnr lknevlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="80">
<cfchartdata item="lwkencfrfrf  h thtt yyuyu kenklnr lknevlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="25">
<cfchartdata item="lwkencefef ferrgrg fkenklnr lknevlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="38">
<cfchartdata item="lwken hthththcfkenklnr lknevlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="2">
<cfchartdata item="jjkjkkjbjk lwkencfkeefefnklnr lknevlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="120">
<cfchartdata item=";l;m;';' frfegtgrt tgt kencfkenklnr lknevlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="12">
<cfchartdata item="knklnknk lknlkne lknklnewf lwkencfkenklnr lknevlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="55">
<cfchartdata item="el;mvlml ;lmlmll ';,;lwkencfkenklnr lknevlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="88">
<cfchartdata item="lwkg;lm;l ';,;' nkneknfv encfkenklnr lknevlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="6">
<cfchartdata item="knklnekgn klnqd legegwkeeg ncfkenklnr lknevlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="10">
<cfchartdata item="lwgerg;,e;' ';,hytlhmwjkbfh kjkencfkenklnr lknevlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="25">
<cfchartdata item="lwkencfkenfwekfnwkln  knklnklnd l;ml;fklnr lknevlknl klnelvkn lknlknrweknn wcwfojewmlrm" value="150">
</cfchartseries>

enter image description here Thanks.

Aamir
  • 791
  • 3
  • 15
  • 28
  • 1
    Pls provide the code to replicate this so we've got something to work with. Reading: http://cfmlblog.adamcameron.me/2013/09/short-self-contained-correct-compilable.html – Adam Cameron Oct 03 '13 at 05:40
  • I tried it earlier, but it wont show up. Had to remove the first angle bracket to make it work. – Aamir Oct 03 '13 at 05:47
  • you can try with increasing the chart width – shemy Oct 03 '13 at 06:34
  • did that too at various width settings. Currently it is at 1000. – Aamir Oct 03 '13 at 06:39
  • 1
    Aamir, read the link, and actually take it in. Just providing the *code* is no good if it relies on external data to demonstrate your issue. Give us a SSCCE. – Adam Cameron Oct 03 '13 at 07:57
  • Also, read http://stackoverflow.com/editing-help for how to format code (and messages in general). – Peter Boughton Oct 03 '13 at 08:41
  • The problem is you are using `cfhart`. Download ZingChart - http://www.zingchart.com/ - and use that instead. It is actually easier to use than `cfchart` and gives you much finer control over the look and feel of the charts, as well as support for more chart types. – Scott Stroz Oct 03 '13 at 11:26
  • okay @AdamCameron I have updated the code and chart that you can also create on your side. Is there any way at least to show the Y-axis labels without wrapping. That will solve much of the problem. – Aamir Oct 03 '13 at 15:13
  • @ScottStroz thanks for informing about zingchart. I will check it out. – Aamir Oct 03 '13 at 15:13
  • Cheers Aamir. I think @ScottStroz is right: I've used both `` abnd ZingCharts, and the latter is easier to deal with. But I'll look at your CFML code this evening anyhow. – Adam Cameron Oct 03 '13 at 16:30
  • @Leigh got there first, Aamir. His answer is a good 'un (I just combined your code and his, and it works as you'd expect). – Adam Cameron Oct 03 '13 at 20:33

1 Answers1

6

CF10 uses multiple charting engines: ZingChart for format="html" and WebCharts3D for all other formats ie "flash|jpg|png".

As mentioned, using ZingCharts directly would offer more control. However, to answer your question your current chart is generated with WebCharts3D. You can modify the chart's behavior by using a custom style. To disable wrapping use isMultiline="false". (See also the charting utility in {cfroot\charting\webcharts.bat}).

<cfsavecontent variable="customStyle"><?xml version="1.0" encoding="UTF-8"?>
<frameChart>
   <xAxis>
      <labelStyle isMultiline="false" isHideOverlapped="false" orientation="Horizontal"/>
   </xAxis>
</frameChart>
</cfsavecontent>

<cfchart style="#customStyle#" 
       chartheight="1000" 
       chartwidth="1000" ....>

</cfchart>
Leigh
  • 28,765
  • 10
  • 55
  • 103
  • Thank you. This solution works with the example I had posted, but not with the actual code I have that makes use of a query instead of cfchartdata. A blank chart is displayed instead with no bars. I know for sure that there is nothing wrong with the query because it does result into a nice looking chart except for the squished lables. If I get time I will create a new example making use of query and post it here. Thanks for now. – Aamir Oct 04 '13 at 04:39
  • @Aamir - I would be curious to see the new example. Webcharts does a lot of adjusting (automatically) to achieve what it *thinks* is the best fit for the given data and labels. It does not always get it right. There may be another setting you need to tweak ... or you may just need to set some limits on the text length. (Obviously it cannot be unlimited). But I would have to see an example to know for sure. – Leigh Oct 05 '13 at 04:29