views:

351

answers:

0

I am trying to build a graph that will change resolution depending on how far you are zoomed in. Here is what it looks like when you are complete zoomed out.

alt text So this looks good so when I zoom in I get a higher resolution data and my graph looks like this:

alt text The problem is when I zoom out the higher resolution data does not get cleared out of the graph: alt text

The tables below the graphs are table display what is in the DataTable. This is what drawing code looks like.

var g_graph = new google.visualization.AnnotatedTimeLine(document.getElementById('graph_div_json'));
var table = new google.visualization.Table(document.getElementById('table_div_json'));
function handleQueryResponse(response){
    log("Drawing graph")
    var data = response.getDataTable()
    g_graph.draw(data, {allowRedraw:true, thickness:2, fill:50, scaleType:'maximized'})
    table.draw(data, {allowRedraw:true})
}

I am try to find a way for it to only displaying the data that is in the DataTable. I have tried removing the allowRedraw flag but then it breaks the zooming operation.

Any help would be greatly appreciated.

Thanks