radityopw/combine_php_db_vis.js.php

## combine_php_db_vis.js.php
<!DOCTYPE HTML>
<html>

<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <title>Graph2d | Basic Example</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }
  </style>

  <script src="../lib/bower_components/vis/dist/vis.js"></script>
  <link href="../lib/bower_components/vis/dist/vis.css" rel="stylesheet" type="text/css" />
  </head>
<body>
<h2>Graph2d | Basic Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
  This example shows the most basic functionality of the vis.js Graph2d module. An array or a vis.Dataset can be used as input.
  In the following examples we'll explore the options Graph2d offest for customization. This example uses all default settings.
  There are 10 predefined styles that will be cycled through automatically when you add different groups. Alternatively you can
  create your own styling.
  <br /><br />
  Graph2d is built upon the framework of the newly refactored timeline. A lot of the timeline options will also apply to Graph2d.
  In these examples however, we will focus on what's new in Graph2d!
</div>
<br />
<div id="visualization"></div>
<br />


<script type="text/javascript">

  var container = document.getElementById('visualization');
  /*
  var items = [
    {x: '2014-06-11', y: 10},
    {x: '2014-06-12', y: 25},
    {x: '2014-06-13', y: 30},
    {x: '2014-06-14', y: 10},
    {x: '2014-06-15', y: 15},
    {x: '2014-06-16', y: 30}
  ];
  */
  <?php

	include '../common/conn.php';

	$sql = "SELECT '2014-06-11' as x, 10 as y FROM dual
			UNION
			SELECT '2014-06-12' as x, 25 as y FROM dual
			UNION
			SELECT '2014-06-13' as x, 30 as y FROM dual
			UNION
			SELECT '2014-06-14' as x, 10 as y FROM dual
			UNION
			SELECT '2014-06-15' as x, 15 as y FROM dual
			UNION
			SELECT '2014-06-16' as x, 30 as y FROM dual
			";
	$res = mysqli_query($con,$sql);
	$data = array();
	while($row = mysqli_fetch_assoc($res)){
		$data[] = $row;
	}

	mysqli_close($con);

	?>
  var items = <?=json_encode($data);?>;

  var dataset = new vis.DataSet(items);
  var options = {
    start: '2014-06-10',
    end: '2014-06-18'
  };
  var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>
	<!DOCTYPE HTML>
	<html>

	<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">
	<title>Graph2d \| Basic Example</title>

	<style type="text/css">
	body, html {
	font-family: sans-serif;
	}
	</style>

	<script src="../lib/bower_components/vis/dist/vis.js"></script>
	<link href="../lib/bower_components/vis/dist/vis.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<h2>Graph2d \| Basic Example</h2>
	<div style="width:700px; font-size:14px; text-align: justify;">
	This example shows the most basic functionality of the vis.js Graph2d module. An array or a vis.Dataset can be used as input.
	In the following examples we'll explore the options Graph2d offest for customization. This example uses all default settings.
	There are 10 predefined styles that will be cycled through automatically when you add different groups. Alternatively you can
	create your own styling.
	<br /><br />
	Graph2d is built upon the framework of the newly refactored timeline. A lot of the timeline options will also apply to Graph2d.
	In these examples however, we will focus on what's new in Graph2d!
	</div>
	<br />
	<div id="visualization"></div>
	<br />



	<script type="text/javascript">

	var container = document.getElementById('visualization');
	/*
	var items = [
	{x: '2014-06-11', y: 10},
	{x: '2014-06-12', y: 25},
	{x: '2014-06-13', y: 30},
	{x: '2014-06-14', y: 10},
	{x: '2014-06-15', y: 15},
	{x: '2014-06-16', y: 30}
	];
	*/
	<?php

	include '../common/conn.php';

	$sql = "SELECT '2014-06-11' as x, 10 as y FROM dual
	UNION
	SELECT '2014-06-12' as x, 25 as y FROM dual
	UNION
	SELECT '2014-06-13' as x, 30 as y FROM dual
	UNION
	SELECT '2014-06-14' as x, 10 as y FROM dual
	UNION
	SELECT '2014-06-15' as x, 15 as y FROM dual
	UNION
	SELECT '2014-06-16' as x, 30 as y FROM dual
	";
	$res = mysqli_query($con,$sql);
	$data = array();
	while($row = mysqli_fetch_assoc($res)){
	$data[] = $row;
	}

	mysqli_close($con);

	?>
	var items = <?=json_encode($data);?>;

	var dataset = new vis.DataSet(items);
	var options = {
	start: '2014-06-10',
	end: '2014-06-18'
	};
	var graph2d = new vis.Graph2d(container, dataset, options);
	</script>
	</body>
	</html>