Question

I need to update the chart every time the user selects values from some drop down menus and submit them.

I am writing Python scripts to handle the selected options and fetch the data from a database based on the user’s selections, then pass the data to the HTML with string replacement technique. The javascript takes the data from Python and the google chart API is used to generate the chart.

But this works only once. After the first time, the user selects and submits the selections, the chart remain unchanged. I can see the data is correct using firebug tool.

Can somebody help me on that? Thank you!

Below is my javascripts:

script src="http://www.google.com/jsapi?key=ABQIAAAA1Vvq5pLyw5IAAQQtCIurLhSCGfxgLuOmAJcC-OBbFOMYrpib_BSypK7Qf_9YkaT-2SzpuOBRKp6Bqw" type="text/javascript"></script>
    <script type="text/javascript">
      google.load("jquery", "1.3.2");
    </script>

      <!--Load the AJAX API-->
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load('visualization', '1', {packages: ['corechart']});
        </script>
        <script type="text/javascript">
            google.setOnLoadCallback(drawVisualization);
            function drawVisualization() {
                        var data = new google.visualization.DataTable();
                        {%if chart_Data%}
                            data.addColumn('string','Date Time');
                            data.addColumn('number','Wireless Mini CCB Controls');
                            data.addColumn('number','FNX App Controls');
                            data.addColumn('number','Hoist Status');
                            data.addRows({{chart_Data}});

                            //var data = google.visualization.arrayToDataTable({{chart_Data}});

                        var options = {
                                title: 'Status of Hoists',
                                vAxis: {title: 'Status of Hoists'},
                                isStacked: true
                        };

                            var chart = new google.visualization.SteppedAreaChart(document.getElementById('status_chart'));
                            chart.draw(data, options);
                        {% endif %}
  }

Below is my function to handle the drop down list menu selection and send “GET” request to my Python handler, which will return a replacement string {{chart_Data}}:

function monitorHoist(hoist_to_monitor,month,day,year){

            var hoist_to_monitor_text = document.getElementById('hoist_to_monitor').options[document.getElementById('hoist_to_monitor').selectedIndex].value
            var month_text = document.getElementById('month').options[document.getElementById('month').selectedIndex].value
            var day_text = document.getElementById('day').options[document.getElementById('day').selectedIndex].value
            var year_text = document.getElementById('year').options[document.getElementById('year').selectedIndex].value
            $.ajax({
            type: 'GET',  
            url: '/all?command=monitor&hoist_to_monitor=' + hoist_to_monitor_text +'&month='+month_text+'&day='+day_text+'&year='+year_text,
            //data: hoist_to_monitor_text,month_text,day_text,year_text,
            timeout: 60000,
            success: function(data) {
              $("#status").html('Success in sending request.');
              //drawVisualization();
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
              $("#status").html('Timeout sending request.');
            }
        });
      }

Below is the division of the chart:

<div id='status_chart' style="width: 900px; height: 500px;"></div> 

Answer 1

The problem is that you are not parsing the reqId value of the tqx field (See Implementing the ChartTools Datasource protocol).

If you use the gviz_api (https://code.google.com/p/google-visualization-python/), then you have to pass the value req_id to the method ToJsonResponse.