
<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();


			
?>			