0 votes
43 views
in jQuery by
What is column chart and how to create google column chart? Give running example with code.

1 Answer

0 votes
by (2.8k points)

Google Column Chart:- A column chart is a vertical bar chart that is rendered in the browser by using SVG or VML. All Google charts, column charts are displayed tooltips when the user hovers over the data. 

Google Column Chart Code:-

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Keywords" content="google chart, column chart, goolge column chart">

  <meta name="Description" content="This is google column chart with running example code">

  <title>Goole column chart</title>

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script>

google.charts.load('current', {packages: ['corechart', 'bar']});

google.charts.setOnLoadCallback(drawStacked);

function drawStacked() {

  var data = new google.visualization.DataTable();

  data.addColumn('string', 'Subject');

  data.addColumn('number', 'Correct');

  data.addColumn('number', 'Incorrect');

  data.addColumn('number', 'Unattempted');

  data.addRows([

['Math', 25, 3,2],

['Reseoning', 20, 5,5],

['English', 22, 5,3],

['GK', 20, 0,0],

['Physics', 15, 10,5],

  ]);

  var options = {

title: 'Subject Wise Performance',

isStacked: true,

bar: {groupWidth: "50%"},

height: 250,

width: 600,

colors:['#0B8A1C','#F81C06','#EAE4E3'],

legend: { position: 'top',textStyle: {color: 'black', fontSize: 16}},

hAxis: {

  title: 'Subject Name'

},

vAxis: {

  title: 'Rating (scale of 1-10)'

}

  };
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

  </script>

 </head>

 <body>  

   <div id="chart_div"></div>

</body>
</html>

Output:-

Google Column Chart

Share:- Whatsapp Facebook Facebook


Welcome to Developerhelpway Q&A, where you can ask questions and receive answers from other members of the community.

Categories

...