Populate AMChart from PHP file

SalientAnimal · May 15, 2014

Hi All,

I have a AmChart file, but unfortunately this data is static. I would like to make this data more dynamic by populating it from a PHP file. Please can someone direct me in doing this?

Here is the AmChart page Code:

<!DOCTYPE html>
<html>
	<head>
		<title>Climate Survey Results</title>

		<!-- amCharts javascript sources -->
		<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/amcharts.js"></script>
		<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/serial.js"></script>

		<!-- amCharts javascript code -->
		<script type="text/javascript">
			AmCharts.makeChart("chartdiv",
				{
					"type": "serial",

					"categoryField": "category",
					"angle": 45,
					"depth3D": 10,
					"startDuration": 0.5,
					"theme": "default",
					"categoryAxis": {
						"gridPosition": "start"
					},
					"trendLines": [],
					"graphs": [
						{
							"fillAlphas": 1,
							"fillColors": "#008000",
							"id": "very_satisfied",
							"lineColor": "#008000",
							"title": "Very Satisfied",
							"type": "column",
							"valueField": "Very Satisfied"
						},
						{
							"fillAlphas": 1,
							"fillColors": "#0000FF",
							"id": "satisfied",
							"lineColor": "#0000FF",
							"title": "Satisfied",
							"type": "column",
							"valueField": "Satisfied"
						},
						{
							"fillAlphas": 1,
							"fillColors": "#FF8000",
							"fontSize": 0,
							"id": "dissatisfied",
							"lineColor": "#FF8000",
							"title": "Dissatisfied",
							"type": "column",
							"valueField": "Dissatisfied"
						},
						{
							"fillAlphas": 1,
							"fillColors": "#CC0000",
							"id": "very_dissatisfied",
							"lineColor": "#CC0000",
							"title": "Very Dissatisfied",
							"type": "column",
							"valueField": "Very Dissatisfied"
						}
					],
					"guides": [],
					"valueAxes": [
						{
							"id": "ValueAxis-1",
							"stackType": "100%",
							"title": "Percentage Scored (%)"
						}						
					],
					"allLabels": [],
					"balloon": {},
					"legend": {
						"textClickEnabled": false,
						"useGraphSettings": false,
						"valueAlign": "centre"
					},
					"titles": [
						{
							
							"size": 20,
							"text": "Climate Survey Results"
						}
					],
					"dataProvider": [
						{
							"category": "1",
							"Very Satisfied": 4.69,
							"Satisfied": 65.63,
							"Dissatisfied": 23.43,
							"Very Dissatisfied": 6.25
						},
						{
							"category": "2",
							"Very Satisfied": 3.13,
							"Satisfied": 46.88,
							"Dissatisfied": 34.37,
							"Very Dissatisfied": 15.62
						},
						{
							"category": "3",
							"Very Satisfied": 1.56,
							"Satisfied": 56.25,
							"Dissatisfied": 32.81,
							"Very Dissatisfied": 9.38
						},
						{
							"category": "4",
							"Very Satisfied": 7.81,
							"Satisfied": 56.25,
							"Dissatisfied": 28.13,
							"Very Dissatisfied": 7.81
						},
						{
							"category": "5",
							"Very Satisfied": 7.81,
							"Satisfied": 35.94,
							"Dissatisfied": 43.75,
							"Very Dissatisfied": 12.5
						},						
						{
							"category": "6",
							"Very Satisfied": 26.56,
							"Satisfied": 57.81,
							"Dissatisfied": 12.5,
							"Very Dissatisfied": 3.13
						},
						{
							"category": "7",
							"Very Satisfied": 10.94,
							"Satisfied": 43.75,
							"Dissatisfied": 28.13,
							"Very Dissatisfied": 17.19
						},
						{
							"category": "8",
							"Very Satisfied": 28.13,
							"Satisfied": 53.13,
							"Dissatisfied": 14.06,
							"Very Dissatisfied": 4.69
						},
						{
							"category": "9",
							"Very Satisfied": 26.56,
							"Satisfied": 64.06,
							"Dissatisfied": 7.81,
							"Very Dissatisfied": 1.56
						},
						{
							"category": "10",
							"Very Satisfied": 21.88,
							"Satisfied": 46.88,
							"Dissatisfied": 28.13,
							"Very Dissatisfied": 3.13
						},
						{
							"category": "11",
							"Very Satisfied": 1.56,
							"Satisfied": 43.75,
							"Dissatisfied": 45.31,
							"Very Dissatisfied": 9.38
						},
						{
							"category": "12",
							"Very Satisfied": 1.56,
							"Satisfied": 39.06,
							"Dissatisfied": 40.63,
							"Very Dissatisfied": 18.75
						},
						{
							"category": "13",
							"Very Satisfied": 3.13,
							"Satisfied": 43.75,
							"Dissatisfied": 31.25,
							"Very Dissatisfied": 21.87
						},
						{
							"category": "14",
							"Very Satisfied": 23.44,
							"Satisfied": 62.5,
							"Dissatisfied": 12.5,
							"Very Dissatisfied": 1.56
						},
						{
							"category": "15",
							"Very Satisfied": 9.38,
							"Satisfied": 53.12,
							"Dissatisfied": 35.94,
							"Very Dissatisfied": 1.56
						}
					]
				}
			);
		</script>
	</head>
	<body>
		<div id="chartdiv" style="width: 50%; height: 400px; " ></div>
	</body>
</html>

My PHP returns the following:

Array ( [0] => Array ( [Question] => 1. Overall how satisfied are you with your role / position at Altech Autopage? [Very Satisfied] => 4.6875 [satisfied] => 65.6250 [Dissatified] => 23.4375 [Very Dissatisfied] => 6.2500 ) [1] => Array ( [Question] => 2. Employees are recognized as individuals. [Very Satisfied] => 3.1250 [satisfied] => 46.8750 [Dissatified] => 34.3750 [Very Dissatisfied] => 15.6250 ) [2] => Array ( [Question] => 3. Employees are highly motivated to see the company succeed. [Very Satisfied] => 1.5625 [satisfied] => 56.2500 [Dissatified] => 32.8125 [Very Dissatisfied] => 9.3750 ) [3] => Array ( [Question] => 4. Customer Operations clearly communicates its goals and strategies. [Very Satisfied] => 7.8125 [satisfied] => 56.2500 [Dissatified] => 28.1250 [Very Dissatisfied] => 7.8125 ) [4] => Array ( [Question] => 5. Customer Operations offers clear opportunities for career advancement. [Very Satisfied] => 7.8125 [satisfied] => 35.9375 [Dissatified] => 43.7500 [Very Dissatisfied] => 12.5000 ) [5] => Array ( [Question] => 6. My job responsibilities are clear. [Very Satisfied] => 26.5625 [satisfied] => 57.8125 [Dissatified] => 12.5000 [Very Dissatisfied] => 3.1250 ) [6] => Array ( [Question] => 7. Management is sensitive to employee problems. [Very Satisfied] => 10.9375 [satisfied] => 43.7500 [Dissatified] => 28.1250 [Very Dissatisfied] => 17.1875 ) [7] => Array ( [Question] => 8. My immediate supervisor provides a positive role model. [Very Satisfied] => 28.1250 [satisfied] => 53.1250 [Dissatified] => 14.0625 [Very Dissatisfied] => 4.6875 ) [8] => Array ( [Question] => 9. Your own morale. [Very Satisfied] => 26.5625 [satisfied] => 64.0625 [Dissatified] => 7.8125 [Very Dissatisfied] => 1.5625 ) [9] => Array ( [Question] => 10. The team spirit and level of cooperation among workers. [Very Satisfied] => 21.8750 [satisfied] => 46.8750 [Dissatified] => 28.1250 [Very Dissatisfied] => 3.1250 ) [10] => Array ( [Question] => 11. The amount of recognition you receive for your work. [Very Satisfied] => 1.5625 [satisfied] => 43.7500 [Dissatified] => 45.3125 [Very Dissatisfied] => 9.3750 ) [11] => Array ( [Question] => 12. The compensation you receive for your work. [Very Satisfied] => 1.5625 [satisfied] => 39.0625 [Dissatified] => 40.6250 [Very Dissatisfied] => 18.7500 ) [12] => Array ( [Question] => 13. Your overall level of job security. [Very Satisfied] => 3.1250 [satisfied] => 43.7500 [Dissatified] => 31.2500 [Very Dissatisfied] => 21.8750 ) [13] => Array ( [Question] => 14. The professionalism of your immediate supervisor. [Very Satisfied] => 23.4375 [satisfied] => 62.5000 [Dissatified] => 12.5000 [Very Dissatisfied] => 1.5625 ) [14] => Array ( [Question] => 15. Overall, how would you rate Customer Operations as an area to work. [Very Satisfied] => 9.3750 [satisfied] => 53.1250 [Dissatified] => 35.9375 [Very Dissatisfied] => 1.5625 ) )

Which is the same result as I am currently entering manually.

Jacques1 · May 15, 2014

Hi,

the easiest and most secure solution is to make a PHP script which provides the data as JSON. In your JavaScript code which generates the chart, you'd then simply make an Ajax request to get the data from the PHP script.

Ch0cu3r · May 15, 2014

json_encode the results and then assign them to the "dataProvider": property, example

AmCharts.makeChart("chartdiv",
{
    "type": "serial",

    ...
    "dataProvider": <?php echo json_encode($results); ?>,
});

SalientAnimal · May 15, 2014

Ok cool, so I have it populating but with a few challenges.

1. My one column is not showing. i.e Dissatisfied

2. The headings at the bottom are all coming up as undefined.

This is what it looks like now.


<?php




 
                        // get the records from the database
if ($result = $mysqli->query("SELECT * FROM
(SELECT 
COUNT(CASE WHEN question_1 = 0 THEN 1 ELSE NULL END)/ COUNT(question_1)*100 AS 'Very Satisfied'
,COUNT(CASE WHEN question_1 = 1 THEN 1 ELSE NULL END)/ COUNT(question_1)*100 AS 'Satisfied'
,COUNT(CASE WHEN question_1 = 2 THEN 1 ELSE NULL END)/ COUNT(question_1)*100 AS 'Dissatified'
,COUNT(CASE WHEN question_1 = 3 THEN 1 ELSE NULL END)/ COUNT(question_1)*100 AS 'Very Dissatisfied'
FROM svy_climate_may_2014

UNION ALL

SELECT 
COUNT(CASE WHEN question_2 = 0 THEN 1 ELSE NULL END)/ COUNT(question_2)*100 AS 'Very Satisfied'
,COUNT(CASE WHEN question_2 = 1 THEN 1 ELSE NULL END)/ COUNT(question_2)*100 AS 'Satisfied'
,COUNT(CASE WHEN question_2 = 2 THEN 1 ELSE NULL END)/ COUNT(question_2)*100 AS 'Dissatified'
,COUNT(CASE WHEN question_2 = 3 THEN 1 ELSE NULL END)/ COUNT(question_2)*100 AS 'Very Dissatisfied'
FROM svy_climate_may_2014

UNION ALL

SELECT 
COUNT(CASE WHEN question_3 = 0 THEN 1 ELSE NULL END)/ COUNT(question_3)*100 AS 'Very Satisfied'
,COUNT(CASE WHEN question_3 = 1 THEN 1 ELSE NULL END)/ COUNT(question_3)*100 AS 'Satisfied'
,COUNT(CASE WHEN question_3 = 2 THEN 1 ELSE NULL END)/ COUNT(question_3)*100 AS 'Dissatified'
,COUNT(CASE WHEN question_3 = 3 THEN 1 ELSE NULL END)/ COUNT(question_3)*100 AS 'Very Dissatisfied'
FROM svy_climate_may_2014

UNION ALL

SELECT 
COUNT(CASE WHEN question_4 = 0 THEN 1 ELSE NULL END)/ COUNT(question_4)*100 AS 'Very Satisfied'
,COUNT(CASE WHEN question_4 = 1 THEN 1 ELSE NULL END)/ COUNT(question_4)*100 AS 'Satisfied'
,COUNT(CASE WHEN question_4 = 2 THEN 1 ELSE NULL END)/ COUNT(question_4)*100 AS 'Dissatified'
,COUNT(CASE WHEN question_4 = 3 THEN 1 ELSE NULL END)/ COUNT(question_4)*100 AS 'Very Dissatisfied'
FROM svy_climate_may_2014

UNION ALL

SELECT 
COUNT(CASE WHEN question_5 = 0 THEN 1 ELSE NULL END)/ COUNT(question_5)*100 AS 'Very Satisfied'
,COUNT(CASE WHEN question_5 = 1 THEN 1 ELSE NULL END)/ COUNT(question_5)*100 AS 'Satisfied'
,COUNT(CASE WHEN question_5 = 2 THEN 1 ELSE NULL END)/ COUNT(question_5)*100 AS 'Dissatified'
,COUNT(CASE WHEN question_5 = 3 THEN 1 ELSE NULL END)/ COUNT(question_5)*100 AS 'Very Dissatisfied'
FROM svy_climate_may_2014

UNION ALL

SELECT 
COUNT(CASE WHEN question_6 = 0 THEN 1 ELSE NULL END)/ COUNT(question_6)*100 AS 'Very Satisfied'
,COUNT(CASE WHEN question_6 = 1 THEN 1 ELSE NULL END)/ COUNT(question_6)*100 AS 'Satisfied'
,COUNT(CASE WHEN question_6 = 2 THEN 1 ELSE NULL END)/ COUNT(question_6)*100 AS 'Dissatified'
,COUNT(CASE WHEN question_6 = 3 THEN 1 ELSE NULL END)/ COUNT(question_6)*100 AS 'Very Dissatisfied'
FROM svy_climate_may_2014

UNION ALL

SELECT 
COUNT(CASE WHEN question_7 = 0 THEN 1 ELSE NULL END)/ COUNT(question_7)*100 AS 'Very Satisfied'
,COUNT(CASE WHEN question_7 = 1 THEN 1 ELSE NULL END)/ COUNT(question_7)*100 AS 'Satisfied'
,COUNT(CASE WHEN question_7 = 2 THEN 1 ELSE NULL END)/ COUNT(question_7)*100 AS 'Dissatified'
,COUNT(CASE WHEN question_7 = 3 THEN 1 ELSE NULL END)/ COUNT(question_7)*100 AS 'Very Dissatisfied'
FROM svy_climate_may_2014

UNION ALL

SELECT 
COUNT(CASE WHEN question_8 = 0 THEN 1 ELSE NULL END)/ COUNT(question_*100 AS 'Very Satisfied'
,COUNT(CASE WHEN question_8 = 1 THEN 1 ELSE NULL END)/ COUNT(question_*100 AS 'Satisfied'
,COUNT(CASE WHEN question_8 = 2 THEN 1 ELSE NULL END)/ COUNT(question_*100 AS 'Dissatified'
,COUNT(CASE WHEN question_8 = 3 THEN 1 ELSE NULL END)/ COUNT(question_*100 AS 'Very Dissatisfied'
FROM svy_climate_may_2014

UNION ALL

SELECT 
COUNT(CASE WHEN question_9 = 0 THEN 1 ELSE NULL END)/ COUNT(question_9)*100 AS 'Very Satisfied'
,COUNT(CASE WHEN question_9 = 1 THEN 1 ELSE NULL END)/ COUNT(question_9)*100 AS 'Satisfied'
,COUNT(CASE WHEN question_9 = 2 THEN 1 ELSE NULL END)/ COUNT(question_9)*100 AS 'Dissatified'
,COUNT(CASE WHEN question_9 = 3 THEN 1 ELSE NULL END)/ COUNT(question_9)*100 AS 'Very Dissatisfied'
FROM svy_climate_may_2014

UNION ALL

SELECT 
COUNT(CASE WHEN question_10 = 0 THEN 1 ELSE NULL END)/ COUNT(question_10)*100 AS 'Very Satisfied'
,COUNT(CASE WHEN question_10 = 1 THEN 1 ELSE NULL END)/ COUNT(question_10)*100 AS 'Satisfied'
,COUNT(CASE WHEN question_10 = 2 THEN 1 ELSE NULL END)/ COUNT(question_10)*100 AS 'Dissatified'
,COUNT(CASE WHEN question_10 = 3 THEN 1 ELSE NULL END)/ COUNT(question_10)*100 AS 'Very Dissatisfied'
FROM svy_climate_may_2014

UNION ALL

SELECT 
COUNT(CASE WHEN question_11 = 0 THEN 1 ELSE NULL END)/ COUNT(question_11)*100 AS 'Very Satisfied'
,COUNT(CASE WHEN question_11 = 1 THEN 1 ELSE NULL END)/ COUNT(question_11)*100 AS 'Satisfied'
,COUNT(CASE WHEN question_11 = 2 THEN 1 ELSE NULL END)/ COUNT(question_11)*100 AS 'Dissatified'
,COUNT(CASE WHEN question_11 = 3 THEN 1 ELSE NULL END)/ COUNT(question_11)*100 AS 'Very Dissatisfied'
FROM svy_climate_may_2014

UNION ALL

SELECT 
COUNT(CASE WHEN question_12 = 0 THEN 1 ELSE NULL END)/ COUNT(question_12)*100 AS 'Very Satisfied'
,COUNT(CASE WHEN question_12 = 1 THEN 1 ELSE NULL END)/ COUNT(question_12)*100 AS 'Satisfied'
,COUNT(CASE WHEN question_12 = 2 THEN 1 ELSE NULL END)/ COUNT(question_12)*100 AS 'Dissatified'
,COUNT(CASE WHEN question_12 = 3 THEN 1 ELSE NULL END)/ COUNT(question_12)*100 AS 'Very Dissatisfied'
FROM svy_climate_may_2014

UNION ALL

SELECT 
COUNT(CASE WHEN question_13 = 0 THEN 1 ELSE NULL END)/ COUNT(question_13)*100 AS 'Very Satisfied'
,COUNT(CASE WHEN question_13 = 1 THEN 1 ELSE NULL END)/ COUNT(question_13)*100 AS 'Satisfied'
,COUNT(CASE WHEN question_13 = 2 THEN 1 ELSE NULL END)/ COUNT(question_13)*100 AS 'Dissatified'
,COUNT(CASE WHEN question_13 = 3 THEN 1 ELSE NULL END)/ COUNT(question_13)*100 AS 'Very Dissatisfied'
FROM svy_climate_may_2014

UNION ALL

SELECT 
COUNT(CASE WHEN question_14 = 0 THEN 1 ELSE NULL END)/ COUNT(question_14)*100 AS 'Very Satisfied'
,COUNT(CASE WHEN question_14 = 1 THEN 1 ELSE NULL END)/ COUNT(question_14)*100 AS 'Satisfied'
,COUNT(CASE WHEN question_14 = 2 THEN 1 ELSE NULL END)/ COUNT(question_14)*100 AS 'Dissatified'
,COUNT(CASE WHEN question_14 = 3 THEN 1 ELSE NULL END)/ COUNT(question_14)*100 AS 'Very Dissatisfied'
FROM svy_climate_may_2014

UNION ALL

SELECT 
COUNT(CASE WHEN question_15 = 0 THEN 1 ELSE NULL END)/ COUNT(question_15)*100 AS 'Very Satisfied'
,COUNT(CASE WHEN question_15 = 1 THEN 1 ELSE NULL END)/ COUNT(question_15)*100 AS 'Satisfied'
,COUNT(CASE WHEN question_15 = 2 THEN 1 ELSE NULL END)/ COUNT(question_15)*100 AS 'Dissatified'
,COUNT(CASE WHEN question_15 = 3 THEN 1 ELSE NULL END)/ COUNT(question_15)*100 AS 'Very Dissatisfied'
FROM svy_climate_may_2014)
svy_result"));
						$arr = array();
						while($row = mysqli_fetch_assoc($result))
                        {
						$arr[] = $row;
						}
						if($arr) {
						$json = json_encode($arr); // json encode the array
}



?>
					



<html>
	<head>
		<title>Climate Survey Results</title>

		<!-- amCharts javascript sources -->
		<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/amcharts.js"></script>
		<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/serial.js"></script>

		<!-- amCharts javascript code -->
		<script type="text/javascript">
			AmCharts.makeChart("chartdiv",
				{
					"type": "serial",

					"categoryField": "category",
					"angle": 45,
					"depth3D": 10,
					"startDuration": 0.5,
					"theme": "default",
					"categoryAxis": {
						"gridPosition": "start"
					},
					"trendLines": [],
					"graphs": [
						{
							"fillAlphas": 1,
							"fillColors": "#008000",
							"id": "very_satisfied",
							"lineColor": "#008000",
							"title": "Very Satisfied",
							"type": "column",
							"valueField": "Very Satisfied"
						},
						{
							"fillAlphas": 1,
							"fillColors": "#0000FF",
							"id": "satisfied",
							"lineColor": "#0000FF",
							"title": "Satisfied",
							"type": "column",
							"valueField": "Satisfied"
						},
						{
							"fillAlphas": 1,
							"fillColors": "#FF8000",
							"fontSize": 0,
							"id": "dissatisfied",
							"lineColor": "#FF8000",
							"title": "Dissatisfied",
							"type": "column",
							"valueField": "Dissatisfied"
						},
						{
							"fillAlphas": 1,
							"fillColors": "#CC0000",
							"id": "very_dissatisfied",
							"lineColor": "#CC0000",
							"title": "Very Dissatisfied",
							"type": "column",
							"valueField": "Very Dissatisfied"
						}
					],
					"guides": [],
					"valueAxes": [
						{
							"id": "ValueAxis-1",
							"stackType": "100%",
							"title": "Percentage Scored (%)"
						}						
					],
					"allLabels": [],
					"balloon": {},
					"legend": {
						"textClickEnabled": false,
						"useGraphSettings": false,
						"valueAlign": "centre"
					},
					"titles": [
						{
							
							"size": 20,
							"text": "Climate Survey Results"
						}
					],
					"dataProvider": <?php echo json_encode($arr); ?>,
				}
			);
		</script>
	</head>
	<body>
		<div id="chartdiv" style="width: 50%; height: 400px; " ></div>
	</body>
</html>

I am also still trying to figure it out myself, but would appreciate if someone has some time to take a look.

Thanks.

SalientAnimal · May 15, 2014

Fixed the Dissatisfied, it was a typo. Working on populating the bottom axis.

Ch0cu3r · May 15, 2014

Working on populating the bottom axis.

For each result you need to define a "category" property for the results heading

Example

$i = 0;
while($row = mysqli_fetch_assoc($result))
{
    $row['category'] = $i++; // define the bottom axis heading
    $arr[] = $row;
}

Jacques1 · May 15, 2014

Injecting the data straight into an inline script is a very, very bad idea and can lead to cross-site scripting vulnerabilities and bugs, which is why I recommended loading the data with Ajax .

The json_encode() function is not for inserting data into a script element. It does not prevent the input from causing harm. For example, check out this attack.

Fortunately, the PHP core developers are well aware that people notoriously misuse json_encode(), so they've at least prevented the most obvious attacks. But you can never be sure. It depends on your flavor of HTML and the flags you pass to json_encode() and the inner workings of the function. Do not rely on this.

Edited May 15, 2014 by Jacques1

SalientAnimal · May 16, 2014

Thanks for this Jacques1, luckily my site is not exposed to the entire WWW, so having the best security isn't my biggest concern at this point. Although yes I agree, it is something I need to learn a lot about especially if I want to develop sites that I will eventually publish to the WWW.

I also want to say thanks for everyone else for their input on this thread, and I was able to come up with a solution. Ch0cu3r, I actually later realised that I had the field category in my select query and is was a matter of adding

categoryField: "categoryField",

to my graph code. I have to adjust my query to name the column as categoryField, and then it all worked.

So now I want to take the next step in making my graph even more dynamic. In the past I've used a drop-down list for the user to make a selection, and this has really worked nicely, and I would like to do the same, however, the onchange event does not seem to work here. Any advice? I can post code if need be?

Basically my Query will have a WHERE clause... Something like WHERE department_id = $department.

Edited May 16, 2014 by SalientAnimal

Ch0cu3r · May 16, 2014

This is where you'll now need to apply Jacques1 advice and produce the graphs using AJAX.

So you'd apply an onchange event for your dropdown, when the user makes a selection you'll then run an AJAX request which will pass the department id to your php code, which will then get graph results for that department from your database and return the results in JSON format. You'd then retrieve the response of the ajax request and pass that to amchart for plotting the graph.

Jacques1 · May 16, 2014

Thanks for this Jacques1, luckily my site is not exposed to the entire WWW, so having the best security isn't my biggest concern at this point.

If I had a dollar everytime I hear that sentence, I'd be rich by now. ::)

I guess I should stop using the word “security”. In the PHP world, this seems to always trigger the same reaction: “Nah, I need no security. Maybe later.” Well, let's call it good code then. Have you considered simply doing it for the sake of correctness and quality, regardless of whether or not this runs in “the entire WWW”? Or is this, again, unthinkable in the PHP world?

I'm sorry for the frustration, this is not about you personally. But I see the same pattern over and over again, and I just don't get it. Why do PHP programmers always go with the worst option when given the choice? Why do PHP programmers rather make up excuses for bugs instead of fixing them?

Well, I guess that's why the rest of the world laughs about PHP and doesn't take it seriously. You can't really blame them.

So now I want to take the next step in making my graph even more dynamic. In the past I've used a drop-down list for the user to make a selection, and this has really worked nicely, and I would like to do the same, however, the onchange event does not seem to work here. Any advice? I can post code if need be?

That might be a good idea.

SalientAnimal · May 16, 2014

If I had a dollar everytime I hear that sentence, I'd be rich by now.

I guess I should stop using the word “security”. In the PHP world, this seems to always trigger the same reaction: “Nah, I need no security. Maybe later.” Well, let's call it good code then. Have you considered simply doing it for the sake of correctness and quality, regardless of whether or not this runs in “the entire WWW”? Or is this, again, unthinkable in the PHP world?

Not at all what I was implying Jacques1. The reason my main focus is not on the security is because of the short space of time in which I need to produce the screens that I am creating. Thus, yes I agree the quality and correctness is of high importance, but this is something I am working on in my own time and then as I learn the better / correct methods I do implement them. What I am merely saying is that because of the short time I have to finish some projects, I often try to get them working with the minimum fuss and later I improve on them. For me PHP has been an entirely self learning experience and that ca make it a little difficult to get the exact concepts / principles working correctly.

The code I have for the drop down menu looks like the below:

//FUNCTION TO CREATE HTML FOR OPTIONS LIST
function createOptions($optionList, $selectedValue)
{
    $options = '';
    foreach ($optionList as $option)
    {
        $selected = ($option['value']==$selectedValue) ? ' selected="selected"' : '';
        $options .= "<option value='{$option['value']}'{$selected}>{$option['label']}</option>\n";
    }
    return $options;
}
 


if ( isset ( $_GET['department'] ) && is_numeric ( $_GET['department'] ) ){ 
  // There's a department=xxx in the querystring so we use that as the select's default value 
  $default_value = $_GET['department']; 
} else { 
  // There's no department=xxx in the querystring so we can assign a default value here like so 
  $default_value = 7; 
} 

$department   = isset($default_value)   ? intval($default_value)   : false;

 
//GENERATE OPTIONS FOR PRIMARY CATEGORY
$sql_1 = "SELECT DISTINCT department_id AS value, department AS label
          FROM sys_departments
          ORDER BY department"; 
$optionList = $dbo->query($sql_1);
$department_options = createOptions($optionList, $department);

 <script language="javascript">


        function getSelectValue(selectID)
        {
            var optionObj = document.getElementById(selectID);
            return optionObj.options[optionObj.selectedIndex].value;
        }


        function reload(form)
        {
            //Adding the unselected options should work fine
            var locationURL = 'graph2.php';
                locationURL += '?department='   + getSelectValue('department');
            //Perform the reload
            self.location = locationURL;
        }
 </script>

Creating the drop-down

    		<select name='department' id='department' onChange="reload(this.form)">
       		<option value=''>Select one</option>
        	<?php echo $department_options; ?>
    		</select>

Edited May 16, 2014 by SalientAnimal

SalientAnimal · May 16, 2014

Had my where clause in the wrong place of my UNION query, silly mistake.

Jacques1 · May 16, 2014

The drop-down menu doesn't make much sense, though.

You've basically written your own implementation of what the browser would do if this was an actual form. So why not use a form in the first place?

I mean, loading another page and passing parameters to the URL is exactly what <form action="graph2.php" method="get"> does. There's absolutely no need to do this yourself with JavaScript.

What I am merely saying is that because of the short time I have to finish some projects, I often try to get them working with the minimum fuss and later I improve on them.

Are you sure this saves you time? It sounds more like you're wasting a lot of time with rewrites, debugging and workarounds.

I mean, reloading the entire page whenever the user changes the parameters is hardly the final solution. Isn't the whole point of JavaScript charts that you can reload them dynamically? Well, but this means you'd have to throw away your current code and start over with the Ajax approach.

Edited May 16, 2014 by Jacques1

SalientAnimal · May 16, 2014

Are you sure this saves you time? It sounds more like you're wasting a lot of time with rewrites, debugging and workarounds.

I mean, reloading the entire page whenever the user changes the parameters is hardly the final solution. Isn't the whole point of JavaScript charts that you can reload them dynamically? Well, but this means you'd have to throw away your current code and start over with the Ajax approach.

It doesn't save me time no, but it allows me to finish off some things (although not 100%). I then have an idea of what can / can't be done and I look for better ways of doing it. I know this is not the best approach, but unfortunately my job profile isn't focused on coding. It is merely a nice to have that I use to implement a few things. This is why I have to try and learn / improve on these over weekends at home when I have a quite weekend.

I really appreciate all the info / feedback that you giving Jacques1, and I will certainly use these tips to try and improve on my current way of doing things.

shaozhijie · May 12, 2015

var title = 'PM<sup>10</sup>';

"valueAxes": [{

"axisAlpha": 0,

"position": "left",

"title": title

}],

how to comply it? <sup> is a label.

Sign In

Populate AMChart from PHP file

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information