Sign in to follow this  
Followers 0
dontspeak

Apply Javascript Fusion Chart Exporting Code To Php,mysql Code

By dontspeak, in FusionCharts and PHP

Recommended Posts

dontspeak   

dontspeak
Posted (edited)

i'm using fusion charts with my PHP & MySQL codings . I can draw charts with Database data..Now I want add a download button to export charts as PDF,png & JPG formats...i have found fusion charts Javascript example & I tried to apply that code to my php code & get exporting charts..But I couldn't do it....Only chart displayed...Here the help JS code which I used...:

 

[/b][/size][size=2][b]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

       <title>My First chart using FusionCharts - Exporting pure JavaScript chart</title>
       <script type="text/javascript" LANGUAGE="Javascript" SRC="../../../Charts/FusionCharts.js"></script>
       <script type="text/javascript" LANGUAGE="Javascript" SRC="../../assets/ui/js/jquery.min.js"></script>
       <script type="text/javascript" LANGUAGE="Javascript" SRC="../../assets/ui/js/lib.js"></script>

       <link href="../../assets/ui/css/style.css" rel="stylesheet" type="text/css" />

       <!--[if IE 6]>
       <script type="text/javascript" src="../assets/ui/js/DD_belatedPNG_0.0.8a-min.js"></script>

<script>
         /* select the element name, css selector, background etc */
         DD_belatedPNG.fix('img');

         /* string argument can be any CSS selector */
       </script>
       <![endif]-->

       <style type="text/css">
           h2.headline {
               font: normal 110%/137.5% "Trebuchet MS", Arial, Helvetica, sans-serif;
               padding: 0;
               margin: 25px 0 25px 0;
               color: #7d7c8b;
               text-align: center;
           }
           p.small {
               font: normal 68.75%/150% Verdana, Geneva, sans-serif;
               color: #919191;
               padding: 0;
               margin: 0 auto;
               width: 664px;
               text-align: center;
           }
       </style>
   </head>
   <body>

       <div id="wrapper">

           <div id="header">


  			<div class="logo"><a class="imagelink"  href="http://www.fusioncharts.com/" target="_blank"><img src="../../assets/ui/images/fusionchartsv3.2-logo.png" width="131" height="75" alt="FusionCharts XT logo" /></a></div>
               <h1 class="brand-name">FusionCharts XT</h1>
               <h1 class="logo-text">Exporting pure JavaScript chart</h1>
           </div>

           <div class="content-area">
               <div id="content-area-inner-main">
                   <p class="text" align="center" >Exporting pure JavaScript chart.Click the download button on the top right corner of the chart. </p>
                   <p> </p>

                   <div class="gen-chart-render">
                       <center>
                           <div id="chartContainer">FusionCharts will load here</div>

                           <script type="text/javascript"><!--

                               FusionCharts.setCurrentRenderer('JavaScript');
                               var myChart = new FusionCharts("../../Charts/Column2D.swf", "myChartId", "400", "300", "0", "1");
                               myChart.setXMLData('<chart caption="Weekly Sales Summary" xAxisName="Week" yAxisName="Sales" numberPrefix="{:content:}quot; \n\
                      			exportEnabled="1" >\n\
                                     <set label="Week 1" value="14400" /> \n\
                                     <set label="Week 2" value="19600" /> \n\
                                     <set label="Week 3" value="24000" /> \n\
                                     <set label="Week 4" value="15700" /> \n\
                               </chart>');

                               myChart.render("chartContainer");


                               // -->
                           </script>
                       </center>
                   </div>
                   <div class="clear"></div>
                   <p> </p>
                   <p class="small">    </p>
                   <div class="underline-dull"></div>
                   <div>

               <p class="highlightBlock">The above sample showcases exporting pure JavaScript charts. Click <a href="../../../Contents/index.html?exporting-image/ECPureJS.html" target="_blank">here</a> to know more on how the code of this example works.</p>
           </div>

               </div>
           </div>

           <div id="footer">
               <ul>
                   <li><a href="../index.html"><span>« Back to list of examples</span></a></li>
                   <li class="pipe">|</li>
                   <li><a href="../../NoChart.html"><span>Unable to see the chart above?</span></a></li>
               </ul>
           </div>
       </div>
   </body>
</html>[/b][/size][size="4"][b]

 

To see the out put of this code click this link :out put

 

here is my php,mysql code :

 

[/b][/size][size=2][b]<?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/FusionChartsExportComponent.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" />

   <style type="text/css">
   <!--
   body {
       font-family: Arial, Helvetica, sans-serif;
       font-size: 12px;
   }
   -->
   </style>
</HEAD>
<BODY>

<CENTER>
<h2>FusionCharts Examples</h2>
<h4>Plotting single series chart from data contained in Array.</h4>
<?php
include("db_connect.php");

   $arrData[0][2] = "A";
   //send + char to xml file////
   $arrData[1][3] = str_replace('+', '%2B', 'A+');
   $arrData[2][4] = "A-";
   $arrData[3][5] = "B";
   $arrData[4][6] = str_replace('+', '%2B', 'B+');
   $arrData[5][7] = "B-";
   $arrData[6][8] = "C";
   $arrData[7][9] = str_replace('+', '%2B', 'C+');
   $arrData[8][10] = "C-";
   $arrData[9][11] = "D";
   $arrData[10][12] = str_replace('+', '%2B', 'D+');
   $arrData[11][13] = "E";
   $arrData[12][14] = "AB";
   $arrData[13][15] = "NE";
   $arrData[14][16] = "MC";

   //Store db data
   // Fetch all  records
   $sql = "SELECT grade, COUNT(*) 'No_Of_grades' FROM std_results WHERE course_code ='CSC1113' GROUP BY grade ORDER BY grade ASC";
   $result = mysql_query($sql) or die(mysql_error());
   while($ors = mysql_fetch_array($result)) {
   $grd=$ors['grade'];
   switch ($grd)
{
case "A":
 $arrData[0][17]=$ors['No_Of_grades'];
 break;
case "A+":
 $arrData[1][18]=$ors['No_Of_grades'];
 break;
case "A-":
 $arrData[2][19]=$ors['No_Of_grades'];
 break;
 case "B":
 $arrData[3][20]=$ors['No_Of_grades'];
 break;
 case "B+":
 $arrData[4][21]=$ors['No_Of_grades'];
 break;
 case "B-":
 $arrData[5][22]=$ors['No_Of_grades'];
 break;
case "C":
 $arrData[6][23]=$ors['No_Of_grades'];
 break;
 case "C+":
 $arrData[7][24]=$ors['No_Of_grades'];
 break;
 case "C-":
 $arrData[8][25]=$ors['No_Of_grades'];
 break;
 case "D":
 $arrData[9][26]=$ors['No_Of_grades'];
 break;
 case "D+":
 $arrData[10][27]=$ors['No_Of_grades'];
 break;
 case "E":
 $arrData[11][28]=$ors['No_Of_grades'];
 break;
 case "AB":
 $arrData[12][29]=$ors['No_Of_grades'];
 break;
 case "NE":
 $arrData[13][30]=$ors['No_Of_grades'];
 break;
default:
 $arrData[14][31]=$ors['No_Of_grades'];
}

   }

   //set vlaue zero for othe grades..
   for($i=0;$i<15;$i++){
       if(!isset($arrData[$i][32])){
           $arrData[$i][33]=0;
           }
       }
   //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' exportTargetWindow='_blank'>";
   //Convert data to XML and append
   foreach ($arrData as $arSubData)
       $strXML .= "<set label='" . $arSubData[1] . "' value='" . $arSubData[2] . "' />";

   //Close <chart> element
   $strXML .= "</chart>";

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

<BR><BR>

</CENTER>
</BODY>
</HTML>[/b][/size][size="4"][b]

 

out put of my code is :

 

UdAGF.png

 

How can I add exporting (downloading) part to my php,mysql code and get following out put :

 

3VXXR.png

 

How can I Apply above Javascript fusion chart exporting code to my PHP,MySql code????Need ur great help friends..thanxx so much....

 

Can u please help me to add this downlaod button.It's a big help for me....here I attached my php code..plzz edit my code & put that download button..

Edited by dontspeak

Share this post

Link to post
Share on other sites

Guest Sumedh   

Guest Sumedh
Posted

Hi,

 

Welcome to FusionCharts Forum! smile.gif

 

You can initiate export with button.

 

You would need to create one JavaScript function, in that function, call the exportChart function on the DOM Id.

 

Please refer the following code:

<script type="text/javascript">
   function ExportMyChart() {
        var chartObject = getChartFromId('myChart');
        if( chartObject.hasRendered() ) chartObject.exportChart(); 
  }
</script>

 

 

And call this function on button click.

 

Ref. Code:

<input type="button" value="Export My Chart" onclick="ExportMyChart()" />

 

 

For more information, please refer the following link:

http://docs.fusioncharts.com/charts/contents/?exporting-image/javascript-ref/ECJavaScript.html

 

Hope this helps!

Share this post

Link to post
Share on other sites

dontspeak   

dontspeak
Posted (edited)

Hi,

 

Welcome to FusionCharts Forum! smile.gif

 

You can initiate export with button.

 

You would need to create one JavaScript function, in that function, call the exportChart function on the DOM Id.

 

Please refer the following code:

<script type="text/javascript">
   function ExportMyChart() {
		var chartObject = getChartFromId('myChart');
		if( chartObject.hasRendered() ) chartObject.exportChart(); 
  }
</script>

 

 

And call this function on button click.

 

Ref. Code:

<input type="button" value="Export My Chart" onclick="ExportMyChart()" />

 

 

For more information, please refer the following link:

http://docs.fusionch...JavaScript.html

 

Hope this helps!

sorry dear..I put ur code..but still export not working.....here is my 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 LANGUAGE="Javascript" SRC="FusionCharts/FusionCharts.js"></SCRIPT>
<!--<script type="text/javascript" language="JavaScript" src="FusionCharts/FusionChartsExportComponent.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>
<!--<script type="text/javascript" charset="utf-8">
FusionCharts.setCurrentRenderer('JavaScript');
var myChart = new FusionCharts("FusionCharts/FCExporter.swf", "myChartId", "400", "300", "10", "11");
myChart.render("chartContainer");
</script>-->
<link href="FusionCharts/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
   function ExportMyChart() {
    	var chartObject = getChartFromId('myChart');
    	if( chartObject.hasRendered() ) chartObject.exportChart(); 
  }
</script> 

<style type="text/css">
<!--
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
-->
</style>
</HEAD>
<BODY>

<CENTER>
<h2>FusionCharts Examples</h2>
<h4>Plotting single series chart from data contained in Array.</h4>
<?php
include("db_connect.php");

$arrData[0][1] = "A";
//send + char to xml file////
$arrData[1][1] = str_replace('+', '%2B', 'A+');
$arrData[2][1] = "A-";
$arrData[3][1] = "B";
$arrData[4][1] = str_replace('+', '%2B', 'B+');
$arrData[5][1] = "B-";
$arrData[6][1] = "C";
$arrData[7][1] = str_replace('+', '%2B', 'C+');
$arrData[8][1] = "C-";
$arrData[9][1] = "D";
$arrData[10][1] = str_replace('+', '%2B', 'D+');
   $arrData[11][1] = "E";
$arrData[12][1] = "AB";
$arrData[13][1] = "NE";
$arrData[14][1] = "MC";

//Store db data
// Fetch all  records
$sql = "SELECT grade, COUNT(*) 'No_Of_grades' FROM std_results WHERE course_code ='CSC1113' GROUP BY grade ORDER BY grade ASC";
$result = mysql_query($sql) or die(mysql_error());
while($ors = mysql_fetch_array($result)) {
$grd=$ors['grade'];
switch ($grd)
{
case "A":
 $arrData[0][2]=$ors['No_Of_grades'];
 break;
case "A+":
 $arrData[1][2]=$ors['No_Of_grades'];
 break;
case "A-":
 $arrData[2][2]=$ors['No_Of_grades'];
 break;
 case "B":
 $arrData[3][2]=$ors['No_Of_grades'];
 break;
 case "B+":
 $arrData[4][2]=$ors['No_Of_grades'];
 break;
 case "B-":
 $arrData[5][2]=$ors['No_Of_grades'];
 break;
case "C":
 $arrData[6][2]=$ors['No_Of_grades'];
 break;
 case "C+":
 $arrData[7][2]=$ors['No_Of_grades'];
 break;
 case "C-":
 $arrData[8][2]=$ors['No_Of_grades'];
 break;
 case "D":
 $arrData[9][2]=$ors['No_Of_grades'];
 break;
 case "D+":
 $arrData[10][2]=$ors['No_Of_grades'];
 break;
 case "E":
 $arrData[11][2]=$ors['No_Of_grades'];
 break;
 case "AB":
 $arrData[12][2]=$ors['No_Of_grades'];
 break;
 case "NE":
 $arrData[13][2]=$ors['No_Of_grades'];
 break;
default:
 $arrData[14][2]=$ors['No_Of_grades'];
}

}

//set vlaue zero for othe grades..
for($i=0;$i<15;$i++){
	if(!isset($arrData[$i][2])){
		$arrData[$i][2]=0;
		}
	}
//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' exportTargetWindow='_blank'>";
//Convert data to XML and append
foreach ($arrData as $arSubData)
	$strXML .= "<set label='" . $arSubData[1] . "' value='" . $arSubData[2] . "' />";

//Close <chart> element
$strXML .= "</chart>";

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

<BR><BR>
<input type="button" value="Export My Chart" onclick="ExportMyChart()" />
</CENTER>
</BODY>
</HTML>

 

please help me to recover this problem...please tell me where is the error in my code ?????this is very urgent for me frnd......

bar_column.php

Edited by dontspeak

Share this post

Link to post
Share on other sites

dontspeak   

dontspeak
Posted

Just a shot in the dark.

 

Change

 

var chartObject = getChartFromId('myChart');

 

to

 

var chartObject = getChartFromId('myChartId');

 

 

thxx for ur reply..I applied ur code..but still problem is not solved.....plzz help me to recover this problem,here is my code......

bar_column.php

Share this post

Link to post
Share on other sites

dontspeak   

dontspeak
Posted

I'm highly appreciated your unbelievable support..I'm really happy about that..But still chart can not be export..I edited my code as u said that Unzip the sample(139652.zip, already included the Batik files, so need not require to download Batik library from the above link), open "bar_column.php" file in the editor and modify the path for "html5ExportHandler" attribute in the <chart> element of chart XML, as per your server configuration and then render the chart in the browser and click on the "buttons" to export the graph.......

But still chart can not be export..I do not know what's the reason for that....I sent my code once again to you..You have mentioned two ways of exporting charts...I think first method is most suitable way for me...Method suitable for me is :send the chart data to the external Highcharts server for processing to get the image/PDF.

In this process I have active Internet connection with proper bandwidth.There is no problem about that...

I would be greatly thankful to if You edit my code according to that method.....Please do not angry with me...Please help me to recover this problem....Thank yo so much...I'm hoping your reply as soon as possible..

here I attached my php file......

bar_column.php

Share this post

Link to post
Share on other sites

Guest Sashibhusan   

Guest Sashibhusan
Posted

Hi,

 

Please note that for Flash charts, the export process can be initiated either from the chart's "Right Click Context Menu" or by calling FusionCharts JavaScript method "exportChart()".

 

However, for pure JavaScript charts, once the exportEnabled attribute is set, a "Download" button will be displayed on the top-right corner of your chart. This button, when clicked, will provide you a list of various export file formats thereby enabling you to download an image or PDF version of the chart.

 

Since, you are looking for the download button (as per your screen shot), you would need to explicitly set the chart to render in JavaScript mode by using the below reference code in PHP:

 

Ref. Code:

FC_SetRenderer('javascript');

 

However, please find the modified sample (my_charts.zip) which exports the chart image/PDF by sending the chart data to the external server.

 

Please note that, since you are using database to retrieve the data for plotting the chart, to test from my end, I have commented the code snippet for creating the <set> elements of your chart XML and included single static data point.

 

Please try once exporting the chart (without modifying the sample) and if the chart exports successfully, UN-comment the code snippet in "bar_column.php" file accordingly to render your chart and then export.

 

Hope this helps.

my_charts.zip

Share this post

Link to post
Share on other sites

dontspeak   

dontspeak
Posted

Hi,

 

Please note that for Flash charts, the export process can be initiated either from the chart's "Right Click Context Menu" or by calling FusionCharts JavaScript method "exportChart()".

 

However, for pure JavaScript charts, once the exportEnabled attribute is set, a "Download" button will be displayed on the top-right corner of your chart. This button, when clicked, will provide you a list of various export file formats thereby enabling you to download an image or PDF version of the chart.

 

Since, you are looking for the download button (as per your screen shot), you would need to explicitly set the chart to render in JavaScript mode by using the below reference code in PHP:

 

Ref. Code:

FC_SetRenderer('javascript');

 

However, please find the modified sample (my_charts.zip) which exports the chart image/PDF by sending the chart data to the external server.

 

Please note that, since you are using database to retrieve the data for plotting the chart, to test from my end, I have commented the code snippet for creating the <set> elements of your chart XML and included single static data point.

 

Please try once exporting the chart (without modifying the sample) and if the chart exports successfully, UN-comment the code snippet in "bar_column.php" file accordingly to render your chart and then export.

 

Hope this helps.

 

Thank u so much.................

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing FusionCharts and PHP