CODEWITHSUNDEEP
chartsgoogle-visualization
Tom
Tom

Reputation: 927

Google Visualization Options Not Working

I can't get the first series of the data to be graphed as a line instead of a bar. Also, several options I try do not work, including having a title (crazy ambitious, right?).

Why doesn't this work? Where is the title? I also can't figure out how to animate on startup even though it should literally work (attempt not shown below). 

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

function draw(){
      var data = google.visualization.arrayToDataTable([
			['Referrals', '%','A','B','C','D','E','F','G'],
			['Adams', 	{v: .3684, f: '36.84%'},	0,0,3,9,4,14,1],
			['Chalk', 	{v: .9118, f: '91.18%'},	0,0,2,16,12,21,1],
			['Forby', 	{v: 2.0909, f: '209.09%'},	0,0,3,17,9,12,1],
			['Koehler', {v: .056, f: '5.26%'},		0,0,0,13,6,13,0],
			['Burrey', 	{v: 0, f: '-'},				0,0,0,0,0,0,0],
			['Roach', 	{v: .1765, f: '19.65%'},	0,0,7,43,18,32,1]
		  ]);

		  var tempOptions = {
        title: 'tesssssssssssssssssssssssssssssst',
        series: {
          0: {axis: 'Percent',type: 'line'},
          1: {axis: 'Count'},
          2: {axis: 'Count'},
          3: {axis: 'Count'},
          4: {axis: 'Count'},
          5: {axis: 'Count'},
          6: {axis: 'Count'},
          7: {axis: 'Count'}
        },
        axes: {
          y: {
            Percent: {label: '% for Hazard Grade'},
            Count: {label: 'Hazard Grade Count'}
          }
        }
		  };
		
		  
		   var tempTable = new google.charts.Bar(document.getElementById('chart_div'));
		
			tempTable.draw(data,tempOptions);
     }
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>

Upvotes: 2

Views: 1075

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

there are several config options that don't work with material charts

Tracking Issue for Material Chart Feature Parity #2143

material --> google.charts.Bar -- using --> packages: ['bar']

recommend using core chart instead...

core --> google.visualization.ColumnChart -- using --> packages: ['corechart']
or google.visualization.BarChart, google.visualization.ComboChart, etc...

there is an option to get core chart close to look & feel of material

theme: 'material'

Upvotes: 2

Related Questions