How to Create Graph in Visualforce page Using Salesforce Data.

How to Create Graph in Visualforce page Using Salesforce Data.

Visaulforce page:


<apex:page extensions="ABC" standardController="Account"  sidebar="false" action="{!Method}">
  <apex:includeScript id="a" value="https://www.google.com/jsapi" />
    <div id="chartBlock"></div>
    <apex:outputPanel >
    <script type="text/javascript">
        google.load('visualization', '1.0', {'packages':['corechart']});
        google.setOnLoadCallback(drawChart);
                  function drawChart(){
          var visualization = new

google.visualization.ColumnChart(document.getElementById('chartBlock'));
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'A');
          data.addColumn('number', 'B');
          data.addColumn('number', 'C');
          data.addColumn('number', 'D);
       
          <apex:repeat value="{!listabc}" var="r">  data.addRow(["{!r.A__c}",{!r.B__c},{!r.C__c},{!r.D__c}]);
          </apex:repeat>
         visualization.draw(data, {legend : {position: 'top', textStyle: {color: 'blue',fontSize: 10}},

width:window.innerWidth,vAxis:{textStyle:{fontSize: 10}},hAxis:{textStyle:{fontSize: 10},showTextEvery:1,slantedText:false}});
   }
   </script>
 </apex:outputPanel>


Controller: 

public  with sharing class ABC {

public List<Obj> listabc{get;set;}
public String accId{get;set;}


public ActualBudgetGraph(Apexpages.StandardController std) {
accId = std.getId();
}


public void Method(){
listabc =[Select A__c,B__c,C__c,D__c from  Obj  where id =:accId ];

}
}