Untitled

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>NitraattiTyppi</title>
	<style>
	#data{
	width:60%;
	margin: 0 auto;
	}

	#Graafi {
	height: 600px;
	background-color: #FFFFFF;
	border: 2px outset black;
	padding: 50px;
	background-color: rgba(255,255,255, 0.8);
	}
	</style>

    <!-- JQuery -->
    <script type="text/javascript" src="/resources/jquery/jquery-1.11.2.js"></script>

    <link href="/resources/jquery-ui/jquery.datetimepicker.css" rel="stylesheet">

    <script type="text/javascript" src="/resources/jquery-ui/jquery.datetimepicker.js"></script>
    <!-- Charting Library -->
    <script type="text/javascript" src="/resources/amcharts/amcharts.js"></script>
    <script type="text/javascript" src="/resources/amcharts/serial.js"></script>
    <script type="text/javascript" src="/resources/amcharts/gauge.js"></script>

    <!-- Mango Rest API Helper -->
    <script type="text/javascript" src="/mango-javascript/mango/v1/mangoApi.js"></script>

	<!-- Mango Templating API -->
    <!-- Display Widgets -->
    <script type="text/javascript" src="/mango-javascript/mango/v1/serialChart.js"></script>
    <script type="text/javascript" src="/mango-javascript/mango/v1/barChart.js"></script>
    <script type="text/javascript" src="/mango-javascript/mango/v1/statisticsBarChart.js"></script>
    <script type="text/javascript" src="/mango-javascript/mango/v1/pieChart.js"></script>
    <script type="text/javascript" src="/mango-javascript/mango/v1/statistics.js"></script>
    <script type="text/javascript" src="/mango-javascript/mango/v1/gaugeChart.js"></script>

    <!-- Data Providers -->
    <script type="text/javascript" src="/resources/extend.js"></script>
    <script type="text/javascript" src="/mango-javascript/mango/v1/dataProvider.js"></script>
    <script type="text/javascript" src="/mango-javascript/mango/v1/pointValueDataProvider.js"></script>
    <script type="text/javascript" src="/mango-javascript/mango/v1/realtimePointValueDataProvider.js"></script>
    <script type="text/javascript" src="/mango-javascript/mango/v1/statisticsDataProvider.js"></script>
    <!-- Input Widgets -->
    <script type="text/javascript" src="/mango-javascript/mango/v1/dateTimePicker.js"></script>
    <script type="text/javascript" src="/mango-javascript/mango/v1/rollupPicker.js"></script>
    <script type="text/javascript" src="/mango-javascript/mango/v1/timePeriodTypePicker.js"></script>
    <script type="text/javascript" src="/mango-javascript/mango/v1/input.js"></script>
    <script type="text/javascript" src="/mango-javascript/mango/v1/select.js"></script>
    <script type="text/javascript" src="/mango-javascript/mango/v1/listView.js"></script>
    <!-- Templater Core -->
    <script type="text/javascript" src="/mango-javascript/mango/v1/dataDisplayManager.js"></script>
    <script type="text/javascript" src="/mango-javascript/mango/v1/dataPointMatcher.js"></script>
    <script type="text/javascript" src="/mango-javascript/mango/v1/dataPointGroup.js"></script>
    <script type="text/javascript" src="/mango-javascript/mango/v1/pointHierarchyGrouper.js"></script>
    <script type="text/javascript" src="/mango-javascript/mango/v1/dashboardTemplater.js"></script>


	<script type="text/javascript">

	var templater;

	$( document ).ready(function(){

		var displayConfigurations = new Array();
		var chart = new SerialChartConfiguration(
				'Graafi',
				[1],
				{
			titles: [{
            id: "Title-1",
            size: 15,
            text: "NitraattiTyppi"
            }],
			type: "serial",
			categoryField: "timestamp",
			dataDateFormat: "YYYY-MM-DD HH",
			theme: "light",
			categoryAxis: {
				minPeriod: "hh",
				parseDates: true
			},
			chartCursor: {
				enabled: true,
				balloonPointerOrientation: " vertical",
				categoryBalloonDateFormat: "JJ:NN"
			},
			chartScrollbar: {
				enabled: true,
				graph: "g1",
				offset: 30,
				oppositeAxis: false,
				scrollbarHeight: 90
			},
			graphs: [{
				bullet: "round",
				id: "g1",
				title: "ug/l",
				valueField: "NitraattiTyppi"
			}],
			valueAxes: [{
				id: "a1",
				title: "ug/l"
			}]
		},{
		},{
		});

		displayConfigurations.push(chart);

       var dataProviders = new Array();

	   var pointConfigurations = new Array();
	   pointConfigurations.push(new DataPointMatchConfiguration(1, [{matchAttribute: 'xid', regex: /NitraattiTyppi/}], {providerType: 'RealtimePointValue'}));

	   var group = new DataPointGroupConfiguration({
           groupBy: 'Folder',
           labelAttribute: 'name',
           matchConfigurations: [{
               matchAttribute: 'path',
               regex: /Target Folder/
           }]
           });

		var groupConfigurations = new Array();
		groupConfigurations.push(group);

		var groupListView = new ListViewConfiguration('groupsList', {}, {styleClass: "ui-btn"});

		var templaterConfig = {
			debug: true,
			type: 'PointHierarchy',
			displayConfigurations: displayConfigurations,
			pointConfigurations: pointConfigurations,
			groupConfigurations: groupConfigurations,
			dataProviders: dataProviders,
			groupSelectConfiguration: groupListView,
       }
	   templater = new DashboardTemplater(templaterConfig);
	});
	</script>

</head>
<body>
	<div id="data">
		<header></header>
		<div id="Graafi"></div>
		<footer></footer>
	</div>
</body>

</html>