Jump to content


How To Make The Linear Chart Color Look 3D


  • Please log in to reply
16 replies to this topic

#1 Vedmack

Vedmack

    Advanced Member

  • Members
  • PipPipPipPip
  • 46 posts

Posted 07 August 2012 - 11:48 AM

Hi

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

this is the gradient example http://www.fusioncha...asp?id=linear_5

and this is the 3D effect linear chart http://www.fusioncha...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

#2 Guest_Sumedh_*

Guest_Sumedh_*
  • Guests

Posted 08 August 2012 - 01:18 PM

Hi Daniel,

Please find response to your queries inline below:


this is the gradient example http://www.fusioncha...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.fusionch...troduction.html


and this is the 3D effect linear chart:http://www.fusioncha...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.fusionch...ear/XMLAPI.html

Hope this helps!

#3 Vedmack

Vedmack

    Advanced Member

  • Members
  • PipPipPipPip
  • 46 posts

Posted 08 August 2012 - 01:59 PM

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 by Vedmack, 08 August 2012 - 02:26 PM.


#4 Vedmack

Vedmack

    Advanced Member

  • Members
  • PipPipPipPip
  • 46 posts

Posted 12 August 2012 - 09:08 AM

Can anyone take a look at my rephrased question above?

Thanks

#5 Guest_Bindhu_*

Guest_Bindhu_*
  • Guests

Posted 13 August 2012 - 07:28 AM

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!

Attached Thumbnails

  • LinearGauge.PNG

Edited by Bindhu, 13 August 2012 - 07:28 AM.


#6 Vedmack

Vedmack

    Advanced Member

  • Members
  • PipPipPipPip
  • 46 posts

Posted 14 August 2012 - 07:59 AM

Thank you for the detailed answer!

#7 Guest_Bindhu_*

Guest_Bindhu_*
  • Guests

Posted 14 August 2012 - 08:45 AM

:)

#8 safadig

safadig

    Forum Member

  • Members
  • PipPipPipPip
  • 29 posts

Posted 14 November 2013 - 06:09 PM

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>";


#9 Guest_Rishab_*

Guest_Rishab_*
  • Guests

Posted 15 November 2013 - 09:49 AM

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.fusionch...lar/XMLAPI.html

Hope this helps.

Attached Thumbnails

  • angular.JPG

Attached Files



#10 safadig

safadig

    Forum Member

  • Members
  • PipPipPipPip
  • 29 posts

Posted 17 November 2013 - 12:23 PM

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 by safadig, 17 November 2013 - 12:39 PM.


#11 safadig

safadig

    Forum Member

  • Members
  • PipPipPipPip
  • 29 posts

Posted 17 November 2013 - 06:45 PM

http://www.toledoall...nt/miseryAG.php



#12 Sashibhusan

Sashibhusan

    Supreme Being

  • Members
  • PipPipPipPipPipPipPipPip
  • 1049 posts

Posted 18 November 2013 - 09:08 AM

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.



#13 safadig

safadig

    Forum Member

  • Members
  • PipPipPipPip
  • 29 posts

Posted 18 November 2013 - 10:59 AM

I agree..

 

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



#14 safadig

safadig

    Forum Member

  • Members
  • PipPipPipPip
  • 29 posts

Posted 18 November 2013 - 11:43 AM

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


#15 Sashibhusan

Sashibhusan

    Supreme Being

  • Members
  • PipPipPipPipPipPipPipPip
  • 1049 posts

Posted 19 November 2013 - 04:52 AM

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.fusionch...arts-xt-part-2/

 

Hope this helps!



#16 safadig

safadig

    Forum Member

  • Members
  • PipPipPipPip
  • 29 posts

Posted 19 November 2013 - 10:00 AM

Perfect! I knew it was something simple..

 

Thanks 



#17 Sashibhusan

Sashibhusan

    Supreme Being

  • Members
  • PipPipPipPipPipPipPipPip
  • 1049 posts

Posted 20 November 2013 - 05:10 AM

:)