Displaying more than 1 Angular Chart

[Greg Lincoln]

Hi,

I am trying to display 2 angular charts in the one page, to ensure I'm doing the right thing I have a couple of questions:-

fusioncharts.php

<script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>

should I only call these 2 scripts once? or doesn't it matter

Have look at other forum posts regarding this issue and have the following code, another file calls this code for each graph $Chart_no tells this code which code to execute below.

$Guage_ID can equal either angulargauge-1 or angulargauge-2 depending on either the first or second graph being displayed.

$Graph_Heading and $Graph_Value are populated from the previous file

Where I expect to see the second graph all I get is Chart will render here!

 

<?php

                $gaugeData = "{
                    'chart': {
                        'caption': '".$Graph_Heading."',
                        'lowerLimit': '0',
                        'upperLimit': '100',
                        'showValue': '1',
                        'numberSuffix': '%',
                        'theme': 'fusion',
                         'bgColor': '#f2f2f2',
                        'showToolTip': '0'
                    },
                    'colorRange': {
                        'color': [{
                            'minValue': '0',
                            'maxValue': '50',
                            'code': '#F2726F'
                        }, {
                            'minValue': '50',
                            'maxValue': '75',
                            'code': '#FFC533'
                        }, {
                            'minValue': '75',
                            'maxValue': '100',
                            'code': '#62B58F'
                        }]
                    },
                    'dials': {
                        'dial': [{
                            'value': '".$Graph_Value."'
                        }]
                    }
                }";
print "<br>cn ".$Chart_no;
if ($Chart_no=="1"){
      // chart object
      $Chart1 = new FusionCharts("angulargauge", $Guage_ID , "600", "400", "angulargauge-container", "json", $gaugeData);

      // Render the chart
      $Chart1->render();
   }
if ($Chart_no=="2"){
      // chart object
     $Chart2 = new FusionCharts("angulargauge", $Guage_ID , "600", "400", "angulargauge-container", "json", $gaugeData);

      // Render the chart
      $Chart2->render();
   }
?>

        <div id="angulargauge-container">Chart will render here!</div>

[Akash Biswas]

Hi Greg,

 

For rendering multiple charts on gauges, you need to add separate container div elements for each chart or gauge. Since, each chart or gauge renders on individual div containers, the ID provided to the div elements must be unique, and the same need to be provided the "renderAt" parameter of the respective FusionCharts constructor function.

<div id="angulargauge-container1">Chart will render here!</div>

<div id="angulargauge-container2">Chart will render here!</div>

$Chart1 = new FusionCharts("angulargauge", $Guage_ID , "600", "400", "angulargauge-container1", "json", $gaugeData1);

$Chart2 = new FusionCharts("angulargauge", $Guage_ID , "600", "400", "angulargauge-container2", "json", $gaugeData2);

 

Thanks,

Akash.