title: Use String as label in Google Line Chart API
body: <p>I am looking to use String as label for the X-Axis of Google Chart api for Line chart where I am joining two set of data to plot two lines in single line chart, I managed to make it work with no String label (works with number) but no haxis lines are shown</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>google.charts.load('current', {'packages': ['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  
  
  function drawChart() {
      var data1 = new google.visualization.DataTable();
      data1.addColumn('string', 'Month');
      data1.addColumn('number', 'Average Sales Price');
   data1.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});
      data1.addRows([
          [{v: 0, f:'Q4 2013'}, 3,'&lt;span class="total-home-tooltip"&gt;$300K Some html - 1!&lt;/span&gt;'],
          [{v: 1, f:'Q1 2014'}, 6,'&lt;span class="total-home-tooltip"&gt;$600K Some html - 2!&lt;/span&gt;'],
          [{v: 2, f:'Q2 2014'}, 5,'&lt;span class="total-home-tooltip"&gt;$500K Some html - 3!&lt;/span&gt;'],
          [{v: 3, f:'Q3 2014'}, 8,'&lt;span class="total-home-tooltip"&gt;$800K Some html - 4!&lt;/span&gt;'],
          [{v: 4, f:'Q4 2014'}, 2,'&lt;span class="total-home-tooltip"&gt;$200K Some html - 5!&lt;/span&gt;'],
          [{v: 5, f:'Q1 2015'}, 5,'&lt;span class="total-home-tooltip"&gt;$500K Some html - 6!&lt;/span&gt;'],
          [{v: 6, f:'Q2 2015'}, 5,'&lt;span class="total-home-tooltip"&gt;$500K Some html - 7!&lt;/span&gt;']
      ]);
      
      var data2 = new google.visualization.DataTable();
      data2.addColumn('string', 'Month');
      data2.addColumn('number', 'Median Sales Price');
   data2.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});
   
   /*if we would like to show string in x asix we have to use data in format {v: 0, f:'Q4 2013'} otherwise google api will not draw haxis lines */
      data2.addRows([
          [{v: 0, f:'Q4 2013'}, 5,'&lt;span class="total-home-tooltip"&gt;Some html here&lt;/span&gt;'],
          [{v: 1, f:'Q1 2014'}, 1,'&lt;span class="total-home-tooltip"&gt;Some html here&lt;/span&gt;'],
          [{v: 2, f:'Q2 2014'}, 3,'&lt;span class="total-home-tooltip"&gt;Some html here&lt;/span&gt;'],
          [{v: 3, f:'Q3 2014'}, 9,'&lt;span class="total-home-tooltip"&gt;Some html here&lt;/span&gt;'],
          [{v: 4, f:'Q4 2014'}, 4,'&lt;span class="total-home-tooltip"&gt;Some html here&lt;/span&gt;'],
          [{v: 5, f:'Q1 2015'}, 5,'&lt;span class="total-home-tooltip"&gt;Some html here&lt;/span&gt;'],
          [{v: 6, f:'Q2 2015'}, 7,'&lt;span class="total-home-tooltip"&gt;Some html here&lt;/span&gt;']
      ]);
       var options1 = {
    legend: {
     position: 'bottom',
     textStyle: {color: 'black', fontSize: 14},
     pointShape: "triangle",
     alignment: 'end'
    },
    interpolateNulls: true,
    height: 312,
          width: 1070,
    colors: ['#EBAD00','#00ACE0'],
    pointSize: 8,
    backgroundColor: {fill: "transparent"},
    tooltip: {isHtml: true},
    hAxis: {
     minValue: 0,
     baselineColor:"#BBBBBB"
  
    },
    vAxis: {
     gridlines: {color: "transparent"},
     minValue: 0,
     baselineColor:"#BBBBBB"
    },
     ticks: [{v: 0, f:'Jan'},{v: 1, f:'Feb'},{v: 2, f:'Mar'},{v: 3, f:'Apr'},{v: 4, f:'May'},{v: 5, f:'June'},{v: 6, f:'July'}], // &lt;------- This does the trick
       
    annotations: {
     style: 'line'
    }
  
   };
      var joinedData = google.visualization.data.join(data1, data2, 'full', null, [1,2], [1,2]);
      
      var chart = new google.visualization.LineChart(document.getElementById('market_trend_chart1'));
      chart.draw(joinedData, options1  );
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="market_trend_chart1"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I get this error Error: Type mismatch. Value 0 does not match type string in column index 0 , I understand the error is mismatch of variable type but not very sure how to resolve this</p>
  
  <p>Working Fiddle with no string label <a href="http://jsfiddle.net/j29Pt/536/" rel="nofollow">http://jsfiddle.net/j29Pt/536/</a> (issue is now there are no haxis lines)
  If I try to add String as label <a href="http://jsfiddle.net/j29Pt/535/" rel="nofollow">http://jsfiddle.net/j29Pt/535/</a> the chart seems to stop working</p>