ONCLICK, PASS START DATE INPUT VALUE AND END DATE INPUT VALUE AS STRING TO QUERY SELECT AND DRAW GOOGLE CHART

14 views

Skip to first unread message

Igbekele Fanimo

unread,

Oct 2, 2015, 11:49:35 AM10/2/15

to Google Visualization API

Sincerely speaking, I have search net for the answer but the one I got could not answer my want. can somebody help me.

what i want is to type date into two text forms, then create botton, click on it. the two dates I type should pass to SELECT O,D WHERE A >= date "2015-1-1" and A <= date "2015-1-31" ORDER BY O and replace date" 2015-1-1" and date "2015-1-31" then draw chart based on those date.this is what i have Come up with but deep down me, i know a lot is wrong with that code.please help me. I am not a guru but I want to be one day. thanks in advance

<!DOCTYPE html>

<head>

<title>Example</title>

var numberschart = 10; //<- Initial value

google.load('visualization', '1', {packages: ['corechart']});

function numbers(){

var work_field = document.forms['work_form']['work_n_field'].value;

var work_field2 = document.forms['work_form']['work_n_field2'].value;

var work_div = document.getElementById('number-work');

numberschart = work_div.innerHTML = work_field;

numberschart2 = work_div.innerHTML = work_field2;

drawVisualization();

return false;

};

</script>

function loadEditor() {

// Create the chart to edit.

wrapper = new google.visualization.ChartWrapper({

'chartType':'LineChart',

'dataSourceUrl':'https://docs.google.com/spreadsheets/d//tq?key=18lJSUJPHFZC-I3nqYD4Y7-2zR-mV63JQb-QxMpzu6hc&pub=0',

'query':'SELECT O,D WHERE A >= date "2015-1-1" and A <= date "2015-1-31" ORDER BY O',

'options': {'title':'NUMBERS IN ATTENDANCE', 'legend':'none'}

});

chartEditor = new google.visualization.ChartEditor();

google.visualization.events.addListener(chartEditor, 'ok', redrawChart);

chartEditor.openDialog(wrapper, {});

}

// On "OK" save the chart to a <div> on the page.

function redrawChart(){

chartEditor.getChartWrapper().draw(document.getElementById('visualization'));

}

google.setOnLoadCallback(loadEditor);

</script>

function changeTemp(dir) {

wrapper .setquery(SELECT O,D WHERE A >= date "'numberschart'" and A <= date "'numberschart'" ORDER BY O, chartEditor.getValue(SELECT O,D WHERE A >= date "'numberschart'" and A <= date "'numberschart'" ORDER BY O) );

gauge.draw(gaugeData, gaugeOptions);

}

</script>

</head>

<body>

<label id="n-work-label">Start date((year/month/day)</label><input name="work_n_field"/>

<button name="submit" id="submit" value="submit" onclick="changeTemp(dir)()">Submit</button>

</form>

</body>

</html>

Reply all

Reply to author

Forward

0 new messages