{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">System Statistics Graph</span></td></tr>

</table>

<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="page-heading fullwidth float-left mgnB10">
								
							</div>
							<div class="graph-canvas fullwidth float-left">
								<!-- <canvas id="systemstat" style="display: block; width: 548px; height: 274px;" 
								width="548" height="274" class="chartjs-render-monitor"></canvas> -->
								<canvas id="lineChart" style="display: block; width: 548px; height: 274px;" 
								 width="800" height="450"></canvas>
							</div>
						</div>
					</div>
					
				</div>
			</div>
			{showpage:footer/index}
			<script type="text/javascript" src="js/Chart.min.js"></script>

			<script>
	
	
/*--------------System Statistics Graph--------------------*/
/*	// alert('{$pages}');
	
	// var pages='{$pages}';
	
		var lineChartData = {
			// labels: [{$engineNames}],
			labels: ['Engine Names'],
			datasets: [{
				label: 'Engines',
				borderColor: 'rgba(255,0,4,0.5)',
				backgroundColor:'rgba(255,0,4,0.3)',
				fill: false,
				// data: [{pages}],
				data: [{noescape:$engineNames}],
				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('systemstat').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 Caches',
            // data: [12, 19, 3, 5, 2, 3],
			data: {noescape:$engineCacheCount},
            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>