Display Charts on VisualForce Page?

How to generate Column Chart in Visualforce pages and I have a requirement that on click of color column of chart , i have to perform some task. How can i perform that also ?

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You could use a JavaScript based solution with Google Charts.

Create a Google Column Chart.
From your page, get the data from a Salesforce. Here are some possibilities.
1. Create an Apex controller and call to it from your page. Look at using a @RemoteAction to get the data. You may want to use the Analytics API in Apex to get the data.
2. Use the Analytics API via REST in JavaScript and don’t use an Apex Controller at all.
3. Use Remote Objects and don’t use an Apex Controller at all.

Configure your chart to handle the event. See Handling Events and Column Chart Events.

Here is a simple example from the Google Column Chart docs. You would need to replace the static sample data with data retrieved dynamically and also add in the event handling.

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004',  1000,      400],
    ['2005',  1170,      460],
    ['2006',  660,       1120],
    ['2007',  1030,      540]
  ]);

  var options = {
    title: 'Company Performance',
    hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
  };

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

  chart.draw(data, options);

}
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating