File "exo_01.php"
Full Path: /home/analogde/www/Doc/Charts/01/exo_01.php
File size: 9.03 KB
MIME-type: application/x-wine-extension-ini
Charset: utf-8
<script src="js/js/fusioncharts.js"></script>
<script src="js/js/themes/fusioncharts.theme.fusion.js"></script>
<!--
https://www.fusioncharts.com/charts/line-area-charts/line-chart-with-multiple-series?framework=jquery
-->
<?php
include("fusioncharts.php");
$site = $_SERVER["SERVER_NAME"];
if( ($site == "localhost") || ($site == "127.0.0.1") )
{
echo "Mode local";
echo "<br>";
$hostdb = "localhost"; // MySQl host
$userdb = "root"; // MySQL username
$passdb = ""; // MySQL password
$namedb = "task_manager"; // MySQL database name
}
else
{
echo "Hebergeur";
echo "<br>";
$hostdb = "analogdepat.mysql.db";
$userdb = "analogdepat";
$passdb = "Un92pac007";
$namedb = "analogdepat";
}
$dbhandle = new mysqli($hostdb, $userdb, $passdb, $namedb);
if ($dbhandle->connect_error)
{
exit("There was an error with your connection: ".$dbhandle->connect_error);
}
//$strQuery = "SELECT * FROM graph02; ";
//$result = $dbhandle->query($strQuery) or exit("Error code ({$dbhandle->errno}): {$dbhandle->error}");
$strQuery = "select * from graph02;";
$results = $dbhandle->query($strQuery) or exit("Error code ({$dbhandle->errno}): {$dbhandle->error}");
$indice = 0;
//mysqli_num_rows($result)
while ($row = $results -> fetch_row())
{
$arrData[$indice]["label"] = $row[1];
$arrData[$indice]["value"] = $row[2];
$indice = $indice + 1;
//printf ("%s (%s)\n", $row[0], $row[1]);
}
/*while($row = mysqli_fetch_row($results))
{
$arrData[$indice]["label"] = $row["jour"];
$arrData[$indice]["value"] = $row["val1"];
$indice = $indice + 1;
echo " ***** " .$row["jour"] ." " .$row["val1"];
echo "<br>";
}*/
$categoryArray=array();
$dataseries1=array();
$dataseries2=array();
$strQuery = "select * from graph02;";
$query = $dbhandle->query($strQuery) or exit("Error code ({$dbhandle->errno}): {$dbhandle->error}");
// pushing category array values
while($rows = mysqli_fetch_array($query))
{
array_push($categoryArray, array("label" => $rows["jour"]));
array_push($dataseries1, array( "value" => $rows["val1"]));
array_push($dataseries2, array( "value" => $rows["val2"]));
}
$arrayData["categories"]=array(array("category"=>$categoryArray));
// creating dataset object
$arrayData["dataset"] = array(array("seriesName"=> "Réel", "data"=>$dataseries1), array("seriesName"=> "Prévision", "data"=>$dataseries2));
echo "<br>";
echo "<pre>";
print_r($arrayData);
echo "</pre>";
if ($results)
{
print_r($arrData);
echo "Requete mysql...";
echo "<br>";
}
?>
<script>
function getXhr()
{
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject)
{ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else
{
// XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
function plot_chart()
{
var xhr = getXhr();
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 && xhr.status == 200)
{
//alert(xhr.responseText);
var import_data = <?php echo json_encode($arrData); ?>;
console.log(import_data);
const chartData = [{
"label": "Venezuela",
"value": "290"
}, {
"label": "Saudi",
"value": "260"
}, {
"label": "Canada",
"value": "180"
}, {
"label": "Iran",
"value": "140"
}, {
"label": "Russia",
"value": "115"
}, {
"label": "UAE",
"value": "100"
}, {
"label": "US",
"value": "30"
}, {
"label": "China",
"value": "30"
}];
//STEP 3 - Chart Configurations
// column3d line msline
const chartConfig = {
type: 'line',
renderAt: 'chart-container',
width: '100%',
height: '400',
dataFormat: 'json',
dataSource: {
// Chart Configuration
"chart": {
"caption": "Classement ELO",
"subCaption": "Onsemi Toulouse",
"xAxisName": "Joueurs",
"yAxisName": "ELO",
"formatNumberScale": "0",
"yAxisMaxValue": "500",
"yAxisMinValue": "0",
//"numberSuffix": "K",
"theme": "fusion",
},
// Chart Data
"data": import_data //chartData
}
};
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts(chartConfig);
fusioncharts.render();
});
/********/
const dataSource = {
chart: {
caption: "Reach of Social Media Platforms amoung Adults",
yaxisname: "% of Adults on this platform",
subcaption: "2018-2023",
showhovereffect: "1",
numbersuffix: "%",
drawcrossline: "1",
plottooltext: "<b>$dataValue</b> of Adults were on $seriesName",
theme: "candy"
},
categories: [
{
category: [
{
label: "2018"
},
{
label: "2019"
},
{
label: "2021"
},
{
label: "2023"
}
]
}
],
dataset: [
{
seriesname: "Facebook",
data: [
{
value: "68"
},
{
value: "69"
},
{
value: "69"
},
{
value: "68"
}
]
},
{
seriesname: "Instagram",
data: [
{
value: "35"
},
{
value: "37"
},
{
value: "40"
},
{
value: "47"
}
]
},
{
seriesname: "LinkedIn",
data: [
{
value: "25"
},
{
value: "27"
},
{
value: "28"
},
{
value: "30"
}
]
},
{
seriesname: "Twitter",
data: [
{
value: "24"
},
{
value: "22"
},
{
value: "23"
},
{
value: "22"
}
]
}
]
};
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: "msline",
renderAt: "container",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource
}).render();
});
/********/
}
}
xhr.open("POST","rien.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send();
}
</script>
<?php
echo '<div id="chart-container">FusionCharts XT will load here!</div>';
echo "<script> plot_chart(); </script>";
echo '<div id="container"></div>';
$columnChart = new FusionCharts("msline", "ex1", "100%", 400, "chart-1", "json", '{
"chart": {
"caption": "Reach of Social Media Platforms amoung Adults",
"yaxisname": "% of Adults on this platform",
"subcaption": "2018-2023",
"showhovereffect": "1",
"numbersuffix": "%",
"drawcrossline": "1",
"plottooltext": "<b>$dataValue</b> of Adults were on $seriesName",
"theme": "candy"
},
"categories": [
{
"category": [
{
"label": "2018"
},
{
"label": "2019"
},
{
"label": "2021"
},
{
"label": "2023"
}
]
}
],
"dataset": [
{
"seriesname": "Facebook",
"data": [
{
"value": "68"
},
{
"value": "69"
},
{
"value": "69"
},
{
"value": "68"
}
]
},
{
"seriesname": "Instagram",
"data": [
{
"value": "35"
},
{
"value": "37"
},
{
"value": "40"
},
{
"value": "47"
}
]
},
{
"seriesname": "LinkedIn",
"data": [
{
"value": "25"
},
{
"value": "27"
},
{
"value": "28"
},
{
"value": "30"
}
]
},
{
"seriesname": "Twitter",
"data": [
{
"value": "24"
},
{
"value": "22"
},
{
"value": "23"
},
{
"value": "22"
}
]
}
]
}');
$columnChart->render();
?>