{showpage:header/index}
{showpage:header/statistics_top_panel}
<table align="center" width="45%" cellpadding="0" cellspacing="0" style="border-bottom-color:#cccccc;border-bottom-style:solid;border-bottom-width:1px;">
<tr><td colspan="3" height="50" align="center"><span id="styletitle">Engine Statistics Graph</span></td></tr>

</table>
{formstart:filterform:{url:(statisticsgraph/engine_statistics_graph)}:POST}
<table width="60%" align="center">
<tr>
<td align="right" width="30%" height="20"><span style="font-weight:bold;">Time Period : </span></td>
<td align="left"><select name="timeperiod">
      <option value="" selected>All Time</option>
	  {if(!empty($time))}
        <option value="86400" {if($time=="86400")} selected {endif}>Today</option>
        <option value="604800"{if($time=="604800")} selected {endif}>Last week</option>
        <option value="2678400" {if($time=="2678400")} selected {endif}>Last Month</option>
        <option value="31536000" {if($time=="31536000")} selected {endif}>Last Year</option>
	{else}
	    <option value="86400">Today</option>
        <option value="604800">Last week</option>
        <option value="2678400">Last Month</option>
        <option value="31536000">Last Year</option>
	{endif}
 </select>
</td>
<td align="left">
<input type="submit" value="Show Statistics Graph" name="submit">
</td>
</tr>
</table>
{formend:filterform}
<div class="fullwidth float-left mgnT20">
				<div class="row">
					<div class="col-md-7">
						<div class="dashboard-card fullwidth float-left  p-3 mgnB20">
							
							<div class="graph-canvas fullwidth float-left">
								<canvas id="lineChart" style="display: block; width: 548px; height: 274px;" width="548" height="274" class="chartjs-render-monitor"></canvas>
							</div>
						</div>
					</div>
					
				</div>
			</div>
			{showpage:footer/index}
			<script type="text/javascript" src="js/Chart.min.js"></script>

<script>
/*	
	
	//alert('{$pages}');
	var totalsearches='{$totalsearches}';
	
		var lineChartData = {
			//labels: [{$engines}],
			//labels:["sun","mon"],
			datasets: [{
				label: 'Totalsearches',
				borderColor: 'rgba(255,0,4,0.5)',
				backgroundColor:'rgba(255,0,4,0.3)',
				fill: false,
				data: [{noescape:$totalsearches}],
				yAxisID: 'y-axis-1',
			},
			 {
				label: 'Searches',
				borderColor: 'rgba(1,172,255,0.5)',
				backgroundColor:'rgba(1,172,255,0.3)',
				fill: false,
				data: [{noescape:$totalsearches}],
				yAxisID: 'y-axis-2'
			}
			]
		};
	
		var ctx = document.getElementById('enginestat').getContext('2d');
		window.myLine = Chart.Line(ctx, {
				data: lineChartData,
				options: {
					responsive: true,
					hoverMode: 'index',
					stacked: false,
					scales: {
						yAxes: [{
							type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
							display: true,
							position: 'left',
							id: 'y-axis-1',
						}, {
							type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
							display: true,
							position: 'right',
							id: 'y-axis-2',

							// grid line settings
							gridLines: {
								drawOnChartArea: false, // only want the grid lines for one axis to show up
							},
						}],
					}
				}
			});
*/
</script>
<script language="JavaScript">
	var ctx = document.getElementById('lineChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        // labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
		labels: {noescape:$engineNames},

        datasets: [{
            label: '# of Searches',
            // data: [12, 19, 3, 5, 2, 3],
			data: {noescape:$engineSearchCount},
            backgroundColor: [
                // 'rgba(255, 99, 132, 0.2)',
                // 'rgba(54, 162, 235, 0.2)',
                // 'rgba(255, 206, 86, 0.2)',
                // 'rgba(75, 192, 192, 0.2)',
                // 'rgba(153, 102, 255, 0.2)',
                // 'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                // 'rgba(255, 99, 132, 1)',
                // 'rgba(54, 162, 235, 1)',
                // 'rgba(255, 206, 86, 1)',
                // 'rgba(75, 192, 192, 1)',
                // 'rgba(153, 102, 255, 1)',
                // 'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>