Re: Allow user to input data points and then Google charts it

1,139 views
Skip to first unread message

asgallant

unread,
Jul 9, 2012, 2:47:27 PM7/9/12
to google-visua...@googlegroups.com
Sure, you can do that.  You just need to take the user input and translate it into a format the charts can understand.  As an example: http://jsfiddle.net/asgallant/6kdvP/

On Monday, July 9, 2012 1:07:21 PM UTC-4, croberts wrote:
Hello

I am working with Django.

I'd like users on my site to have the ability to enter data points and then have it charted.  Each user will have their own chart.

Does Google Visualization API have the ability to do this?


Ej Nov

unread,
Jun 22, 2014, 11:49:30 PM6/22/14
to google-visua...@googlegroups.com
Another way you could accept user input is through setting a forum input with an onkeypress function to update a graph.

For example: 

Website: http://www.quickcompromise.com/index.html (Website where the graph is displayed)

Andrew Gallant

unread,
Jun 23, 2014, 8:51:13 PM6/23/14
to google-visua...@googlegroups.com
Yes, you can do that.  Here's one way:

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Compromise', 'Quantity'],
        ['Value #1',  0],
        [' ', 0],
        ['Value #2',  0]
    ]);
    var options = {
        title: 'Quick Compromise Graph',
        hAxis: {title: 'Graph Creator', titleTextStyle: {color: 'black'}}
    };
   
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
   
    var bidEl = document.getElementById('bidgraphvalue');
    var askEl = document.getElementById('askgraphvalue');
   
    function updateChart () {
        var bid = bidEl.value * 1;
        var ask = askEl.value * 1;
        data.setValue(0, 1, ask);
        data.setValue(2, 1, bid);
       
        chart.draw(data, options);
    }
   
    // create event handlers for changing the chart's data
    if (document.addEventListener) {
        bidEl.addEventListener('change', updateChart);
        askEl.addEventListener('change', updateChart);
    }
    else {
        bidEl.attachEvent('onchange', updateChart);
        askEl.attachEvent('onchange', updateChart);
    }
    updateChart();
}

Ej Nov

unread,
Jun 24, 2014, 11:23:19 AM6/24/14
to google-visua...@googlegroups.com
Reply all
Reply to author
Forward
0 new messages