Google Graphs axis order

Question

I have a simple input form that a user would use to input data via drop down/selectors. There are 10 questions each with a rating out of 10.

This data then populates a Google graph on the same page.

The data populates the graph just fine but the axis itself becomes unordered. So 2 could be at the top, 10 in the middle and so on. I have no idea why the axis "breaks" like this.

Please note, I have very little experience with Java and a bit of HTML, this is just me trying to learn but cannot find the answer anywhere, or at least, can't recognize the answer when I see it!

Can anyone help?

<!doctype HTML>
<html`enter code here` lang="en">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible">
	<meta name="viewport" content="width=device-width, initial-scale=1">
<title>

</title>
<head>
<style>

   

</style>
</head>
<body>


		<h1>REPORT CARD</h1>	
        
<br>

		<form role="form" id="price" name="price">	
		<p><b>The brand excels</b></p>
        
		<select class="custom-select" style="width:100pt; height:30pt; font-size:15px; color:grey; float:right;" id="DB" onchange="drawChart()">
			<option id="itemprice" color="green" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
            <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>
		</select>
        <br>
		<p>Relevance:</p>
		<select class="custom-select" style="width:100pt; height:30pt; font-size:15px; color:grey;float:right" id="RLV" onchange="drawChart()">
			<option id="itemprice" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
            <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>
		</select>
                
	</p>
    <br>
		<p>Pricing related to Value:</p>
		<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey ;float:right" id="PRV" onchange="drawChart()">
			<option id="itemprice" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
            <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>            
		</select>
                
	</p>
     <br>
    
		<p>Positioning:</p>
		<select class="custom-select" style="width:100pt; height:30pt; font-size:15px; color:grey;float:right" id="PSN" onchange="drawChart()">
			<option id="itemprice" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
                        <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>
		</select>
                
	</p>
     <br>
     
		<p>Consistency:</p>
		<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="CNS" onchange="drawChart()">
			<option id="itemprice" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
                        <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>
		</select>
                
	</p>
     <br>
     
		<p>Brand Portfolio:</p>
		<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="BP" onchange="drawChart()">
			<option id="itemprice" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
                        <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>
		</select>
                
	</p>
     <br>
     
		<p>Marketing Activities:</p>
		<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="MA" onchange="drawChart()">
			<option id="itemprice" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
                        <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>
		</select>
                
	</p>
     <br>
     
		<p>Brand Meaning:</p>
		<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="BM" onchange="drawChart()">
			<option id="itemprice" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
                        <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>
		</select>
                
	</p>
     <br>
     
		<p>Support of the Brand:</p>
		<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="SOB" onchange="drawChart()">
			<option id="itemprice" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
                        <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>
		</select>
                
	</p>
    <br>
    
   
		<p>Brand Equity:</p>
		<select class="custom-select" style="width:100pt; height:30pt; text-align: center; font-size:15px;color:grey;float:right " id="BE" onchange="drawChart()">
			<option id="itemprice" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
            <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>
		</select>
                
	</p>
		
	
	</form>
			
  <br> </br><br> </br> 
   
</body>

  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Metrics','Delivering Benefits','Relevance', 'Pricing related to Value','Positioning','Consistency', 'Brand Portfolio','Marketing Activities','Brand Meaning', 'Support of the Brand', 'Brand Equity'],
          [" ", 
          value=document.getElementById("DB").value, 
          value=document.getElementById("RLV").value,
          value=document.getElementById("PRV").value,
          value=document.getElementById("PSN").value, 
          value=document.getElementById("CNS").value,
          value=document.getElementById("BP").value,
          value=document.getElementById("MA").value, 
          value=document.getElementById("BM").value,
          value=document.getElementById("SOB").value,
          value=document.getElementById("BE").value,],

        ]);


        var options = {
 
 
          chart: {
            title: 'XYZ',
            subtitle: '',
          },
          bars: 'vertical' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="barchart_material" style="width: 1000px; height: 500px;"></div>
  </body>
  
    
  
</html>

WhiteHat · Accepted Answer

the data on the y-axis gets out of order because string values are being used in the chart data,
instead of number values

to correct, you can use parseInt to convert the strings to numbers.

          [" ", 
          parseInt(document.getElementById("DB").value), 
          parseInt(document.getElementById("RLV").value),
          parseInt(document.getElementById("PRV").value),
          parseInt(document.getElementById("PSN").value), 
          parseInt(document.getElementById("CNS").value),
          parseInt(document.getElementById("BP").value),
          parseInt(document.getElementById("MA").value), 
          parseInt(document.getElementById("BM").value),
          parseInt(document.getElementById("SOB").value),
          parseInt(document.getElementById("BE").value)],

see following working snippet...

<!doctype HTML>
<html`enter code here` lang="en">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible">
	<meta name="viewport" content="width=device-width, initial-scale=1">
<title>

</title>
<head>
<style>

   

</style>
</head>
<body>


		<h1>REPORT CARD</h1>	
        
<br>

		<form role="form" id="price" name="price">	
		<p><b>The brand excels</b></p>
        
		<select class="custom-select" style="width:100pt; height:30pt; font-size:15px; color:grey; float:right;" id="DB" onchange="drawChart()">
			<option id="itemprice" color="green" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
            <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>
		</select>
        <br>
		<p>Relevance:</p>
		<select class="custom-select" style="width:100pt; height:30pt; font-size:15px; color:grey;float:right" id="RLV" onchange="drawChart()">
			<option id="itemprice" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
            <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>
		</select>
                
	</p>
    <br>
		<p>Pricing related to Value:</p>
		<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey ;float:right" id="PRV" onchange="drawChart()">
			<option id="itemprice" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
            <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>            
		</select>
                
	</p>
     <br>
    
		<p>Positioning:</p>
		<select class="custom-select" style="width:100pt; height:30pt; font-size:15px; color:grey;float:right" id="PSN" onchange="drawChart()">
			<option id="itemprice" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
                        <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>
		</select>
                
	</p>
     <br>
     
		<p>Consistency:</p>
		<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="CNS" onchange="drawChart()">
			<option id="itemprice" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
                        <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>
		</select>
                
	</p>
     <br>
     
		<p>Brand Portfolio:</p>
		<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="BP" onchange="drawChart()">
			<option id="itemprice" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
                        <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>
		</select>
                
	</p>
     <br>
     
		<p>Marketing Activities:</p>
		<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="MA" onchange="drawChart()">
			<option id="itemprice" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
                        <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>
		</select>
                
	</p>
     <br>
     
		<p>Brand Meaning:</p>
		<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="BM" onchange="drawChart()">
			<option id="itemprice" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
                        <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>
		</select>
                
	</p>
     <br>
     
		<p>Support of the Brand:</p>
		<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="SOB" onchange="drawChart()">
			<option id="itemprice" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
                        <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>
		</select>
                
	</p>
    <br>
    
   
		<p>Brand Equity:</p>
		<select class="custom-select" style="width:100pt; height:30pt; text-align: center; font-size:15px;color:grey;float:right " id="BE" onchange="drawChart()">
			<option id="itemprice" value="">Please choose</placeholder>
            <option id="itemprice" value="1" >1 </option>
			<option id="itemprice" value="2">2</option>
			<option id="itemprice" value="3">3</option>
			<option id="itemprice" value="4">4</option>
			<option id="itemprice" value="5">5</option>
			<option id="itemprice" value="6">6</option>
            <option id="itemprice" value="7">7</option>
			<option id="itemprice" value="8">8</option>
			<option id="itemprice" value="9">9</option>
			<option id="itemprice" value="10">10</option>
		</select>
                
	</p>
		
	
	</form>
			
  <br> </br><br> </br> 
   
</body>

  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Metrics','Delivering Benefits','Relevance', 'Pricing related to Value','Positioning','Consistency', 'Brand Portfolio','Marketing Activities','Brand Meaning', 'Support of the Brand', 'Brand Equity'],
          [" ", 
          parseInt(document.getElementById("DB").value), 
          parseInt(value=document.getElementById("RLV").value),
          parseInt(value=document.getElementById("PRV").value),
          parseInt(value=document.getElementById("PSN").value), 
          parseInt(value=document.getElementById("CNS").value),
          parseInt(value=document.getElementById("BP").value),
          parseInt(value=document.getElementById("MA").value), 
          parseInt(value=document.getElementById("BM").value),
          parseInt(value=document.getElementById("SOB").value),
          parseInt(value=document.getElementById("BE").value)],

        ]);


        var options = {
 
 
          chart: {
            title: 'XYZ',
            subtitle: '',
          },
          bars: 'vertical' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="barchart_material" style="width: 1000px; height: 500px;"></div>
  </body>
  
    
  
</html>

note: value= isn't needed...

Google Graphs axis order

Tags:

javascript

html

charts

google-visualization

bar-chart

Craig

1 Answers

WhiteHat

Recent Activity

Donate For Us

Google Graphs axis order

Tags:

javascript

html

charts

google-visualization

bar-chart

Craig

1 Answers

WhiteHat

Related questions

Recent Activity

Donate For Us