Population CHart

[Meuh]

Hello,

 

I would like to create a population chart like this :

 

 

For the moment im using a StackedBar2D ,  2 bar series one with negative value stacked. 

But the probleme is that my label on chart and label on Axis are with negative value. Is it possible to format the label with an Absolute function ? 

 

 

[Bindhu]

Hi,

 

Please try using displayValue attribute to display the values and please use trend lines to display axis values.

 

Example:

<chart caption='Company Revenue' xAxisName='Month' yAxisName='Revenue' showYAxisValues='0' numDivLines='0'>

   <categories>
      <category label='Jan' />
      <category label='Feb' />
      <category label='Mar' />
      <category label='Apr' />
      <category label='May' />
   </categories>

   <dataset seriesName='Product A'>
      <set value='20800' />
      <set value='25800' />
      <set value='30400' />
      <set value='40400' />
      <set value='50400' />      
   </dataset>

   <dataset seriesName='Product B'>
      <set value='-20800' displayValue='20.8k'/>
      <set value='-25800' displayValue='25.8k'/>
      <set value='-30400' displayValue='30.4k'/>
      <set value='-40400' displayValue='40.4k'/>
      <set value='-50400' displayValue='50.4k'/>
   </dataset>

   <trendLines >
      <line startValue='0' displayValue='0' />

      <line startValue='20000' displayValue='20k' />
      <line startValue='40000' displayValue='40k' />
      <line startValue='60000' displayValue='60k' />

      <line startValue='-20000' displayValue='20k' />
      <line startValue='-40000' displayValue='40k' />
      <line startValue='-60000' displayValue='60k' />
   
   </trendLines>   

</chart> 

Please find attached screen shot of the chart rendered using the above XML.

 

Hope this helps!

[Meuh]

Thanks you for your answer. 

 

It's perfectly what i was looking for

[Bindhu]

Hi,

 

I am glad it helps!

 

Happy FusionCharting

[QassiMona]

Hello 

 

i just created this chart 

but i don't get the bars at the same line

they appear one up and the other down

 

 

how can i make them in one line like the attached Thumbnails for bindhu please?

 

 

 

this is how my chart looks

http://imgur.com/a/lRRCq

Edited December 14, 2016 by QassiMona

[Prerana]

Hello,

 

Thanks for the query.

 

Please use the stackedbar2d chart instead of bar chart.

 

Kindly refer the fiddle link below for the implementation.

http://jsfiddle.net/Prerana/rdzp6kco/6/

 

Hope this helps,

[QassiMona]

thanks it works 

[QassiMona]

why i cannot place values outside with ?

 

 

"placeValuesInside": "0"

 

 

how can i place them outside the bars?

[Prerana]

Hello,

 

The attribute "placeValuesInside" is not supported by stacked bar chart type.

As it is a stacked chart type, ie one plot will come over another plot, so placing value out side won't be a good visualisation.

 

You can show value inside the plot, by setting the attribute "showValues" as 1 at the chart level.

 

In your case, you can use text annotation, as the plots are in opposite direction.

 

Using text annotations, you can add notes, labels, or any other contextual text information that you may want to make available inside the chart at any position.

 

For more detatils about annotation, please refer the Fusioncharts documentation links given below. 

http://www.fusioncharts.com/dev/advanced-chart-configurations/annotations/introduction.html

 

http://www.fusioncharts.com/dev/advanced-chart-configurations/annotations/creating-annotations/creating-text-annotations.html

 

Kindly refer the fiddle below for the implementation.

http://jsfiddle.net/Prerana/rdzp6kco/8/

 

Hope this helps,