Use String as label in Google Line Chart API

Question

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

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,'<span class="total-home-tooltip">$300K Some html - 1!</span>'],
        [{v: 1, f:'Q1 2014'}, 6,'<span class="total-home-tooltip">$600K Some html - 2!</span>'],
        [{v: 2, f:'Q2 2014'}, 5,'<span class="total-home-tooltip">$500K Some html - 3!</span>'],
        [{v: 3, f:'Q3 2014'}, 8,'<span class="total-home-tooltip">$800K Some html - 4!</span>'],
        [{v: 4, f:'Q4 2014'}, 2,'<span class="total-home-tooltip">$200K Some html - 5!</span>'],
        [{v: 5, f:'Q1 2015'}, 5,'<span class="total-home-tooltip">$500K Some html - 6!</span>'],
        [{v: 6, f:'Q2 2015'}, 5,'<span class="total-home-tooltip">$500K Some html - 7!</span>']
    ]);
    
    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,'<span class="total-home-tooltip">Some html here</span>'],
        [{v: 1, f:'Q1 2014'}, 1,'<span class="total-home-tooltip">Some html here</span>'],
        [{v: 2, f:'Q2 2014'}, 3,'<span class="total-home-tooltip">Some html here</span>'],
        [{v: 3, f:'Q3 2014'}, 9,'<span class="total-home-tooltip">Some html here</span>'],
        [{v: 4, f:'Q4 2014'}, 4,'<span class="total-home-tooltip">Some html here</span>'],
        [{v: 5, f:'Q1 2015'}, 5,'<span class="total-home-tooltip">Some html here</span>'],
        [{v: 6, f:'Q2 2015'}, 7,'<span class="total-home-tooltip">Some html here</span>']
    ]);
    	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'}], // <------- 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  );
}

<div id="market_trend_chart1"></div>

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

Working Fiddle with no string label http://jsfiddle.net/j29Pt/536/ (issue is now there are no haxis lines) If I try to add String as label http://jsfiddle.net/j29Pt/535/ the chart seems to stop working

WhiteHat WhiteHat · Accepted Answer · 2016-09-18T21:48:20

first, need to understand discrete vs continuous axis

'string' column produces a discrete axis,
'number' column a continuous axis

and certian configuration options only work on one or the other

for instance, hAxis.ticks only work on a continuous axis (and vAxis.ticks)

so if you want a true 'string' for x-axis, you won't be able to use ticks

following is a working example, using the code from the question, using 'string'

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([
    ['Q4 2013', 3, '<span class="total-home-tooltip">$300K Some html - 1!</span>'],
    ['Q1 2014', 6, '<span class="total-home-tooltip">$600K Some html - 2!</span>'],
    ['Q2 2014', 5, '<span class="total-home-tooltip">$500K Some html - 3!</span>'],
    ['Q3 2014', 8, '<span class="total-home-tooltip">$800K Some html - 4!</span>'],
    ['Q4 2014', 2, '<span class="total-home-tooltip">$200K Some html - 5!</span>'],
    ['Q1 2015', 5, '<span class="total-home-tooltip">$500K Some html - 6!</span>'],
    ['Q2 2015', 5, '<span class="total-home-tooltip">$500K Some html - 7!</span>']
  ]);

  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}});

  data2.addRows([
    ['Q4 2013', 5, '<span class="total-home-tooltip">Some html here</span>'],
    ['Q1 2014', 1, '<span class="total-home-tooltip">Some html here</span>'],
    ['Q2 2014', 3, '<span class="total-home-tooltip">Some html here</span>'],
    ['Q3 2014', 9, '<span class="total-home-tooltip">Some html here</span>'],
    ['Q4 2014', 4, '<span class="total-home-tooltip">Some html here</span>'],
    ['Q1 2015', 5, '<span class="total-home-tooltip">Some html here</span>'],
    ['Q2 2015', 7, '<span class="total-home-tooltip">Some html here</span>']
  ]);

  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"
    },
    annotations: {
      style: 'line'
    }
  };

  var joinedData = google.visualization.data.join(data1, data2, 'full', [[0,0]], [1,2], [1,2]);

  var chart = new google.visualization.LineChart(document.getElementById('market_trend_chart1'));
  chart.draw(joinedData, options1);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="market_trend_chart1"></div>

problem with the above answer, the data.join method sorts the data,
which causes the quarters to be out of order (due to the string sort)

as a work around, you could add an additional column for sorting,

then hide the sort columns using a DataView

see following working snippet...

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

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.addColumn('number', 'Sort');
  data1.addRows([
    ['Q4 2013', 3, '<span class="total-home-tooltip">$300K Some html - 1!</span>', 0],
    ['Q1 2014', 6, '<span class="total-home-tooltip">$600K Some html - 2!</span>', 1],
    ['Q2 2014', 5, '<span class="total-home-tooltip">$500K Some html - 3!</span>', 2],
    ['Q3 2014', 8, '<span class="total-home-tooltip">$800K Some html - 4!</span>', 3],
    ['Q4 2014', 2, '<span class="total-home-tooltip">$200K Some html - 5!</span>', 4],
    ['Q1 2015', 5, '<span class="total-home-tooltip">$500K Some html - 6!</span>', 5],
    ['Q2 2015', 5, '<span class="total-home-tooltip">$500K Some html - 7!</span>', 6]
  ]);

  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}});
  data2.addColumn('number', 'Sort');

  data2.addRows([
    ['Q4 2013', 5, '<span class="total-home-tooltip">Some html here</span>', 0],
    ['Q1 2014', 1, '<span class="total-home-tooltip">Some html here</span>', 1],
    ['Q2 2014', 3, '<span class="total-home-tooltip">Some html here</span>', 2],
    ['Q3 2014', 9, '<span class="total-home-tooltip">Some html here</span>', 3],
    ['Q4 2014', 4, '<span class="total-home-tooltip">Some html here</span>', 4],
    ['Q1 2015', 5, '<span class="total-home-tooltip">Some html here</span>', 5],
    ['Q2 2015', 7, '<span class="total-home-tooltip">Some html here</span>', 6]
  ]);

  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"
    },
    annotations: {
      style: 'line'
    }
  };

  var joinedData = google.visualization.data.join(data1, data2, 'full', [[0,0]], [1,2,3], [1,2,3]);
  joinedData.sort([{column: 3}]);

  var joinedView = new google.visualization.DataView(joinedData);
  joinedView.hideColumns([3, 6]);

  var chart = new google.visualization.LineChart(document.getElementById('market_trend_chart1'));
  chart.draw(joinedView, options1);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="market_trend_chart1"></div>

furthermore, it is also fine to use the approach as in the question

if you want to use a number column, each cell has a value (v:) and a formatted value (f:)

the formatted value (f:) will always be a 'string'

but the value (v:) must match the type of the column

data1.addColumn('number', 'Month');      // <-- type must match v:
data1.addRows([[{v: 0, f:'Q4 2013'}]]);

same rule applies when using ticks

Use String as label in Google Line Chart API

1 Answers