4 Newbie questions..

[wouwenaar]

Hi,

I haven't used FusionCharts before so I ran into some problems. I have attached a screenshot of how the chart should look in the end and a screenshot of My-Chart.

In the designers-screenshot I have translated a couple of words to English so that looks ugly, sorry, and you can forget about the grey lightbox as well.

At the end I have included the xml

I'm using the MSColumn2d.swf

I'm pretty far but I have still a couple of problems that I have to tackle. Hope somebody can point me in the right direction.. (if you know the answer to only one questions, please respond!)

1. How can I draw the X and the Y axis in this configuration?

2. Is it possible to use formatscale='0' next to the Y-axis and use the the abbreviated format above the columns?

3. How can I put the column-pairs closer to each other?

4. As you can see the grey columns are gradient from light to dark, the yellow ones visa versa, can this be accomplished?

5. My last question: is it possible to display the Competitors (grey) columns first and when they are finished the yellow columns?

Screenshot designer chart:

Screenshot My-Chart:

My XML:

<chart showLegend='1' legendPosition='Right'  legendBorderColor='FFFFFF'  legendShadow='0' showYAxisValues='1' 

divLineColor='FFFFFF' alternateHGridColor='FFFFFF' bgColor='FFFFFF' showBorder='0' canvasbgColor='FFFFFF' 

canvasBorderColor='FFFFFF'  showPlotBorder='0' numberPrefix='

[Guest Rajroop]

Hello Sebastian,

 

 

 

The solutions to your queries are as follows:

 

 

 

1. How can I draw the X and the Y axis in this configuration?

 

 

 

>>>It is possible to replicate the X and Y axis configuration using FusionCharts.

 

 

 

You can configure the Y-axis values as the example provided by setting the number of div lines of the chart correctly. The following attributes will bring the desired effect on the Y-axis:

 

 

 

<charty.....AxisMinValue='10000' yAxisMaxValue='350000' adjustDiv='0' numDivLines='7'....>

 

 

 

Also, FusionCharts allows you to add a prefix or suffix to all numbers on the chart. The attributes are:

 

 

 

numberPrefix="$": Using this attribute, you could add prefix to all the numbers visible on the graph. For example, to represent all dollars figure on the chart, you could specify this attribute to ' $' to show like $40000, $50000.

 

 

 

numberSuffix="p.a" : Using this attribute, you could add a suffix to all the numbers visible on the graph. For example, to represent all figure quantified as per annum on the chart, you could specify this attribute to ' /a' to show like 40000/a, 50000/a.

 

 

 

Each <category> element represents an x-axis data label. Thereby, using this element you'll be able to configure the X-axis labels.

 

 

 

 

 

2. Is it possible to use formatscale='0' next to the Y-axis and use the the abbreviated format above the columns?

 

 

 

>>>Yes. FusionCharts allows you to specify custom string values instead of the numeric data values for each data item. This can be done by using the displayValue attribute in the <set> element in which you'd want the custom value to be displayed.

 

 

 

For example: <set label='David' value='42300' displayValue='Yearly best'/>

 

 

 

3. How can I put the column-pairs closer to each other?

 

 

 

>>>On a column chart, there is spacing defined between two columns. By default, the spacing is set to 20% of canvas width. If you intend to increase or decrease the spacing between columns(or in your case pull the pair together) you can do so using this attribute.

 

 

 

For example, if you wanted all columns to stick to each other without any space in between, you can set plotSpacePercent to 0. Similarly, if you want very thin columns, you can set plotSpacePercent to its max value of 80. :hehe:

 

 

 

4. As you can see the grey columns are gradient from light to dark, the yellow ones visa versa, can this be accomplished?

 

 

 

>>>Yes, this is possible using FusionCharts. This <color&gt; attribute sets the color using which columns, lines, area of that data-set would be drawn. For column chart, you can specify a list of comma separated hex codes to get a gradient plot.

 

 

 

5. My last question: is it possible to display the Competitors (grey) columns first and when they are finished the yellow columns?

 

 

 

>>>Yes, this too is possible using FusionCharts.

 

 

 

You have to use a workaround to achieve this, though. This will be possible using a Column 2D chart. We can have a series of cloumns on a chart, having a missing dataset in between. The columns prior to that missing dataset can have grey Hex color and the columns after the missing dataset can have the yellow Hex color code. Thereby, you'll be accomplishing your required specification.

 

 

 

P.s: If you opt for this method, you would need to give blank values in the appropriate places while defining you data labels in the <categories> element.

 

 

 

I hope this helps :Wow:

[wouwenaar]

Hi Rajoop,

thank you for your quick response and your valuable answers. I got everything working now except for one thing and I think it is the most easy (I hope.. )

Question 1 is about drawing the X- and Y-axis. I think I didn't formulate my question clearly.

As you can see on the former screenshots, I have to create a chart without Divlines and Vdivlines, the canvas only has one x-line and one y-line. Is it possible just to create those two lines?

I have included a screenshot of the chart with the two lines I have to draw.. I hope you can help me.

Thanks in advance,

Sebastian

[Guest Rajroop]

Greetings Sebastian,

 

 

 

You are always welcome! Of course, it's easy!

 

 

 

To remove the vertical and horizontal division lines in the background of chart, could you set the divLineAlpha='0' and try again?

 

 

 

P.s. The attribute mentioned above has to be placed inside the <chart> element!

 

 

 

I hope this helps.

[wouwenaar]

Greetings Rajroop!

thanks again for your advice. But it does not produce the required result (yet)..

What I need is is halve of the lines of the setting: canvasBorderColor or something similar. As you can see on my screenshot of my former post, I only want to draw the X- and Y-axis, but with my current config they don't show up. (including all your tips, plus the last one (divLineAlpha='0'))

Here is my current config:

<chart showLegend='1' legendPosition='Right'  legendBorderColor='FFFFFF'  legendShadow='0' showYAxisValues='1' divLineAlpha='0'  alternateHGridColor='FFFFFF'  plotSpacePercent='30' bgColor='FFFFFF' showBorder='0' canvasbgColor='FFFFFF'  canvasBorderColor='FFFFFF'  showPlotBorder='0' numberPrefix='

[Guest Rajroop]

Hello,

 

 

 

I guess I was late in the realization of the actual point of your query. Apologies.

 

 

 

However, this will not be possible to implement in FusionCharts, as of now.

[wouwenaar]

Thanks for your input, Rajroop.

 

 

 

 

 

Regards,

 

 

 

Sebastian

[FusionCharts Support]