chart7.draw(arrdata, option7);
chart8.draw(arrdata1, option8);

google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(RequestData);

function RequestData()
{
 var dataString ={"Id": 1, "Value" : 30 };
 var dataString1 ={"Id": 2, "Value" : 30 };
    $.ajax
    (
    {
        type : 'GET',
       // asynch :'false',
        data:  dataString,
        url : 'http://localhost:8080/Charts/db',
        success : function(data)
        {
         var queryObject="";
            var queryObjectLen="";

        alert("success");
            queryObject = jQuery.parseJSON(data);
            queryObjectLen = queryObject.Details.length;
            console.log("queryObj: "+queryObject+" Length: "+queryObjectLen);
            // start of drawchart()
            drawChart(queryObject, queryObjectLen);

        },
        error : function(xhr, type)
         {

            alert('server error occoured')
          }
    })

     $.ajax
    (
    {
        type : 'GET',
        //asynch :'false',
        data:  dataString1,
        url : 'http://localhost:8080/Charts/db',
        success : function(data)
        {
         var queryObject="";
            var queryObjectLen="";

        alert("success");
            queryObject = jQuery.parseJSON(data);
            queryObjectLen = queryObject.Details.length;
            console.log("queryObj: "+queryObject+" Length: "+queryObjectLen);
            // start of drawchart()
            drawChart(queryObject,queryObjectLen);


        },
        error : function(xhr, type)
         {

            alert('server error occoured')
          }
    })

}


function drawChart(queryObject,  queryObjectLen)
            {

                console.log("Inside drawChart()");
                var arrdata = new google.visualization.DataTable();
                arrdata.addColumn('number', 'Id');
               // arrdata.addColumn('String', 'PatientName');
                //arrdata.addColumn('String', 'Department');
                arrdata.addColumn('number', 'Value');
                for(var i=0; i<queryObjectLen; i++)
                {
                    //console.log(queryObject.Details[i].DeptName);
                    var Id= queryObject.Details[i].Id;
                    var PatientName = queryObject.Details[i].PatientName;
                     var Department = queryObject.Details[i].Department;
                      var Value =  queryObject.Details[i].Value;
                     arrdata.addRows([
                        [parseInt(Id),parseInt(Value)]
                    ]);
                }
                 var options = {
                    title: 'Id v/s val on vertical axis',
                    vAxis: {title: 'Id',  titleTextStyle: {color: 'red'}},
                    'width':400,
                    'height':300
                };
                var option2 = {
                title: 'Id V/s Val on horiontal axis',
                hAxis: {title: 'Id',  titleTextStyle: {color: 'blue'}},
                'width':400,
                'height':300
                };

                var option3 = {
                title: ' Pie Chart',
                'width':400,
                'height':300
                };
                var option4 = {
                title: ' Line Chart',
                'width':400,
                'height':300
                };
                var options5 = {
                    title: 'Id v/s val on vertical axis',
                    vAxis: {title: 'Id',  titleTextStyle: {color: 'red'}},
                    'width':400,
                    'height':300
                };
                var option6 = {
                title: 'Id V/s Val on horiontal axis',
                hAxis: {title: 'Id',  titleTextStyle: {color: 'blue'}},
                'width':400,
                'height':300
                };

                var option7 = {
                title: ' Pie Chart',
                'width':400,
                'height':300
                };
                var option8 = {
                title: ' Line Chart',
                'width':400,
                'height':300
                };
           var chart = new google.visualization.BarChart(document.getElementById('chart_div'));//this is altogether a different object
           var chart2 = new google.visualization.ColumnChart(document.getElementById('chart_div2'));
          var chart3 = new google.visualization.PieChart(document.getElementById('chart_div3'));
           var chart4 = new google.visualization.LineChart(document.getElementById('chart_div4'));
          var chart5= new google.visualization.BarChart(document.getElementById('chart_div5'));
           var chart6 = new google.visualization.ColumnChart(document.getElementById('chart_div6'));
          var chart7 = new google.visualization.PieChart(document.getElementById('chart_div7'));
           var chart8 = new google.visualization.LineChart(document.getElementById('chart_div8'));
            chart.draw(arrdata, options);
            chart2.draw(arrdata, option2);
            chart3.draw(arrdata, option3);
            chart4.draw(arrdata, option4);
            chart5.draw(arrdata1, options5);
            chart6.draw(arrdata1, option6);
            chart7.draw(arrdata1, option7);
            chart8.draw(arrdata1, option8);
        }


    </script>
  </head>

  <body>
    <div id="chart_div" style="width: 400px; height: 300px;"></div>
    <div id="chart_div2" style="width: 800px; height: 400px;"></div>
     <div id="chart_div3" style="width: 400px; height: 300px;"></div>
    <div id="chart_div4" style="width: 400px; height: 500px;"></div>

 <div id="chart_div5" style="width: 400px; height: 300px;"></div>
    <div id="chart_div6" style="width: 800px; height: 400px;"></div>
     <div id="chart_div7" style="width: 400px; height: 300px;"></div>
    <div id="chart_div8" style="width: 400px; height: 500px;"></div>
  </body>
</html>