Hello,
Initially I copied the example from the url: https://developers.google.com/chart/interactive/docs/quick_start in the googlecharts.php and put it in the Suitecrm root.
Therefore, consult the data to be plotted.
In the following example, two graphs are entered with the same data:
New php file in the root (googlecharts.php)
<html>
<head>
<?php
global $current_user;
global $db;
$query="SELECT SUM(amount) as total FROM opportunities where assigned_user_id='".$current_user->id."' and sales_stage='Closed Won'";
$result=$db->query($query,true);
$row=$db->fetchByAssoc($result);
$OpportunitiesWon=$row['total'];
$query = "SELECT SUM(amount) as total FROM opportunities where assigned_user_id='".$current_user->id."' and sales_stage='Closed Lost'";
$result=$db->query($query,true);
$row=$db->fetchByAssoc($result);
$OpportunitiesLost=$row['total'];
$query = "SELECT SUM(amount) as total FROM opportunities where assigned_user_id='".$current_user->id."' and sales_stage='Proposal/Price Quote'";
$result=$db->query($query,true);
$row=$db->fetchByAssoc($result);
$OpportunitiesProposal=$row['total'];
?>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Ganadas', <?php echo $OpportunitiesWon ?>],
['Perdidas', <?php echo $OpportunitiesLost ?>],
['Ofertadas', <?php echo $OpportunitiesProposal ?>],
]);
// Set chart options
var options = {'title':'Oportunidades Ganadas Vs. Perdidas',
'width':800,
'height':460, colors: ['#e0440e', '#1D7603', '#334CFF']};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
var barchart_options = {title:'Barchart: How Much Pizza I Ate Last Night',
width:800,
height:460,
legend: 'none'};
var barchart = new google.visualization.BarChart(document.getElementById('barchart_div'));
barchart.draw(data, barchart_options);
}
</script>
<body>
<!--Table and divs that hold the pie charts-->
<table class="columns">
<tr>
<td><div id="chart_div" style="border: 1px solid #ccc"></div></td>
</tr>
<td><div id="barchart_div" style="border: 1px solid #ccc"></div></td>
</tr>
</table>
</body>
Then I call the file through an entrypoint. .in include/MVC/Controller/entry_point_register.php or custominclude/MVC/Controller/entry_point_register.php
'googleCharts' => array('file' => 'googlecharts.php', 'auth' => true),
Finally I just add a dashlet type url and incerto the url with the entrypoint.
http://yourcrm.com/crmesatic/index.php?entryPoint=googleCharts
Note set
Title
Generic Dashlet
Auto-Refresh
Website Location
http://esatic.com/crmesatic/index.php?entryPoint=googleCharts
Dashlet Height (in pixels) 1000
Thank you and I hope it is a base to create many graphics of all the modules.
Javer Rivas.