Morris chart with date range picker using ajax data from php file
Budget: $10 – $30 USD
Deliverables:
1) chart.html file displaying a morris.js bar graph
- must have date range selection inputs that onchange retrieve ajax data from data.php and reinitializes chart
- https://morrisjs.github.io/morris.js/
### FILE EXAMPLE ###
<html>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script>
Morris.Bar({
element : 'chart',
data:[{ year:'2000, visits:10},{ year:'2001', visits:20},{ year:'2002', visits:30}],
xkey:'visits',
ykeys:['year', 'visits'],
labels:['Year', 'Visits'],
hideHover:'auto',
});
</script>
<div id=daterange>From:<input type=text id=from> To:<input type=text id=to></div>
<div id=chart></div>
</html>
2) data.php file that produces data based on ajax request from above using selected date ranges
### FILE EXAMPLE ###
<?PHP
if ($_GET['startDate']='2019-01-01' || $_GET['endDate'] =='2021-01-01'')
print "[{ year:'2019', visits:100},{ year:'2020', visits:200},{ year:'2021', visits:300}]";
else
print "[{ year:'1970', visits:1},{ year:'1971', visits:2},{ year:'1972', visits:3}]";
?>
Tell me how soon you can provide, bonus for speed and datepicker look
I have been working on this and thought someone might have some code laying around that will save me time
1) chart.html file displaying a morris.js bar graph
- must have date range selection inputs that onchange retrieve ajax data from data.php and reinitializes chart
- https://morrisjs.github.io/morris.js/
### FILE EXAMPLE ###
<html>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script>
Morris.Bar({
element : 'chart',
data:[{ year:'2000, visits:10},{ year:'2001', visits:20},{ year:'2002', visits:30}],
xkey:'visits',
ykeys:['year', 'visits'],
labels:['Year', 'Visits'],
hideHover:'auto',
});
</script>
<div id=daterange>From:<input type=text id=from> To:<input type=text id=to></div>
<div id=chart></div>
</html>
2) data.php file that produces data based on ajax request from above using selected date ranges
### FILE EXAMPLE ###
<?PHP
if ($_GET['startDate']='2019-01-01' || $_GET['endDate'] =='2021-01-01'')
print "[{ year:'2019', visits:100},{ year:'2020', visits:200},{ year:'2021', visits:300}]";
else
print "[{ year:'1970', visits:1},{ year:'1971', visits:2},{ year:'1972', visits:3}]";
?>
Tell me how soon you can provide, bonus for speed and datepicker look
I have been working on this and thought someone might have some code laying around that will save me time