Multiple visualizations in one page

By : vignesh
Source: Stackoverflow.com
Question!

I am using python-visualization library for computing the datasource. I tried to put more than one visualization in a single page. Both are line charts and data comes from a seperate URLs for each visualizations.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="/site_media/js/jquery-1.2.6.min.js"></script>

    <script type="text/javascript">
        google.load('visualization', '1', { packages: ['linechart'] });

    </script>
    <script type="text/javascript">
        var visualization1, visualization2;
        function drawVisualization1() {
            var query1 = new google.visualization.Query('/datasource1/');
            query1.send(handleQueryResponse1);
            var query2 = new google.visualization.Query('/datasource2/');
            query2.send(handleQueryResponse2);

        }
        function handleQueryResponse1(response) {
            if (response.isError()) {
                alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
                return;
            }
            var data1 = response.getDataTable();
            visualization1 = new google.visualization.LineChart(document.getElementById('visualization1'));
            var options = {};

            options['width'] = 600;
            options['height'] = 200;


            visualization1.draw(data1, options);
        }
        function handleQueryResponse2(response) {
            if (response.isError()) {
                alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
                return;
            }
            var data2 = response.getDataTable();
            visualization2 = new google.visualization.LineChart(document.getElementById('visualization2'));
            var options = {};


            options['width'] = 600;
            options['height'] = 200;


            visualization2.draw(data2, options);
        }
        google.setOnLoadCallback(drawVisualization1);

    </script>



<body>
    <div id="visualization1" class="span-15"><br /><br /></div>
    <div id="visualization2" class="span-15"><br /><br /></div>

</body>

Datasources:

def datasource1(request):
    data = []
    description = {"col1": ("number", "col1"),"col2": ("number", "col2"),}            
    for i in range(datetime.today().hour + 1):
        data.append({"col1":datetime.today().hour,"col2":datetime.today().hour })
    data_table = gviz_api.DataTable(description)
    data_table.LoadData(data)
    return HttpResponse(data_table.ToJSonResponse(columns_order=( "col1","col2",)))



def datasource2(request):
    data = []
    description = {"col1": ("number", "col1"),"col2": ("number", "col2"),}            
    for i in range(datetime.today().hour + 1):
        data.append({"col1":datetime.today().hour,"col2":datetime.today().hour })
    data_table = gviz_api.DataTable(description)
    data_table.LoadData(data)
    return HttpResponse(data_table.ToJSonResponse(columns_order=( "col1","col2",)))

When I render the page only the first visualization comes up , the second visualization never appears. Can some one help me out?

By : vignesh


Answers

You can try something like

function Charts(){
    var self = this;
    self.chart = [];
    self.settings = { width: 650, height: 250 };
    self.add = function(type, element, dataTable, options){
        self.chart.push({
            o: new google.visualization[type]($(element)[0]),
            data: dataTable,
            draw: function(){
                var settings = $.extend({}, self.settings, options);
                this.o.draw(this.data, settings);
            }
        });
        return self;
    };
    self.draw = function(){
        $.each(self.chart, function(i, chart){
            chart.draw();
        });
        return self;        
    };
}

and then

//var data1 = 'someDataTable',
//    data2 = 'anotherDataTable';

charts = new Charts();

var settings = {width:600, height:200 };

charts.add('LineChart', '#visualization1', settings, data1);
charts.add('LineChart', '#visualization2', settings, data2);

charts.draw();

Sorry, havn't tested myself, just thought it can help you.

And I'll advice is to load from Google jQuery as well.

google.load("jquery", "1.2.6");

Hope it'll help you :)



Happened to me too. The solution was for the server to return the reqId parameter. If you have two visualizations on the same page, one will have reqId 0 and the other reqId 1. make sure the server returns those reqIds back appropriately in the response.

If both responses return '0' then only one visualization will render (the first one).



This video can help you solving your question :)
By: admin