How To Make The Linear Chart Color Look 3D

[Vedmack]

Hi

 

I want to create a linear gauge with gradient colors with 3D effect

 

this is the gradient example http://www.fusioncharts.com/demos/gallery/gauges/chart.asp?id=linear_5

 

and this is the 3D effect linear chart http://www.fusioncharts.com/demos/gallery/gauges/chart.asp?id=linear_6

 

how can i make the colors of the first example to be with 3D effect like in the second example ?

 

 

Thanks ahead,

 

 

Daniel

[Guest Sumedh]

Hi Daniel,

 

Please find response to your queries inline below:

 

 

this is the gradient example http://www.fusioncharts.com/demos/gallery/gauges/chart.asp?id=linear_5

 

>> You can add arc and gradient effect using annotations. FusionWidgets Annotations lets you create your own custom objects (shapes, images, text etc.) in the charts.

 

You can create various shapes like polygons, rectangles, circles, arcs etc, render annotation text at required positions and load external GIF/JPEG/PNG images or other Flash movies in the chart itself.

 

In above example following annotation configuration is used.

 

Ref. Code:

 

<chart ... >
.
.
<annotations>

<annotationGroup id="Grp2" showBelow="1" >

	<annotation type="rectangle" x="$gaugeStartX" y="$gaugeStartY" toX="$gaugeEndX" toY="$gaugeEndY" fillColor="678000,FCEF27,E00000"/>

</annotationGroup>
</annotations>
.
.
</chart>

 

 

For more information, please refer the following URL:

http://docs.fusioncharts.com/widgets/Contents/?Annotations/Introduction.html

 

 

and this is the 3D effect linear chart:http://www.fusioncharts.com/demos/gallery/gauges/chart.asp?id=linear_6

>> For this effect you, would have to use gaugeFillMix and gaugeFillRatio attributes.

 

gaugeFillMix - this attribute lets you configure the gradient fill formula for the scale.

 

gaugeFillRation - this attribute lets you configure ratio fill mix for the scale.

 

In above example following configuration is used:

 

Ref. Code:

<chart ... gaugeFillMix="{color},{FFFFFF}" gaugeFillRatio="50,50">

 

For more information, please refer the following URL:

http://docs.fusioncharts.com/widgets/Contents/?Linear/XMLAPI.html

 

Hope this helps!

[Vedmack]

I meant to ask , how can i make this example http://www.fusioncha...asp?id=linear_6 with gradient color just like in this one http://www.fusioncha...asp?id=linear_5 , and not only two colors...

 

I dont want two colors green and red , instead i want it to be gradient from green to yellow to red , just like in the http://www.fusioncha...asp?id=linear_5 , but I want the color to be with the 3D effect like in http://www.fusioncha...asp?id=linear_6 (hope that i explained myself good enough)

 

something similar to the gauge in this example http://kb.fusionchar...at+Map+Chart%3F , its color are gradient and look with a slight 3D effect

 

I mean is there a place in that http://www.fusioncha...asp?id=linear_6 example that i can insert the color as "678000,FCEF27,E00000" ?

Edited August 8, 2012 by Vedmack

[Vedmack]

Can anyone take a look at my rephrased question above?

 

Thanks

[Guest Bindhu]

Can anyone take a look at my rephrased question above?

 

Thanks

 

Hi,

 

Please note:

 

The glassy effect is only supported by the linear gauge and it is not supported by the Annotations.

The Left-to-Right Gradient effect is supported only by the annotations and not by the Linear Gauge.

 

In the example that you have mentioned, one uses the linear gauge and the other uses more of annotations. Even the gauge is displayed as a rectangle annotation, hence gradient effect is possible.

 

In case of linear gauges, only top to bottom gradient is possible. Gradient effect from left to right is not supported.

 

In order to apply gradient effect from top to bottom, please use the attribute "gaugeFillMix".

 

Ref. Code:

<chart gaugeFillMix="E00000,678000,FCEF27" gaugeFillRatio='0,50,50' ...>

 

Please find attached screen shot of the chart rendered.

 

Hope this helps!

Edited August 13, 2012 by Bindhu

[Vedmack]

Thank you for the detailed answer!

[Guest Bindhu]

[safadig]

Can this be applied to Angular charts?

 

I tried this, but did not seem to have an effect:

 

$strXML .= "<colorRange><color minValue='0' maxValue='200' code='96C900'/><color minValue='200' maxValue='400' code='618200'/><color minValue='400' maxValue='600' code='FFFB14'/><color minValue='600' maxValue='800' code='EBEB13'/><color minValue='800' maxValue='1000' code='C90000'/><color minValue='1000' maxValue='4000' code='FF0000'/></colorRange>";

  $strXML .="<annotations><annotationGroup id='Grp2' showBelow='1'><annotation type='rectangle' x='$gaugeStartX' y='$gaugeStartY' toX='$gaugeEndX' toY='$gaugeEndY' fillColor='678000,FCEF27,E00000'/>

</annotationGroup>";

$strXML .="</annotations>";

[Guest Rishab]

Hi,

Yes, the color value and the annotations both can be applied to the AngularGauge chart.

The attached item is the screenshot of the chart using the provided data along with the sample example showing the above mentioned features.

For more information please visit the link below.
http://docs.fusioncharts.com/widgets/Contents/Angular/XMLAPI.html

Hope this helps.

Angular.zip

[safadig]

For some reason when using $StrXML in a PHP Javascript rendered chart FC_renderchart("javascript"), the chart will render perfectly with no error but no annotation either!

 

The page source is missing the X and Y data points 

 

$strXML .="<annotation type='rectangle' x='".$gaugeStartX."' y='".$gaugeStartY."' toX='".$gaugeEndX."' toY='".$gaugeEndY."' fillAlpha='100' fillColor='678000,FCEF27,E00000'/>";

 

<colorRange><color minValue='0' maxValue='200' code='96C900'/><color minValue='200' maxValue='400' code='618200'/><color minValue='400' maxValue='600' code='FFFB14'/><color minValue='600' maxValue='800' code='EBEB13'/><color minValue='800' maxValue='1000' code='C90000'/><color minValue='1000' maxValue='4000' code='FF0000'/></colorRange><annotation><annotationGroup id='Grp1' showBelow='1'><annotation type='rectangle' x=' ' y=' ' toX=' ' toY=' ' fillAlpha='100' fillColor='678000,FCEF27,E00000'/></annotationGroup></annotation>

Edited November 17, 2013 by safadig

[safadig]

http://www.toledoallergy.com/Count/miseryAG.php

[Guest Sashibhusan]

Hi,

 

With regard to your issue, it seems, the PHP variables $gaugeStartX, $gaugeStartY, $gaugeEndX and $gaugeEndY are not holding any value while building the chart XML string.

 

Could you please check the values of these variables by echoing and make sure these are assigned with proper values?

 

In case if this is what is not helping you, please post the complete PHP code of your XML data generation, so that we may better look into your issue.

 

Awaiting your valuable response.

[safadig]

I agree..

 

Is there any example of PHP based chart with annotations you can point me to?

[safadig]

Hi,

 

With regard to your issue, it seems, the PHP variables $gaugeStartX, $gaugeStartY, $gaugeEndX and $gaugeEndY are not holding any value while building the chart XML string.

 

Could you please check the values of these variables by echoing and make sure these are assigned with proper values?

 

In case if this is what is not helping you, please post the complete PHP code of your XML data generation, so that we may better look into your issue.

 

Awaiting your valuable response.

Here is the PHP Code:

 

<?php

   include("../includes/FusionCharts.php");

   include("../includes/FusionCharts_Gen.php");

   include("../includes/DBConn.php");

   

?>

<title>Test chart</title>  

        <script type="text/javascript" src="../Fusion/Widgets/FusionCharts.js"></script>

<meta charset='utf-8'>

     </HEAD>

     <BODY>

     <CENTER>

     <?php   

   $link = connectToDB();

   

     

    $strXML = "<chart palette='2' manageResize='1' bgAlpha='0' caption='Test chart'  upperLimit='1400' lowerLimit='0' gaugeStartAngle='225' gaugeEndAngle='-45' gaugeFillMix='{light-10},{light-20},{light-60},{dark-30},{dark-40}, {dark-40}' gaugeFillRatio='' gaugeBorderColor='{dark-30}' gaugeOuterRadius='150' gaugeInnerRadius='100' pivotRadius='10' showValue='0' tickValueStep='5' placeValuesInside='1'>";

 

 

 $strXML .="<dials>";

      $strXML .= "<dial value='600' tooltext='Latest count' rearExtension='15' radius='88' baseWidth='12' topWidth='3' bgColor='210B02'/>";

$strXML .="</dials>";

       

       

  

  $strXML .= "<colorRange><color minValue='0' maxValue='200' code='96C900'/><color minValue='200' maxValue='400' code='618200'/><color minValue='400' maxValue='600' code='FFFB14'/><color minValue='600' maxValue='800' code='EBEB13'/><color minValue='800' maxValue='1000' code='C90000'/><color minValue='1000' maxValue='4000' code='FF0000'/></colorRange>";

   

$strXML .="<annotations><annotationGroup id='Grp1' constrainedScale='0' showBelow='1'><annotation type='rectangle' x='".$gaugeStartX."' y='".$gaugeStartY."' toX='".$gaugeEndX."' toY='".$gaugeEndY."' fillAlpha='100' fillColor='678000,FCEF27,E00000'/>";

$strXML .="</annotationGroup>";

$strXML .="</annotations>";

 

 

  

           $strXML .= "</chart>";

  FC_SetRenderer("javascript");

  echo renderChart("../Fusion/Widgets/AngularGauge.swf", "", $strXML, "miseryAG", 430, 380, 0, 0);

  

   mysql_close($link);

        ?>

 

Thanks

[Guest Sashibhusan]

Hi,

 

Thank you for providing the PHP code, to look into your issue.

 

It seems, no where you have assigned the values to the PHP variables $gaugeStartX, $gaugeStartY, $gaugeEndX and $gaugeEndY.

 

If you do not need to provide these values dynamically, you can have static values for the attributes, as below mentioned code snippet.

$strXML .="<annotations><annotationGroup id='Grp1' constrainedScale='0' showBelow='1'><annotation type='rectangle' x='430' y='380' toX='0' toY='0' fillAlpha='100' fillColor='678000,FCEF27,E00000'/>";

We do not have any ready PHP sample implementation with annotations, as of now. But, the implementation is same as other charts plotted. Only you would need to build the XML string as per the chart type.

 

For more detailed step by step tutorial on FusionCharts XT with PHP and MySQL database, please visit the link: http://blog.fusioncharts.com/2012/03/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2/

 

Hope this helps!

[safadig]

Perfect! I knew it was something simple..

 

Thanks 

[Guest Sashibhusan]