Change the Size of the Export Button In Fusion Chart in PHP

Question

here is my working fusion chart code:

<?php
include("FusionCharts/FusionCharts.php");
?>
<HTML>
<HEAD>
    <TITLE>
    FusionCharts - Array Example using Single Series Column 3D Chart
    </TITLE>    
<SCRIPT LANGUAGE="Javascript" SRC="FusionCharts/FusionCharts.js"></SCRIPT>
<script type="text/javascript" LANGUAGE="Javascript" SRC="FusionCharts/jquery.min.js"></script>
<script type="text/javascript" LANGUAGE="Javascript" SRC="FusionCharts/lib.js"></script>
<link href="FusionCharts/style.css" rel="stylesheet" type="text/css" />

</HEAD>
<BODY>
<CENTER>
<h2>FusionCharts Examples</h2>
<h4>Plotting single series chart from data contained in Array.</h4>
<?php


    //Now, we need to convert this data into XML. We convert using string concatenation.
    //Initialize <chart> element
    $strXML = "<chart caption='Exam result for CSC113A ' numberPrefix='' formatNumberScale='10' xAxisName='Grades' yAxisName='No Of Students' bgColor='995699,FEEFFF' exportEnabled='1'  exportAtClient='0' exportAction='download'  exportShowMenuItem='1'>";
    //Convert data to XML and append

    $strXML .= "<set label='L' value='10'/><set label='Y' value='40'/></chart>";//Comment this line of code to render the data from your database. This line of code is only for testing purpose


    //Un-comment the below line of code to render the chart in pure JavaScript forcefully.
    FC_SetRenderer('javascript');

    //Create the chart - Column 3D Chart with data contained in strXML
    echo renderChart("FusionCharts/Column3D.swf", "", $strXML, "myChart", 600, 300, false, true);

?>

</CENTER>
</BODY>
</HTML>

Out Put of this code : enter image description here

default export button image : enter image description here

I want to add this kind of buttons to my chart : enter image description here

here default export button is too small.I want to change size of this button.and also want add print icon to this graph....where I can put export button properties to my code???How can I do it????Need ur great help...Thankzz in advanced..

Demo live code: click here

So far I know, it is not possible directly, unless you do some dirty DOM tricks (that too for browsers with SVG support) — sudipto
@ sudimail :please see this code..this is highchart export button changing...jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/… ..can I use this js properties apply to my code???? — Robinson

Robinson Robinson · Accepted Answer · 2012-12-29T07:04:18

i have found a method..this is code :

<?php
include("FusionCharts/FusionCharts.php");
//include("FusionCharts/ExportHandlers/PHP/FCExporter.php");
?>
<html>
<head>
    <title>
    FusionCharts - Array Example using Single Series Column 3D Chart
    </title>    
<script type="text/Javascript" SRC="FusionCharts/FusionCharts.js"></script>
<script type="text/javascript" LANGUAGE="Javascript" SRC="FusionCharts/jquery.min.js"></script>
<style type= "text/css" >
.div1 {
height:360px;
width:650px;
background:#FFF0FF;
background-repeat:no-repeat;
border:2px solid #995699;
}
.div2 {
height:35px;
width:105px;
background:#FFF0FF;
background-repeat:no-repeat;

}
</style>
    <script type="text/Javascript" >
        function callPrint(){

            window.print();
        }
        function callExport(val){

           var chartObject = FusionCharts('myChart');
         if( chartObject.hasRendered() )
         {
             if(val==1){
         chartObject.exportChart({ exportAtClient:'1',exportFormat:'PNG'});

             }
             else{

            chartObject.exportChart({ exportAtClient:'1',exportFormat:'PDF'});


                 }
         }

        }


    </script>
</head>
<body>
<center>
<h2>FusionCharts Examples</h2>
<h4>Plotting single series chart from data contained in Array.</h4>
<div class="div1">

    <div class="div2" align="right">
      <p align="right"><a  href='#' onClick="callExport(1)"><img width='32' height='32' title='Click To Download as Image' src='FusionCharts/png_32.PNG' border='0'></a>
       <a  href='#' onClick="callExport(2)"><img width='32' height='32' title='Click To Download as PDF Doc' src='FusionCharts/pdf_32.png' border='0'></a>
       <a  href='#' onclick='callPrint();'><img width='30' height='30' title='Click To Print The Chart' src='FusionCharts/Printer.png' border='0'></a></p>
    </div>
<?php


    //Now, we need to convert this data into XML. We convert using string concatenation.
    //Initialize <chart> element
    $strXML = "<chart caption='Exam result for CSC113A ' numberPrefix='' formatNumberScale='10' xAxisName='Grades' yAxisName='No Of Students' bgColor='FFFFCC,FFFFCC' exportEnabled='1'  exportAtClient='0' exportAction='download'  exportShowMenuItem='0' exportFormats='JPG=Download as JPEG|PDF=Download as SVG'>";
    //Convert data to XML and append

    $strXML .= "<set label='L' value='10'/></chart>";//Comment this line of code to render the data from your database. This line of code is only for testing purpose


    //Un-comment the below line of code to render the chart in pure JavaScript forcefully.
    FC_SetRenderer('javascript');

    //Create the chart - Column 3D Chart with data contained in strXML
    echo renderChart("FusionCharts/Column3D.swf", "", $strXML, "myChart", 600, 300, false, true);

?>
</div>
</center>
</body>
</html>

out put of this code : enter image description here

here u can see the print,png & pdf icons are placed at the top.when I click those icons callExport() function called & generate the relevant out put..This what I want....this code will help to others...try to use it..thanks so much...

Change the Size of the Export Button In Fusion Chart in PHP

1 Answers