How do I set a date range variable dynamically and redraw a Google chart?

sporhaberlerixx

New Member
I am using PHP to set a date range for creating a Google Line Chart. For each date in the range a variable is set ($running_balance) to create the points on the line chart using data in a database. I would like to be able to set the variable $end, which essentially determines the date range, dynamically, but I am not sure how to do this so that the chart would be redrawn according to this new range. I am aware that I could create a new function that includes \[code\]drawChart();\[/code\] to redraw the chart, and I would be using three buttons to either set the date range to 1 year, 3 months, or 1 month, but I am not sure how to put all this together. Here is the code that I currently have:\[code\]$begin = new DateTime(date('Y-m-d', strtotime('+1 days')));$end = new DateTime(date('Y-m-d', strtotime('+365 days')));$interval = DateInterval::createFromDateString('1 day');$period = new DatePeriod($begin, $interval, $end);foreach ( $period as $dt ) {$date_display = $dt->format("D j M");..... code to generate $running_balance .....$temp = array(); $temp[] = array('v' => (string) $date_display); $temp[] = array('v' => (string) $running_balance); $temp[] = array('v' => (string) $running_balance); $rows[] = array('c' => $temp);}$table['rows'] = $rows;$jsonTable = json_encode($table);<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 table = <?php echo $jsonTable; ?>; function drawChart() { var data = http://stackoverflow.com/questions/15868566/new google.visualization.DataTable(table); // Create our data table out of JSON data loaded from server. // var data = new google.visualization.DataTable(<?=$jsonTable?>); var formatter = new google.visualization.NumberFormat({fractionDigits:2,prefix:'\u00A3'}); formatter.format(data, 1); var options = { pointSize: 5, legend: 'none', hAxis: { showTextEvery:31 }, series: {0:{color:'2E838F',lineWidth:2}}, chartArea: {left:50,width:"95%",height:"80%"}, backgroundColor: '#F7FBFC', height: 400 }; // Instantiate and draw our chart, passing in some options. //do not forget to check ur div ID var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); }</script>\[/code\]
 
Top