Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Samuel JohnsonCBESamuel JohnsonCBE 

Charts on Visualforce

I have created a visualforce page with two charts on the same page.  What I would like to do is be able to use the "var options" on each chart.  The representation options would be different for each.  I would like to have a different green area. for each.   I have also included my code here as well to try to figure this out.  

User-added image
 var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Open Rate', {!campaign.Avg_Open_Rate__c}],
          ['Click Rate', {!campaign.Avg_Click_Rate__c}],
         
     
        
        ]);

        var options = {
          
          width: 400, height: 300,
          greenFrom: -6, greenTo: 6,
          min: -50,
          max: 50,
          majorTicks: [-40, -30, -20, -10, 0, 10, 20, 30, 40]
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);

        setInterval(function() {
          data.setValue({!campaign.Avg_Open_Rate__c});
          chart.draw(data, options);
        }, 13000);
     
Rahul KhilwaniRahul Khilwani
Hi Samuel,

You can try creating two chart instances for each chart displayed. Try the below code to create two instances for the chart.
  
<apex:page >
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data_c1 = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
        ]);

        var data_c2 = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['CPU', 55],
        ]);

        var options_c1 = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

        var options_c2 = {
          width: 400, height: 120,
          redFrom: 10, redTo: 20,
          yellowFrom:20, yellowTo: 40,
          minorTicks: 5
        };

        var chart1 = new google.visualization.Gauge(document.getElementById('chart_div_1'));

        chart1.draw(data_c1, options_c1);
        
        var chart2 = new google.visualization.Gauge(document.getElementById('chart_div_2'));

        chart2.draw(data_c2, options_c2);
      }
    </script>
    <div id="chart_div_1" style="width: 400px; height: 120px;"></div>
    <div id="chart_div_2" style="width: 400px; height: 120px;"></div>
</apex:page>

Have a look to it, and let me know if this works.

Regards
Rahul