crm.e5.pl/modules/EcmCharts/Dashlets/MyContractorsChartsSalesDashlet/MyContractorsChartsSalesDashlet.tpl

{*

/**
 * SugarCRM is a customer relationship management program developed by
 * SugarCRM, Inc. Copyright (C) 2004 - 2009 SugarCRM Inc.
 * 
 * This program is free software; you can redistribute it and/or modify it under
 * the terms of the GNU General Public License version 3 as published by the
 * Free Software Foundation with the addition of the following permission added
 * to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
 * IN WHICH THE COPYRIGHT IS OWNED BY SUGARCRM, SUGARCRM DISCLAIMS THE WARRANTY
 * OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
 * 
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more
 * details.
 * 
 * You should have received a copy of the GNU General Public License along with
 * this program; if not, see http://www.gnu.org/licenses or write to the Free
 * Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
 * 02110-1301 USA.
 * 
 * You can contact SugarCRM, Inc. headquarters at 10050 North Wolfe Road,
 * SW2-130, Cupertino, CA 95014, USA. or at email address contact@sugarcrm.com.
 * 
 * The interactive user interfaces in modified source and object code versions
 * of this program must display Appropriate Legal Notices, as required under
 * Section 5 of the GNU General Public License version 3.
 * 
 * In accordance with Section 7(b) of the GNU General Public License version 3,
 * these Appropriate Legal Notices must retain the display of the "Powered by
 * SugarCRM" logo. If the display of the logo is not reasonably feasible for
 * technical reasons, the Appropriate Legal Notices must display the words
 * "Powered by SugarCRM".
 */
*}

{if $chartOptions == ''}
{literal}
	<style type="text/css">
		.no-data {
			display: table;
			width: 100%;
			height: 100%;
		}

		.textCenter {
			display: table-cell;
			vertical-align: middle;
			text-align: center;
		}
			.textCenter span {
				font-size: 16px;
				border: 1px dashed #E03E3E;
				padding: 10px;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
				box-shadow: 10px 10px 5px #AAAAAA;
				background-color: #FFDEDE;
				color: #E03E3E;
			}

	</style>
{/literal}
{/if}

    {if $chartOptions == ''}
	<div id='jotpsadad_{$id}' ondblclick='JotPad.edit(this, "{$id}")' style='overflow: auto; width: 100%; height: 200px; border: 1px #ddd solid'>
	   <div id="contractors_sales_chart{$id}" style="width: 100%; height: 100%;">
	   		<div class="no-data">
	   			<div class="textCenter">
	       			<span>
	       				Brak danych od {$date_from} do {$date_to}, wybierz inny przedział dat.
	       			</span>
	       		</div>
	   		</div>
	   </div>
	</div>
	{else}
	<div id='jotpsadad_{$id}' ondblclick='JotPad.edit(this, "{$id}")' style='overflow: auto; width: 100%; height: 800px; border: 1px #ddd solid'>
	   <div id="contractors_sales_chart{$id}" style="width: 100%; height: 98%;"></div>
	</div>
	{/if}

<!-- GOOGLE CHARTS API -->
{if $chartOptions != ''}
	{literal}
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		<script type="text/javascript" src="modules/EcmCharts/Dashlets/MyChartsSalesDashlet/js/salesChart.js"></script>
		<script type="text/javascript">

	    // Load the Visualization API and the piechart package.
	    google.load('visualization', '1', {'packages':['corechart','geochart','table']});

		function drawChart() {
		  var data = google.visualization.arrayToDataTable([
		    ['Kategoria', 'Sprzedaż w aktualnym roku'{/literal}
		    	{if $comparativeData == 'enabled'} , 'Sprzedaż z poprzedniego roku'{/if}
		    {literal}],

		    {/literal}
		  		{$chartOptions}	  
		  	{literal}
		  ]);
		  
	      var formatter = new google.visualization.NumberFormat({
	          suffix: 'zł'
	      });
	    
	      formatter.format(data, 1); // Apply formatter to second column.
	      {/literal}
	      {if $comparative_data_on == 'true' }
	    	  formatter.format(data, 2); // Apply formatter to second column.
		  {/if}
	      {literal}

		  var options = {
		  	{/literal}
		    title: '{$LANG.LBL_CHARTSALES} {$LANG.LBL_FROM} {$date_from} {$LANG.LBL_TO} {$date_to}',
		    {literal}
		    legend: {position: 'bottom', textStyle: {fontSize: 10}},
			tooltip:{textStyle:{fontSize:'10'}},
			vAxis:{title: {/literal}'{$LANG.LBL_VALUEOFSALES}'{literal},textStyle:{color: '#000000',fontSize: '10', paddingRight: '100',marginRight: '100'}},
			hAxis:{title:{/literal}{if $detail == 'category'}'{$LANG_LBL_CATEGORY}'{else}'{$LANG_LBL_SUBCATEGORY}'{/if}{literal}, titleTextStyle: {color: 'red'},textStyle:{color: '#000000',fontSize: '11', paddingRight: '100',marginRight: '100'}}

		  };

		  {/literal}
		  {if $chartType == 'column' or $chartType == ''}
		  	var chart = new google.visualization.ColumnChart(document.getElementById('contractors_sales_chart{$id}'));
		  {elseif $chartType == 'pie'}
		  	var chart = new google.visualization.PieChart(document.getElementById('contractors_sales_chart{$id}'));
		  {elseif $chartType == 'line'}
		  	var chart = new google.visualization.LineChart(document.getElementById('contractors_sales_chart{$id}'));
		  {elseif $chartType == 'stepped'}
		  	var chart = new google.visualization.SteppedAreaChart(document.getElementById('contractors_sales_chart{$id}'));
		  {else}
		  	var chart = new google.visualization.AreaChart(document.getElementById('contractors_sales_chart{$id}'));
		  {/if}
		  {literal}

		  chart.draw(data, options);

		}

		// sekunda opóźnienia, żeby zdążył wczytać się moduł "visualization"
		setTimeout(drawChart, 1000);

		</script>
	{/literal}
{/if}