Google column charts X-axis label different from value -
i'd create column chart x axis numeric values 1, 2, 3, 4 ... n , y value of course different on every column. can't find out how change labels on x line under bars, string. example - 1 marked elephant, 2 horse etc.
i use string x values, there no way zoom working. @ least, didn't find way working.
simple example strings, i'd achieve same appearance one, numeric values on x axis.
google.charts.load('current', {packages: ['corechart', 'bar']}); google.charts.setonloadcallback(drawbasic); function drawbasic() { var data = new google.visualization.datatable(); data.addcolumn('number', 'animal'); data.addcolumn('number', 'count'); data.addrows([ ['elephant', 5], ['horse', 2], ['dog', 7], ['cat', 4], ]); var options = { explorer: { axis: 'horizontal', keepinbounds: true, }, title: 'testing', haxis: { title: 'animal', }, vaxis: { title: 'number' } }; var chart = new google.visualization.columnchart( document.getelementbyid('chart_div')); chart.draw(data, options); }
chart should this, working zoom: chart example
to use string labels on continuous axis,
need provide own ticks
using object notation, provide value (v:
) , formatted value (f:
)
{v: 1, f: 'elephant'}
see following working snippet...
google.charts.load('current', { callback: drawbasic, packages: ['corechart'] }); function drawbasic() { var data = new google.visualization.datatable(); data.addcolumn('number', 'animal'); data.addcolumn('number', 'count'); data.addrows([ [1, 5], [2, 2], [3, 7], [4, 4] ]); var options = { explorer: { axis: 'horizontal' }, title: 'testing', haxis: { ticks: [ {v: 1, f: 'elephant'}, {v: 2, f: 'horse'}, {v: 3, f: 'dog'}, {v: 4, f: 'cat'} ], title: 'animal', }, vaxis: { title: 'number' } }; var chart = new google.visualization.columnchart( document.getelementbyid('chart_div') ); chart.draw(data, options); }
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
wiki
Comments
Post a Comment