Full Integration of Highstock chart

jsonp.php

<?php
include “config.php”;
$callback = (string)$_GET[‘callback’];
if (!$callback) $callback = ‘callback’;

$query = query(”
select current_datetime as datetime,voltage
from amp3b”);

while($row=mysqli_fetch_array($query)){
$data[]=array($row[‘datetime’]*1000 ,(float)$row[‘voltage’]);
}
$json =json_encode($data, JSON_NUMERIC_CHECK);
header(‘Content-Type: text/javascript’);
echo “$callback($json);”;
?>

 

config.php

<?php

$dbUser = “root”;
$dbPass = “”;
$dbName = “chart”;
$dbHost = “localhost”;
$conn = mysqli_connect($dbHost,$dbUser,$dbPass);
mysqli_select_db($conn, $dbName);
/*Start Security Purpose*/
if (get_magic_quotes_gpc()) {
function stripslashesGpc(&$value)
{
$value = stripslashes($value);
}
array_walk_recursive($_GET , ‘stripslashesGpc’);
array_walk_recursive($_POST , ‘stripslashesGpc’);
array_walk_recursive($_COOKIE , ‘stripslashesGpc’);
array_walk_recursive($_REQUEST , ‘stripslashesGpc’);
}
//Prevent Sql Injection
$_POST = isset($_POST)?$_POST:””;
array_walk($_POST, function(&$string) use ($conn) { $string = mysqli_real_escape_string($conn, $string);});
/*End Security Purpose*/
function query($query){
global $conn;
$result=mysqli_query($conn,$query) or die(“<li>Query:$query</li>Error: <li>Errpr:”.mysqli_error($conn).”</li>”);
return $result;
}
function URL_forward( $Page, $Time )
{
print(“<script language=\”JavaScript\”>”);
print(“setTimeout(\”startover()\”, $Time);”);
print(“function startover()”);
print(“{ window.location = ‘$Page’;}”);
print(“</script>”);
}

?>

 

index.html

<!DOCTYPE html>
<html lang=”en”><head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Demos</title>
</head><body>
<title>Compare multiple series</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<script type=”text/javascript” src=”js/jquery-2.js”></script>
<script type=”text/javascript” src=”js/highstock.js”></script>

<div id=”container”></div>
<script type=”text/javascript”>
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = [‘GOOG’],
colors = Highcharts.getOptions().colors;

$.each(names, function(i, name) {
$.getJSON(‘jsonp.php?filename=’+ name.toLowerCase() +’-c.json&callback=?’, function(data) {
seriesOptions[i] = {
name: name,
data: data
};

// As we’re loading the data asynchronously, we don’t know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter++;

if (seriesCounter == names.length) {
createChart();
}
});
});

// create the chart when all data is loaded
function createChart() {
chart = new Highcharts.StockChart({“chart”:{“renderTo”:”container”},”rangeSelector”:{“selected”:4},”yAxis”:{“labels”:{“formatter”:function() {
return (this.value > 0 ? ‘+’ : ”) + this.value + ‘%’; }},”plotLines”:[{“value”:0,”width”:2,”color”:”silver”}]},”plotOptions”:{“series”:{“compare”:”percent”}},”tooltip”:{“pointFormat”:”<span style=\”color:{series.color}\”>{series.name}<\/span>: <b>{point.y}<\/b> ({point.change}%)<br\/>”,”valueDecimals”:2},”series”:seriesOptions}); }
</script>

</body></html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s