I have come up with an idea. First, I take all the variables such as Hour,
Minute, etc.. and convert them into a unix timestamp (the data in my table
is has a timestamp for when each row was inserted)
$timestamp_A = mktime($Hour_A, $Minute_A, 0, $Month_A, $Day_A, $Year_A + 1);
//I plan to prevent SQL injection after I get a rough process working
$timestamp_B = mktime($Hour_B, $Minute_B, 0, $Month_B, $Day_B, $Year_B + 1);
I then create the following query:
$sql = mysqli_query($conn, 'SELECT * FROM Travel_Test WHERE
travel_time_timestamp > $timestamp_A && travel_time_timestamp <
$timestamp_B');
Although, now my problem is my graph gets an error since there is nothing
to draw it.
This is my current javascript:
<!--Load the AJAX API-->
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
var data, options, chart;
/*function drawVisualization() {
data = google.visualization.arrayToDataTable([
['Time', 'dummy'],
['', 0],
]);
}*/
function drawChart() {
data = new google.visualization.DataTable(<?=$json?>);
//var data = new google.visualization.Datatable(0);
/*var jsonData = $.ajax({
url: "http://localhost/traveltrak/travelGraphData.php";,
dataType:"json",
async: false
}).responseText;*/
options = {
title: 'Traffic Performance', //Sets title for graph
vAxis: {title: "Duration (s)"}, //Sets title for y-axis
hAxis: {title: "Time"}, //Sets title for x-axis
width: 900, //Sets width of graph image
height: 540, //Sets height of graph image
chartArea: {width: "50%", height: "70%"}, //makes room for legend display
curveType: 'function' //smooths the graph line
};
// Instantiate and draw our chart, passing in some options.
chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
/* error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus + '\n' + errorThrown);
if (!$.browser.msie) {
console.log(jqXHR);
}
}
});
}*/
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
<button onclick="window.location.href='ttpage.php'">Go Back Home</button>
<br>
What I need to do is either have a blank graph waiting for user input OR no
graph at all until user selects input and hits 'submit' button for form. I
would like to update the graph on the same page when a different input is
selected. How can I do this Andrew?
On Thursday, July 24, 2014 12:19:00 PM UTC-7, Adam Batakji wrote:
>
> The error points to the query.
>
> I am not sure what you are referring to as the mysql library. What part of
> my code is using that library?
>
> Ok, that comic was simple enough in defining SQL injection. Storing the
> values received for user input into another variable is okay?
>
> On Thursday, July 24, 2014 11:31:12 AM UTC-7, Andrew Gallant wrote:
>>
>> I don't see anything in your query that looks like it would throw a
>> divide by zero error. Is the error from the query or elsewhere in your
>> code?
>>
>> As an aside, you should not use the mysql library; it is insecure and
>> deprecated. The mysqli library is the secure replacement; there is also
>> the PDO library. Also, you should not insert user input directly into the
>> query, as this opens you up to SQL injection attacks (see xkcd's
>> Exploits of a Mom <http://xkcd.com/327/>).
>>
>> On Thursday, July 24, 2014 11:44:47 AM UTC-4, Adam Batakji wrote:
>>>
>>> The table I want data from has many rows of data and so I would like the
>>> query the database based on the inputs of (time ---> time). I made an
>>> attempt at a custom solution but I get an error telling me I cant do
>>> division by zero.
>>>
>>> This was the query I tried based off of input:
>>>
>>> $Node_A = $_POST['Node_A' ];
>>> $Node_B = $_POST['Node_B' ];
>>> $Month_A = $_POST['Month_A' ];
>>> $Month_B = $_POST['Month_B' ];
>>> $Day_A = $_POST['Day_A' ];
>>> $Day_B = $_POST['Day_B' ];
>>> $Year_A = $_POST['Year_A' ];
>>> $Year_B = $_POST['Year_B' ];
>>> $Hour_A = $_POST['Hour_A' ];
>>> $Hour_B = $_POST['Hour_B' ];
>>> $Minute_A = $_POST['Minute_A'];
>>> $Minute_B = $_POST['Minute_B'];
>>>
>>> $sql = mysqli_query($conn, 'SELECT * FROM Travel_Test WHERE
>>> (travel_time_month BETWEEN LIKE '%" . $Month_A . "%' AND LIKE '%" .
>>> $Month_B . "%')'); /*AND (travel_time_day BETWEEN LIKE '%" . $Day_A . "%'
>>> AND LIKE '%" . $Day_B . "%') AND (travel_time_year BETWEEN LIKE '%" .
>>> $Year_A . "%' . AND LIKE '%" . $Year_B . "%') AND (travel_time_hour BETWEEN
>>> LIKE '%" . $Hour_A . "%' AND LIKE '%" . $Hour_B . "%') AND
>>> (travel_time_minute BETWEEN LIKE '%" . $Minute_A . "%' AND LIKE '%" .
>>> $Minute_B . "%')');
>>>
>>> Am I going in the right direction?
>>>
>>>
>>> On Wednesday, July 23, 2014 5:03:08 PM UTC-7, Andrew Gallant wrote:
>>>>
>>>> Are you looking to query your database based on these inputs, or do you
>>>> want to filter data you've already loaded client-side? If you want to do
>>>> the latter, may I suggest you look at the ChartRangeFilter
>>>> <https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter>
>>>>
>>>> and DateRangeFilter
>>>> <https://developers.google.com/chart/interactive/docs/gallery/controls#daterangefilter>
>>>>
>>>> controls (they aren't quite what you are looking for, but they do the same
>>>> job).
>>>>
>>>> If you are looking for the former, there are a ton of date/time pickers
>>>> out there for you to choose from (or you could implement a custom
>>>> solution). I suggest looking into the available options and picking
>>>> something you like. Implementing a query to your server should be simple
>>>> (though your server code to handle the query could be more complex).
>>>>
>>>> On Wednesday, July 23, 2014 6:44:50 PM UTC-4, Adam Batakji wrote:
>>>>>
>>>>> I have a database that gives a unix timestamp when a piece of data is
>>>>> received. The unix timestamp is converted into real time to separate
>>>>> fields
>>>>> (month, day, year, hour, minute). I would like to implement an html form
>>>>> with drop down boxes that allows the user to choose a range of dates for
>>>>> which to display data. (i.e 12/30/2014 5:00 ---> 12/30/2014 8:00)
>>>>> Basically, the user creates a query with their selection and then updates
>>>>> the display of the google line graph. How can I implement this? I can
>>>>> provide my current code if needed.
>>>>>
>>>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
