Multi chart with Google Chart API Method 2

This method is very simple as compared to previous one


<!-- Graph Script Strat-->

<!-- Call Google API -->
 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 
// Create graph package
    <script type="text/javascript">
        google.load('visualization', '1', { packages: ['corechart'] });
    </script>


    <script type="text/javascript">
//  Write my own function

        function drawVisualization() {
            // Create and populate the data table.
          var data = google.visualization.arrayToDataTable([
          ['Required Money', 'Number Of People'],

//  assigning the value from the code behind
          ['Up to 500 SAR', <asp:Literal ID="v1" runat="server"></asp:Literal>],
          ['Up to 500 to 1,000 SAR', <asp:Literal ID="v2" runat="server"></asp:Literal>],
          ['Up to 1,000 SAR to 1,500 SAR', <asp:Literal ID="v3" runat="server"></asp:Literal>],
          ['Up to 1,500 SAR to  3,000', <asp:Literal ID="v4" runat="server"></asp:Literal>],
          ['Up to 3,000 SAR to  10,000 SAR', <asp:Literal ID="v5" runat="server"></asp:Literal>],
          ['Up to 10,000 SAR to 50,000 SAR', <asp:Literal ID="v6" runat="server"></asp:Literal>],
          ['Up to 50,000 SAR to 100,000 SAR', <asp:Literal ID="v7" runat="server"></asp:Literal>],
          ['More then 50,000 SAR', <asp:Literal ID="v8" runat="server"></asp:Literal>]

        ]);

// Second object for another graph
           var data1 = google.visualization.arrayToDataTable([
          ['Year', 'Number of Cases'],

// Assigning the value directly  in to second graph
          ['1960', '40'],
          ['1961', '30'],
          ['1962', '20'],
          ['1963', '10']
       
        ]);

            // Create and draw the First graph
            new google.visualization.PieChart(document.getElementById('visualization')).
            draw(data, { width: 500,
            backgroundColor: 'transparent',
            textStyle: { color: 'BLACK', fontSize: 18},
            legend: {position: 'top', textStyle: {color: 'blue', fontSize: 12}},
       
            });

            // Create and draw second graph
            new google.visualization.ColumnChart(document.getElementById('visualizationColumn')).
            draw(data, { width: 500,
            backgroundColor: 'transparent',
            textStyle: { color: 'BLACK', fontSize: 18},
            legend: {position: 'top', textStyle: {color: 'blue', fontSize: 12}},
       
            });

       

        }

//  Load function
        google.setOnLoadCallback(drawVisualization);
    </script>

    <!-- Graph Script End-->

Regards
Rashid Imran Bilgrami
CEO
Best visualization
http://www.bestvisualization.com