I try to generate highcharts graphics. If I select a city and pass it as $_POST["City"] it doesn't build the arrays with the data (TMax, TMin) when it consults to my basedate mysql. If I choose directly the city it generates correctly. I show you my code. First the code I have inside html file.
<form action="highcharts.php" method="POST">
<b>City:</b> <select name="City">
<option>London</option>^M
<option>Paris</option>^M
</select><br><br>
<button type="submit">Show Graphic</button><br>
</form>
Here comes the code of highcharts.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("mysql-highcharts.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'TMax-TMin',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Temperature (ºC)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: json
});
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
And at the end, the code consulting to base-date mysql-highcharts.php
<?php
$con = mysqli_connect("xxxxx","xxxx","xxxx","xxx");
if (!$con) {
die('Could not connect: ' . mysqli_error());
}
$sth = mysqli_query($con,"SELECT City,TMax FROM Meteo2 where City= '" . $_POST["City"] ."' order by Data");
$rows = array();
$rows['name'] = 'TMAX';
while($r = mysqli_fetch_array($sth)) {
$rows['data'][] = $r['TMax'];
}
$sth = mysqli_query($con,"SELECT City,TMin FROM Meteo2 where City= '" . $_POST["City"] ."' order by Data");
$rows1 = array();
$rows1['name'] = 'TMIN';
while($rr = mysqli_fetch_assoc($sth)) {
$rows1['data'][] = $rr['TMin'];
}
$result = array();
array_push($result,$rows);
array_push($result,$rows1);
print json_encode($result, JSON_NUMERIC_CHECK);
mysqli_close($con);
?>
Any help please?
<select name="City">
<option value="London">London</option>
<option value="Paris">Paris</option>
</select>
value attribut is missing in <select> it may cause blank $_POST to mysql-highcharts.php
Edit
Ok, Due to action="highcharts.php", $_POST['City'] will be accessible to highcharts.php
Add
<?php
session_start();
$_SESSION['city'] = $_POST['City'];
?>
To highcharts.php And
<?php
session_start();
$con = mysqli_connect("xxxxx","xxxx","xxxx","xxx");
if (!$con) {
die('Could not connect: ' . mysqli_error());
}
$sth = mysqli_query($con,"SELECT City,TMax FROM Meteo2 where City= '" . $_SESSION['city'] ."' order by Data");
$rows = array();
$rows['name'] = 'TMAX';
while($r = mysqli_fetch_array($sth)) {
$rows['data'][] = $r['TMax'];
}
$sth = mysqli_query($con,"SELECT City,TMin FROM Meteo2 where City= '" .$_SESSION['city'] ."' order by Data");
$rows1 = array();
$rows1['name'] = 'TMIN';
while($rr = mysqli_fetch_assoc($sth)) {
$rows1['data'][] = $rr['TMin'];
}
$result = array();
array_push($result,$rows);
array_push($result,$rows1);
print json_encode($result, JSON_NUMERIC_CHECK);
mysqli_close($con);
?>
Related
I have had a look at my chart issue and I think the problem lies in the Highstock code. I have 2 other charts running the same php code and I have only changed from highchart to highstock.
I am trying to add a range selector in my chart. The code for that works in terms of showing the zoom and selector buttons but the date is now showing incorrectly.
I am drawing the data from an online MySQL data base so I its hard to run a demo for you.The timestamp format has worked in my other charts as mentioned.
This first code shows the date correctly
<?php
// 1-test.php
$servername = "localhost";
$dbname = "";
$username = "";
$password = "";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, value1, reading_time FROM Sensor order by reading_time desc limit 40";
$result = $conn->query($sql);
while ($data = $result->fetch_assoc()){
$sensor_data[] = $data;
}
$readings_time = array_column($sensor_data, 'reading_time');
$i = 0;
foreach ($readings_time as $reading){
$readings_time[$i] = date("d-M H:i", strtotime("$reading + 16 hours"));
$i += 1;
}
$value1 = json_encode(array_reverse(array_column($sensor_data, 'value1')), JSON_NUMERIC_CHECK);
$reading_time = json_encode(array_reverse($readings_time), JSON_NUMERIC_CHECK);
/*echo $value1;
echo $reading_time;*/
$result->free();
$conn->close();
?>
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="30">
<link rel="icon" type="image/png" href="favicon.png">
<script src="https://code.highcharts.com/highcharts.js"></script>
<style>
body {
min-width: 310px;
max-width: 1500px;
height: 500px;
margin: 0 auto;
}
h2 {
font-family: Arial;
font-size: 2.5rem;
text-align: center;
}
</style>
<body>
<h2>Test page 2</h2>
<div id="chart-temperature" class="container"></div>
</div>
<script>
var value1 = <?php echo $value1; ?>;
var reading_time = <?php echo $reading_time; ?>;
var chartT = new Highcharts.Chart({
chart: { renderTo : 'chart-temperature',
type: 'spline'
},
title: { text: 'Roof Temperature' },
series: [{
showInLegend: false,
data: value1
}],
plotOptions: {
spline: { animation: false,
dataLabels: { enabled: true }
},
series: { color: '#059e8a' }
},
xAxis: {
type: 'datetime',
categories: reading_time
},
yAxis: {
title: { text: 'Temp (C)' }
},
credits: { enabled: false }
});
</script>
</body>
</html>
Then this code shows the date as Thursday,Jan 1, 00:00:00:001
<?php
$servername = "localhost";
$dbname = "";
$username = "";
$password = "";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, value1, reading_time FROM Sensor order by reading_time desc limit 40";
$result = $conn->query($sql);
while ($data = $result->fetch_assoc()){
$sensor_data[] = $data;
}
$readings_time = array_column($sensor_data, 'reading_time');
$i = 0;
foreach ($readings_time as $reading){
$readings_time[$i] = date("d-M H:i", strtotime("$reading + 16 hours"));
$i += 1;
}
$value1 = json_encode(array_reverse(array_column($sensor_data, 'value1')), JSON_NUMERIC_CHECK);
$reading_time = json_encode(array_reverse($readings_time), JSON_NUMERIC_CHECK);
/*echo $value1;
echo $reading_time;*/
$result->free();
$conn->close();
?>
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="30">
<link rel="icon" type="image/png" href="favicon.png">
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<style>
body {
min-width: 310px;
max-width: 1500px;
height: 500px;
margin: 0 auto;
}
h2 {
font-family: Arial;
font-size: 2.5rem;
text-align: center;
}
</style>
<body>
<h2>Test Page</h2>
<div id="chart-temperature" class="container"></div>
<script>
var value1 = <?php echo $value1; ?>;
var reading_time = <?php echo $reading_time; ?>;
var chartH = new Highcharts.stockChart({
chart: { renderTo : 'chart-temperature',
type: 'spline'
},
title: { text: 'Roof Temperature' },
series: [{
showInLegend: false,
data: value1
}],
plotOptions: {
spline: { animation: false,
dataLabels: { enabled: true }
},
series: { color: '#059e8a' }
},
rangeSelector: {
buttons: [{
type: 'day',
count: 3,
text: '3d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 3
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { second: '%H:%M:%S' },
categories: reading_time
},
yAxis: {
title: { text: 'Temp (C)' }
},
credits: { enabled: false }
});
</script>
</body>
</html>
the first screen shot is working. The second is the wrong date,
Any thoughts on how to change the date
The difference between the charts results from the fact that the second chart is a stock chart, which doesn't support categories on a x-axis. You need to use data in the [x, y] format.
var value1 = [18.10, 14.5];
var reading_time = ['2021-08-22 15:00:53', '2021-08-23 15:00:53'];
var seriesData = value1.map(function(val, index) {
return [new Date(reading_time[index]).getTime(), val];
});
Live demo: http://jsfiddle.net/BlackLabel/xLh7y8d6/
API Reference: https://api.highcharts.com/highcharts/xAxis.type
I am trying to fetch data between two dates using Ajax and displaying the graph using HighCharts.
Below is what i have tried so far;
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../webroot/css/cake.generic.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//default
$('#dynamic_data').change(function() {
var startdate = document.getElementById('startdate').value;
var enddate = document.getElementById('enddate').value;
});
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Highcharts Chart PHP with MySQL Example',
x: -20 //center
},
subtitle: {
text: 'Sumber : Jabatan XYZ',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Jumlah Pelawat'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>:<b>{point.y}</b> of total<br/>'
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
shadow: true
},
series: []
};
function getAjaxData(id) {
$.getJSON("data/data-basic-colm-ajax.php", function(json) {
options.xAxis.categories = json[0]['data']; //xAxis: {categories: []}
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
}
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<a class="link_header" href="/highcharts/"><< Back to index</a>
<div class="menu_top" >
<div id="dynamic_data">
<input type="date" id="startdate">
<input type="date" id="enddate">
</div>
</div>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
</body>
</html>
Here is my data-basic-colm-ajax.php file,
<?php
require '../../conn/connection.php';
$startdate = $_GET['startdate'];
$enddate = $_GET['enddate'];
$result = mysql_query('SELECT DISTINCT(membername), COUNT(membername)
AS member
FROM responses
WHERE timerecorded>=" . $startdate . " AND AND timerecorded<=" . $enddate . " GROUP BY membername;');
$bln = array();
$bln['name'] = 'Bulan';
$rows['name'] = 'Jumlah Pelawat';
while ($r = mysql_fetch_array($result)) {
$bln['data'][] = $r['membername'];
$rows['data'][] = $r['member'];
}
$rslt = array();
array_push($rslt, $bln);
array_push($rslt, $rows);
print json_encode($rslt, JSON_NUMERIC_CHECK);
mysql_close($con);
Since i am new to Ajax so any help will be appreciated.
I'm not sure why you want change event on div, try change into this :
<div id="dynamic_data">
<input type="date" id="startdate">
<input type="date" id="enddate">
// add button
<input type="button" id="myBtn">
</div>
JS
// this function called after button was clicked
$('#myBtn').click(function(){
var startdate = $('#startdate').val(),
enddate = $('#enddate').val();
getAjaxData(startdate, enddate);
});
// i'm assume the queries from database already worked out
// simply use this below code to send parameter during request
function getAjaxData(startdate, enddate) {
$.getJSON( "data/data-basic-colm-ajax.php", { startdate: startdate, enddate: enddate }, function(json) {
options.xAxis.categories = json[0]['data']; //xAxis: {categories: []}
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
}
If you wanna display the chart at first load page, then call getAjaxData(startdate, enddate) with default value for date.
I want to use my database data in series
my table “mob” is something like this :
![my table named "mob"][1]
Icost data in not real
And my code is like this :
<?php
include '../../class/jdf.php';
require_once "../../db.php";
$db = new db();
$query_time = "SELECT DISTINCT iDate FROM mob WHERE 1 ";
$datashow = $db->get_arr($query_time);
$time = array();
foreach ($datashow as $key => $row) {
$format = ' Y/m/d ';
$time[] = jdate($format, $row['iDate']);
}
$query_cost = "SELECT * FROM mob WHERE 1 ";
$data = $db->get_arr($query_cost);
$datamin = $db->get_field('mob','MIN(iCost)','1');
$datamin = $datamin -100;
$datamax = $db->get_field('mob','MAX(iCost)','1');
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script src="../../js/jquery-1.9.1.min.js"></script>
<script src="../../js/highcharts.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
Highcharts.setOptions({
lang: {
numericSymbols: null
},
});
$(function() {
$('#container').highcharts({
chart:
{
type: 'column'
},
title: {
text: 'my chart '
},
subtitle: {
text: 'mob'
},
xAxis: {
categories: [
<?php
foreach ($time as $value) {
echo "'" . $value . "',";
}
?>
]
},
yAxis: {
min :<?php echo $datamin ?>,
max :<?php echo $datamax ?>,
title: {
text: 'cost'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: []
});
});
</script>
</head>
<body>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
What should I write in series to have a chart like this
![my chart sample is like this][2]
// [1]: http://i.stack.imgur.com/WBJm5.jpg
// [2]: http://i.stack.imgur.com/DYZjm.jpg
Help me please .
Thank you
In your php, prepare correct array (according to avascript structure) and use json_encode(). In javasctrip call $.getJSON(), get data and use in the highcharts.
More information about preprocessing data, here
i have the below two php files and i trying to pass the value from the selected option to the base php file and display the information based on the passed file.
fkm_test.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8″ />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>APP FKMS</title>
<link rel="stylesheet" type="text/css" media="screen" href="../js/jquery-ui-1.10.3.custom_blackGreen/jquery-ui-1.10.3.custom/css/trontastic/jquery-ui-1.10.3.custom.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../js/jquery.jqGrid-4.5.2/css/ui.jqgrid.css" />
<script src="../js/jquery-ui-1.10.0.custom/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="../js/jquery.jqGrid-4.5.2/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../js/jquery.jqGrid-4.5.2/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
function fkm(Application) {
var app = document.getElementById("myApp").selectedIndex;
var app_selected = document.getElementsByTagName("option")[app].value;
alert (app_selected);
//alert(document.getElementsByTagName("option")[app].value);
var lastSel
$("#list").jqGrid({
url: "fkm_display.php?app=$app_selected",
editurl: "fkmedit.php",
datatype: "json",
mtype: "GET",
colNames: ["App", "Pattern Type", "Pattern", "Rank", "AMRS", "EMEA", "APAC", "Audit", "ID", "Alert Type", "Comments"],
colModel: [
{ name: "division", width: 75 , editable: true},
{ name: "pattern_type", width: 90, editable: true, edittype:"select",formatter:'select', editoptions:{value:"BASIC:BASIC;REGEXP:REGEXP;REGEXP_IGNORE_CASE:REGEXP_IGNORE_CASE" } },
{ name: "pattern", width: 650, editable: true },
{ name: "rank", width: 50 },
{ name: "amrs_active", width: 40, editable: true, edittype:"select",formatter:'select', editoptions:{value:"1:Active;0: " } },
{ name: "emea_active", width: 40, editable: true, edittype:"select",formatter:'select', editoptions:{value:"1:Active;0: " } },
{ name: "apac_active", width: 40, editable: true, edittype:"select",formatter:'select', editoptions:{value:"1:Active;0: " } },
{ name: "audit", width: 200},
{ name: "id", width: 10, hidden: true},
{ name: "type", width: 20, editable: true, edittype:"select", sorttype:"text",formatter:'select', editoptions:{value:"IGNORE:IGNORE;ALERT:ALERT;WARN:WARN" } },
{ name: "comments", width: 10, editable: true,hidden: true}
],
height: 'auto',
pager: "#pager",
rowNum: 90,
rowList: [10, 20, 30, 60, 90],
sortname: "rank",
sortorder: "asc",
viewrecords: false,
gridview: true,
autoencode: true,
toppager: true,
grouping:true,
groupingView : {
groupField : ['type'],
groupColumnShow : [true],
groupText : ['<b>{0} - {1} Item(s)</b>']
},
caption: "Application FKMs"
});
jQuery("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn', ignoreCase: true});
jQuery("#list").jqGrid('navGrid','#pager',{"add":true,"del":true, "edit":true,"search":false,"refresh":true,"view":false, "cloneToTop":true});
};
</script>
</head>
<body>
<form id="phpform" name="phpform" method="POST" action="javascript:fkm();">
<select name="Application" id="myApp" >
<option selected="selected">–Select Application–</option>
<?php
include ('app_dbconfig.php');
$sql = "SELECT * FROM applications order by Application asc";
$result = mysql_query($sql) or die("SQL Error 1: " . mysql_error());
while($row=mysql_fetch_assoc($result))
{
echo '<option value="' . $row['Application'] . '">' . $row['Application'] . '</option>';
}
?>
</select>
<input type="submit" name="testing" value="Submit" >
</form>
<div align="center">
<table id="list"><tr><td></td></tr></table></div>
<div id="pager"></div>
</body>
</html>
fkm_display.php
<?php
include("fkm_dbconfig.php");
$page = $_GET['page'];
$limit = $_GET['rows'];
$sidx = $_GET['sidx'];
$sord = $_GET['sord'];
$app = $_GET['app_selected'];
if(!$sidx) $sidx =1;
$result = mysql_query("SELECT COUNT(*) AS count FROM global_itrs_fkms");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
$total_pages=0;
if( $count >0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit;
$filterResultsJSON = json_decode($_REQUEST['filters']);
if($filterResultsJSON){
$filterArray = get_object_vars($filterResultsJSON);
$filterResultsJSON = json_decode($_REQUEST['filters']);
$filterArray = get_object_vars($filterResultsJSON);}
$SQL = "select division,pattern_type,pattern,rank,amrs_active,emea_active,apac_active,concat(audit,' ', timestamp) as audit,id,type from global_itrs_fkms";
$counter = 0;
while($counter < count($filterArray['rules']))
{
$filterRules = get_object_vars($filterArray['rules'][$counter]);
if($counter == 0){
$SQL .= ' WHERE ' . division = '$app' . $filterRules['field'] . ' LIKE "%' . $filterRules['data'] . '%"';
}
else {
$SQL .= ' AND ' . $filterRules['field'] . ' LIKE "%' . $filterRules['data'] . '%"';
}
$counter++;
}
$SQL .= " order by $sidx $sord LIMIT $start, $limit";
echo $SQL;
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
$responce['total'] = $total_pages;
$responce['page'] = $page;
$responce['records'] = $count;
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$responce['rows'][$i]['id']=$row[id];
$responce['rows'][$i]['cell']=array($row[division],$row[pattern_type],$row[pattern],$row[rank],$row[amrs_active],$row[emea_active],$row[apac_active],$row[audit],$row[id],$row[type]);
$i++;
}
echo json_encode($responce);
If i change the url: "fkm_display.php?app=$app_selected" to url: "fkm_display.php" and when i click on submit am getting the enitre db information, which i don't want. I need only the information related to the application selected.
I am not sure, what is your actual problem. May be your jQgrid URL has not correctly formatted. You need to change like this,
url: "fkm_display.php?app="+app_selected,
Since your app_selected is a javascript variable not php variable. And in your server side you need to get the value like this,
$app = $_GET['app'];
But you are using like $app = $_GET['app_selected']; in your php code. Because you are setting the value of app_selected to app variable in your jQgrid code. Hope this helps.
Suppose that I have the PHP function code as below:
function.php
function PMTA_CHART($contentID, $chartName, $file, $order) {
$cate = '';
$total = '';
$fail = '';
$chart = array();
$title = "";
$PercentBlue = 0;
$PercentRed = 0;
if (file_exists($file)) {
$files = fopen($file, 'r');
while (!feof($files)) {
$data = explode(";", fgets($files));
if ($title == "") {
$title = $data[0];
}
if (!empty($data[5])) {
$cate = $data[5];
$PercentBlue = ((int)$data[6] - (int)$data[7]);
$PercentRed = (int)$data[7];
if (!empty($order)) {
$PercentBlue = (100 - (int)$data[8]);
$PercentRed = (int)$data[8];
$chart[] = array($PercentBlue, $PercentRed, $cate);
} else {
$PercentBlue = (100 - (int)$data[8]);
$PercentRed = (int)$data[8];
$chart[] = array($PercentRed, $PercentBlue, $cate);
}
}
}
arsort($chart);
$cate = '';
$PercentBlue = 0;
$PercentRed = 0;
if (!empty($order)) {
foreach ($chart as $arr) {
$cate.= ',' . "'$arr[2]'";
$PercentBlue.= ',' . $arr[0];
$PercentRed.= ',' . $arr[1];
}
} else {
foreach ($chart as $arr) {
$cate.= ',' . "'$arr[2]'";
$PercentBlue.= ', ' . $arr[1];
$PercentRed.= ', ' . $arr[0];
}
}
fclose($files);
} else {
echo "No such file";
}
?>
<?php echo $chartName ?> = new Highcharts.Chart({
chart: {
renderTo: '<?php echo $contentID ?>',
type: 'column'
},
title: {
text: '<?php echo $title; ?>'
},
xAxis: {
categories: [<?php echo substr($cate, 1); ?>],
labels: {
rotation: 90,
align: 'left'
}
},
yAxis: {
min: 0,
title: {
text: '% envoi'
}
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +' ('+ Math.round(this.percentage) +'%)';
}
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: [{
name: 'Total mail succesful',
data: [<?php echo substr($PercentBlue, 2); ?>]
}, {
name: 'Total mail fail',
data: [<?php echo substr($PercentRed, 2); ?>]
}]
});
pmtaChart.php
<?php
include('include/function.php');
$pmta3_emetteur_file = '../stats_domain_emetteur.affinitead.net.'.date("Y-m-d").'.txt';
$pmta4_emetteur_file = '../stats_domain_emetteur.switchcall.com.'.date("Y-m-d").'.txt';
$pmta5_emetteur_file = '../stats_domain_emetteur.unitead.eu.'.date("Y-m-d").'.txt';
$order = isset($_POST['txt_order_blue'])?$_POST['txt_order_blue']:'';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chart</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart3, chart4, chart5;
$(document).ready(function() {
<?php PMTA_CHART('PMTA3', 'chart3', $pmta3_emetteur_file, $order); ?>
<?php PMTA_CHART('PMTA4', 'chart4', $pmta4_emetteur_file, $order); ?>
<?php PMTA_CHART('PMTA5', 'chart5', $pmta5_emetteur_file, $order); ?>
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<form action="pmtaEmetteur.php" method="post">
<input type="submit" name="txt_order_red" id="txt_order_red" title="Order Red" value="Order Red"/>
<input type="submit" name="txt_order_blue" id="txt_order_blue" title="Order blue" value="Order blue"/>
</form>
<div id="PMTA3" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="PMTA4" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="PMTA5" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
As you see in code I have 2 buttons, order red and order blue,when I click on button order red it will sort red,and click on button blue it will sort bluePlease see this but when I mouse over on the bar chart I need to display Total mail successful : 700 (70 %) and Total mail fail 300(30%) but in this chart it not the same what I need it displays Total mail successful : 70(70%) and Total mail fail : 30(30%).
Note:
All data I read from the file as you see in my code.This is example text in file:
2012-12-19-0230;affinitead.net;557469;141107;25.31;boulevard-des-ventes.com;370873;116793;31.49
2012-12-19-0230;affinitead.net;557469;141107;25.31;tendancity.com;53296;13121;24.61
2012-12-19-0230;affinitead.net;557469;141107;25.31;friendcorp.fr;34365;4086;11.89
2012-12-19-0230;affinitead.net;557469;141107;25.31;messengear.fr;32068;1227;3.82
2012-12-19-0230;affinitead.net;557469;141107;25.31;affinimail.com;27415;2231;8.13
2012-12-19-0230;affinitead.net;557469;141107;25.31;diffitalia.com;2;0;0
.................................................................................
.................................................................................
.................................................................................
I can not find the solution, anyone know pleas help me, Thanks.
Change the tooltip formatter to:
this.series.name +': '+ this.y +' ('+ Math.round(this.percentage * 10) +'%)';