I am looking to build a website which has a page, upon which there are some jChartFX charts, which are driven by a MySQL query. The query is driven by a date selected on a drop down on the main page.
I am struggling to structure the code properly (all completely self taught so fraught with poor practice!) so that the graph will update when a different option is selected.
The code is listed below, however my question is; where should the code sit for the drawing the chart to make this work. Should the function loadChart exist on the main page and echo the data in from the query from another page, or should I have the whole function on a separate page, which is loaded by the jquery, or option 3 - am I completely wide of the mark?
The code for the chart is; <> The echo $data is the section which echos the MySQL output, and works fine when the code and the SQL query is fixed.
<script>
var chart1;
function loadChart()
{
chart1 = new cfx.Chart();
chart1.getData().setSeries(1);
chart1.getAxisY().setMin(100);
chart1.getAxisY().setMax(1000);
var series1 = chart1.getSeries().getItem(0); series1.setGallery(cfx.Gallery.Lines);
var data = <?php echo json_encode($temp, JSON_NUMERIC_CHECK); ?>;
chart1.setDataSource(data);
var divHolder = document.getElementById('ChartDiv');
chart1.create(divHolder);
}
</script>
The SQL Query is
SELECT COUNT(`column_Date`) AS 'Count' FROM Dates WHERE `column_Date` > date('2013-06-01')
Note: Where the date is above 2013-06-01, I want this to change based on the drop down from the main page.
<head>
<script src="js/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#optionschosenid").click(function(){
if($("#optionsid").val() == "OptionA" ){
$("#chart").load("weeks.php");
}
else {
$("#chart").load("text_test.php");
}
});
});
</script>
</head>
<body onload="loadChart()">
<div id="row">
<form method="post" id="weekcommencing" name="dateselector">
<select id="optionsid" name="optionsname">
<option value="2013-06-01">June</option>
<option value="2013-01-01">January</option>
</select>
<button name="optionschosenname" id="optionschosenid"> Select Additional Option </button>
</form>
</div>
<div id="chart" name="chart">
<?php echo $data;
echo 'hello'; ?>
<br /> -->
Test 0.11
</div>
<button id="testId">click me</button>
<br />
<br />
<div id="ChartDiv">
</div>
</body>
The answer to your question is most likely "option 3" - you are completely wide of the mark :)
I don't know what is in your PHP $data variable - you don't show where it was declared and set. I see a Javascsript variable named data. I wonder if you might have the impression that javascript variables and PHP variables are visible to each other? They most certainly are not.
Bottom line is that you should separate everything as much as possible - as it seems you are starting to do. Include your javascript from a JS file. Include your HTML from a template.
Even though you are new, you are biting off enough that you should just dive right into an MVC framework. It will force you to learn at least some good practices.