CODEWITHSUNDEEP
phpmysqlfusioncharts
user1793864
user1793864

Reputation: 185

Multiple charts in a one web page in fusion charts

I need to create several charts in one web page, and the data for each chart is derived from one MySql database but from different tables. I need to display several charts in the same web page. Currently I'm using following codes for this purpose

I'm using fusion charts as the charting tool

page which will display the chart

<?php
include("Includes/FusionCharts.php");
 include("Includes/DBConn.php");
?>
<HTML>
<HEAD>
<TITLE>
FusionCharts Free - Database Example
</TITLE>
<?php
?>  
<SCRIPT LANGUAGE="Javascript" SRC="FusionCharts/FusionCharts.js"></SCRIPT>
<style type="text/css">
<!--
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.text{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
-->
</style>
</HEAD>
<BODY>

<table width="402" border="3" cellpadding="0">
 <tr>
<td width="390" height="63" align="left"><?php

$link = connectToDB();

    $strXML = "<graph caption='Factory Output report' subCaption='By Quantity' pieSliceDepth='30' showBorder='1' showNames='1' formatNumberScale='0' numberSuffix=' Units' decimalPrecision='0'>";


$strQuery = "select * from top_buy_traders";
$result = mysql_query($strQuery) or die(mysql_error());


if ($result) {
    while($ors = mysql_fetch_array($result)) {

        $strQuery = "select sum(qty) as TotOutput from top_buy_traders where id=" . $ors['id'];
        $result2 = mysql_query($strQuery) or die(mysql_error()); 
        $ors2 = mysql_fetch_array($result2);
        //Generate <set name='..' value='..' />        
        $strXML .= "<set name='" . $ors['buy_trader'] . "' value='" .    $ors2['TotOutput'] . "' />";
        //free the resultset
        mysql_free_result($result2);
    }
}
mysql_close($link);

//Finally, close <graph> element
$strXML .= "</graph>";

//Create the chart - Pie 3D Chart with data from $strXML
echo renderChart("FusionCharts/FCF_Pie3D.swf", "", $strXML, "FactorySum", 325,  225);
  ?></td>

   </tr>
 </table>
</BODY>
</HTML>

Fusion Chart.php is as follows

<?php

function encodeDataURL($strDataURL, $addNoCacheStr=false) {

if ($addNoCacheStr==true) {
        if (strpos($strDataURL,"?")<>0)
        $strDataURL .= "&FCCurrTime=" . Date("H_i_s");
    else
        $strDataURL .= "?FCCurrTime=" . Date("H_i_s");
}
return urlencode($strDataURL);
}


 function datePart($mask, $dateTimeStr) {
@list($datePt, $timePt) = explode(" ", $dateTimeStr);
$arDatePt = explode("-", $datePt);
$dataStr = "";
    if (count($arDatePt) == 3) {
    list($year, $month, $day) = $arDatePt;

    switch ($mask) {
    case "m": return $month;
    case "d": return $day;
    case "y": return $year;
    }

    return (trim($month . "/" . $day . "/" . $year));
}
return $dataStr;
 }


function renderChart($chartSWF, $strURL, $strXML, $chartId, $chartWidth, $chartHeight, $debugMode=false, $registerWithJS=false, $setTransparent="") {
//First we create a new DIV for each chart. We specify the name of DIV as "chartId"Div.         

if ($strXML=="")
    $tempData = "//Set the dataURL of the chart\n\t\tchart_$chartId.setDataURL(\"$strURL\")";
else
    $tempData = "//Provide entire XML data using dataXML method\n\t\tchart_$chartId.setDataXML(\"$strXML\")";

// Set up necessary variables for the RENDERCAHRT
$chartIdDiv = $chartId . "Div";
$ndebugMode = boolToNum($debugMode);
$nregisterWithJS = boolToNum($registerWithJS);
$nsetTransparent=($setTransparent?"true":"false");



$render_chart = <<<RENDERCHART

<!-- START Script Block for Chart $chartId -->
<div id="$chartIdDiv" align="center">
    Chart.
</div>
<script type="text/javascript"> 
    //Instantiate the Chart 
    var chart_$chartId = new FusionCharts("$chartSWF", "$chartId", "$chartWidth", "$chartHeight", "$ndebugMode", "$nregisterWithJS");
  chart_$chartId.setTransparent("$nsetTransparent");

    $tempData

    chart_$chartId.render("$chartIdDiv");
</script>   
<!-- END Script Block for Chart $chartId -->
RENDERCHART;

  return $render_chart;
}

DBConn.php is as follows

<?php
 function connectToDB() {



  $hostdb = 'localhost'; // MySQl host
  $userdb = 'root';  // MySQL username
  $passdb = '';  // MySQL password
  $namedb = 'phptest'; // MySQL database name


  $link = mysql_connect ("localhost:3306", "root", "");

   if (!$link) {
    die('Could not connect: ' . mysql_error());    }



    $db_selected = mysql_select_db($namedb);
    if (!$db_selected) {
    die ('Can\'t use database : ' . mysql_error());
    }
    return $link;
  }
 ?>

















  function renderChartHTML($chartSWF, $strURL, $strXML, $chartId, $chartWidth,  $chartHeight, $debugMode=false,$registerWithJS=false, $setTransparent="") {
    $strFlashVars = "&chartWidth=" . $chartWidth . "&chartHeight=" . $chartHeight . "&debugMode=" . boolToNum($debugMode);
if ($strXML=="")

    $strFlashVars .= "&dataURL=" . $strURL;
else

    $strFlashVars .= "&dataXML=" . $strXML;

  $nregisterWithJS = boolToNum($registerWithJS);
  if($setTransparent!=""){
    $nsetTransparent=($setTransparent==false?"opaque":"transparent");
  }else{
  $nsetTransparent="window";
  }
 $HTML_chart = <<<HTMLCHART
<!-- START Code Block for Chart $chartId -->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="$chartWidth" height="$chartHeight" id="$chartId">
    <param name="allowScriptAccess" value="always" />
    <param name="movie" value="$chartSWF"/>     
    <param name="FlashVars" value="$strFlashVars&registerWithJS=$nregisterWithJS" />
    <param name="quality" value="high" />
    <param name="wmode" value="$nsetTransparent" />
    <embed src="$chartSWF" FlashVars="$strFlashVars&registerWithJS=$nregisterWithJS" quality="high" width="$chartWidth" height="$chartHeight" name="$chartId" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="$nsetTransparent" />


</object>
<!-- END Code Block for Chart $chartId -->
HTMLCHART;

 return $HTML_chart; 
}

function boolToNum($bVal) {
return (($bVal==true) ? 1 : 0);
}

?>

Upvotes: 1

Views: 3744

Answers (3)

Anirudh Sood
Anirudh Sood

Reputation: 1426

Below is the solution.

$ganttChart = new FusionCharts("bar2d", "ex2" , "50%", "300", "chart-1", "json", $jsonData);

$ganttChart->render();

second parameter i.e. "ex2". For every chart you have to provide this id as unique.

Your multiple charts will be loaded.

thanks,

Anirudh Sood

Upvotes: 0

Pallav
Pallav

Reputation: 111

Each chart needs to have a different ID and DIV ID specified for it. In the line below, FactorySum is your chart ID - so please change that for each chart.

echo renderChart("FusionCharts/FCF_Pie3D.swf", "", $strXML, "FactorySum", 325,  225);

Upvotes: 1

Swarram
Swarram

Reputation: 383

You will have to call renderChart() function and create as many charts as you wish. All you need to take care is that you should set unique chart id to each chart.

Ref.Code:

echo renderChart("FusionCharts/FCF_Pie3D.swf", "", $strXML, "**FactorySum**",
325, 225);
echo renderChart("FusionCharts/FCF_Pie3D.swf", "", $strXML, "**FactorySum_1**",
325,225);

Upvotes: 0

Related Questions