231 lines
7.3 KiB
Smarty
231 lines
7.3 KiB
Smarty
<style type="text/css">
|
|
{literal}
|
|
.buttons {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
table tr td {
|
|
padding: 5px;
|
|
}
|
|
{/literal}
|
|
</style>
|
|
<script type="text/javascript" src="modules/EcmCharts/javascript/jquery-2.1.1.min.js"></script>
|
|
<script type="text/javascript">
|
|
{literal}
|
|
$(document).ready(function(){
|
|
function listenerFunction() {
|
|
//location.reload();
|
|
};
|
|
|
|
$("#chartTypeSelector").change(function() {
|
|
if( $(this).val() == 'pie' )
|
|
{
|
|
$("#documentTypeSelector").val("normal");
|
|
}
|
|
});
|
|
|
|
$("#documentTypeSelector").change(function(){
|
|
if( $(this).val() != 'normal' && $("#chartTypeSelector").val() == 'pie' )
|
|
{
|
|
$("#chartTypeSelector").val("column");
|
|
}
|
|
});
|
|
});
|
|
{/literal}
|
|
</script>
|
|
|
|
<ul class="tablist" style="width:100%;">
|
|
<li>
|
|
<a class="current" href="#">{$LANG.LBL_CHARTOPTIONS}</a>
|
|
</li>
|
|
</ul>
|
|
<form action="index.php" method="get" name="SalesChartOptions">
|
|
<input type="hidden" name="module" value="EcmCharts" />
|
|
<input type="hidden" name="action" value="SalesChart" />
|
|
<table style="border-top: 0px none; margin-bottom: 4px;width:100%" class="tabForm" border="0" cellpadding="0" cellspacing="0">
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>{$LANG.LBL_FROM}: </td>
|
|
<td>
|
|
{* Search by date_from *}
|
|
<input id="date_from" name="date_from" type="text" maxlength="10" size="11" tabindex="" title="" value="{$date_from}" autocomplete="off">
|
|
<img id="date_from_trigger" border="0" align="absmiddle" alt="Enter Date" src="themes/default/images/jscalendar.gif">
|
|
<script language="JavaScript" type="text/javascript">
|
|
Calendar.setup ({ldelim}
|
|
inputField : "date_from",
|
|
daFormat : "{$dateFormat}",
|
|
button : "date_from_trigger",
|
|
singleClick : true,
|
|
dateStr : "",
|
|
step : 1
|
|
{rdelim}
|
|
);
|
|
</script>
|
|
</td>
|
|
<td> {$LANG.LBL_TO}: </td>
|
|
<td>
|
|
{* Search by date_to *}
|
|
<input autocomplete="off" name="date_to" id="date_to" value="{$date_to}" title="" tabindex="" size="11" maxlength="10" type="text">
|
|
<img src="themes/default/images/jscalendar.gif" alt="Enter Date" id="date_to_trigger" align="absmiddle" border="0">
|
|
<script language="JavaScript" type="text/javascript">
|
|
Calendar.setup ({ldelim}
|
|
inputField : "date_to",
|
|
daFormat : "{$dateFormat}",
|
|
button : "date_to_trigger",
|
|
singleClick : true,
|
|
dateStr : "",
|
|
step : 1
|
|
{rdelim}
|
|
);
|
|
</script>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{$LANG.LBL_SHOW}: </td>
|
|
<td>
|
|
<select name="detail">
|
|
<option value="category" { if $detail == "category" || $detail == ""} selected="true" {/if} >Kategorii</option>
|
|
<option value="subcategory" { if $detail=="subcategory"} selected {/if} >Podkategorii</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<td>{$LANG.LBL_INCLUDED_DOCUMENT_TYPE}: </td>
|
|
<td>
|
|
<select id="documentTypeSelector" name="type">
|
|
<option value="%" { if $type == "%" || $type == ""} selected="true" {/if}>Faktury i korekty</option>
|
|
<option value="normal" { if $type == "normal"} selected="true" {/if}>Faktury</option>
|
|
<option value="correct" { if $type == "correct"} selected="true" {/if}>Korekty</option>
|
|
</select>
|
|
</td>
|
|
<tr>
|
|
<tr>
|
|
<td>{$LANG.LBL_CHARTTYPE}: </td>
|
|
<td>
|
|
<select id="chartTypeSelector" name="chartType">
|
|
<option value="column" { if $chartType == "column" || $chartType == ""} selected="true" {/if}>{$LANG.LBL_CHARTTYPECOLUMN}</option>
|
|
<option value="pie" { if $chartType == "pie"} selected="true" {/if}>{$LANG.LBL_CHARTTYPEPIE}</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<td>{$LANG.LBL_VIEW_COMPARATIVE_DATA}: </td>
|
|
<td>
|
|
<input type="radio" name="comparativeData" value="enabled" { if $comparativeData == "enabled" || $comparativeData == "" } checked {/if}> {$LANG.LBL_YES}
|
|
<input type="radio" name="comparativeData" style="margin-left: 20px" value="disabled" { if $comparativeData == "disabled" || $comparativeData == "" } checked {/if}> {$LANG.LBL_YES}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<input class="button" name="submit" value="{$LANG.LBL_GENERATECHART}" type="submit">
|
|
<input class="button" name="clear" value="{$LANG.LBL_RESTOREDEFAULTPARAMETERS}" type="button" onclick="location.href='index.php?module=EcmCharts&action=SalesChart';">
|
|
|
|
|
|
</form>
|
|
|
|
|
|
{*********************************************************************}
|
|
{*************************** CHART TPL} ******************************}
|
|
{*********************************************************************}
|
|
|
|
{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="sales_chart" style="width: 100%; height: 400px;">
|
|
<div class="no-data">
|
|
<div class="textCenter">
|
|
<span>
|
|
Brak danych od {$date_from} do {$date_to}, wybierz inny przedział dat.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{else}
|
|
<div id="sales_chart" style="width: 100%; height: 1000px;"></div>
|
|
{/if}
|
|
<br><br>
|
|
|
|
<!-- 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 options = {
|
|
{/literal}
|
|
title: '{$LANG.LBL_CHARTSALES} {$LANG.LBL_FROM} {$date_from} {$LANG.LBL_TO} {$date_to}',
|
|
{literal}
|
|
hAxis: {title: {/literal}{if $detail == 'category'}'Kategoria'{else}'Podkategoria'{/if}{literal}, titleTextStyle: {color: 'red'}},
|
|
legend: {position: 'bottom', textStyle: {fontSize: 10}},
|
|
tooltip:{textStyle:{fontSize:'12'}},
|
|
vAxis:{title: {/literal}'{$LANG.LBL_VALUEOFSALES}'{literal},textStyle:{color: '#000000',fontSize: '13', paddingRight: '100',marginRight: '100'}},
|
|
hAxis:{title:'',textStyle:{color: '#000000',fontSize: '13', paddingRight: '100',marginRight: '100'}}
|
|
};
|
|
|
|
{/literal}
|
|
{if $chartType == 'column' || $chartType == ''}
|
|
var chart = new google.visualization.ColumnChart(document.getElementById('sales_chart'));
|
|
{else}
|
|
var chart = new google.visualization.PieChart(document.getElementById('sales_chart'));
|
|
{/if}
|
|
|
|
{literal}
|
|
|
|
chart.draw(data, options);
|
|
|
|
}
|
|
|
|
// sekunda opóźnienia, żeby zdążył wczytać się moduł "visualization"
|
|
setTimeout(drawChart, 1000);
|
|
|
|
</script>
|
|
{/literal}
|
|
{/if}
|