How to show the last value in the x-axis labels

[ttaylor797]

Hello,

 

 

I am trying to make sure that the very last x-axis label is displayed for the chart at point 'B' (see attached chart). That last date should be "31 Jan 2013, 23:59" and a value of 22.2031, and that value is what is shown in the chart.

 

The second screenshot shows the javascript console dump of the labels array with the 'showlabel' property set and the last 5 labels. I did turn off the chart's showLabels, so I can have some control over what labels are seen.

 

In the example, I have set the showlabel property set for all but the middle 50 labels because I wanted to demonstrate that setting that option works for individual label values.

 

I have tested other charts and data, and consistently the last 4 labels are not rendered. Even if I exclude all but the last 5, the last four are not rendered, only the label for point 'A' ("29 Jan 2013, 23:00") is.

 

Does anyone have any ideas about what I can do?

Edited March 21, 2014 by ttaylor797

[Bindhu]

Hi,

 

This happens due to label management done automatically by FusionCharts XT to avoid clumsiness.

 

Try using 'labelStep' attribute to suit your requirement along with 'labelDisplay' and 'rotateLabels' attributes set to 'ROTATE' and '1' respectively.

 

Hope this helps!

[ttaylor797]

Thank you for the quick reply. I have tried setting the labelStep attribute to get the last label to show and have had some success.

 

However the length of the dataset can vary widely, so I guess my only option is to dynamically calculate the value used for that attribute. It would be great if there was a way to request the Chart rendering engine to show that last label without extra effort

 

Also, we are supposed to be using PowerCharts XT, but when I checked the version in the FusionCharts.js file, I see:

@version fusioncharts/3.3.1-sr3.21100

 

... Is that correct?

Edited March 24, 2014 by ttaylor797

[ttaylor797]

The charts are expected to render in wide range of screen sizes, so....

 

How can I tell what the width of the SVG chart object will be? I could use that to calculate the correct value for the labelStep attribute and consistently show that last date.

[Bindhu]

Hi,

 

Please use the logic below,

var myChart = new FusionCharts("Charts/Column3D.swf", "myChartId", "100%", "100%", "0", "1" );
       myChart.setXMLUrl('Data.xml');
       myChart.render("chartContainer");

       var chartWidth;
        myChart.addEventListener ( "DrawComplete", function (evt, args) {
               chartWidth = args.width; // use this width and calculate the label step value
         }
        );

        function FC_Rendered(DOMId){
        var chartReference = FusionCharts( "myChartId" ); 
        chartReference.setChartAttribute ( "labelStep" , "1" );     // set the calculated labelStep value here
  }

Hope this helps!

[ttaylor797]

That indeed helps. Thank you!

[Bindhu]

Happy FusionCharting

[ttaylor797]

After my initial enthusiasm, I have to abandon my effort here. For a web page with one chart, using the suggested solution seems fine; however, I am using Power Charts to render a multi-page report that contains many charts, and the performance hit is too great.

 

Feature Request:

I would prefer if there was a configuration option to pass to the FC rendering methods to set the labels that need to appear in the chart. Something like an array of integers that refer to the index for each label to be included in the axis labels could be ideal. Please consider this as a feature request for future versions. Usage would look like this: 

chartReference.setChartAttribute ( "highlightLabels" , [1, 5, 10, 25, 55]);

That way a developer would be able to set those values before sending the dataset to FC.