You can do one of two things, either set the vAxis.gridlines.count or the
vAxis.ticks options. vAxis.gridlines.count takes an integer for the number
of gridlines to display, which you can set to ((maxValue - minValue) /
interval + 1) for a given maxValue, minValue, and interval, assuming that
the result of this equation is an integer. In your case, you would
probably want to set your vAxis option like this:
vAxis: {
gridlines: {
count: 31 // (600 - 0) / 20 + 1
},
viewWindow: {
min: 0,
max: 600
}
}
Alternatively, you can specify the vAxis.ticks option, which takes an array
of values or objects. Each value or object in the array tells the chart
where to place a tick mark (which generate gridlines and axis labels).
Values are (usually) numbers, objects have "v" and "f" properties, where
the "v" property is the value and the "f" property is the label to place at
that tick mark. In your case, you would specify your vAxis option like
this:
vAxis: {
ticks: [0, 20, 40, 60, /* repeat every 20... */, 580, 600],
viewWindow: {
min: 0,
max: 600
}
}
On Tuesday, May 20, 2014 6:08:46 AM UTC-4, Missy wrote:
>
> I am trying setup range(i.e. 20, 40, 60, 80...600) for my vAxis on my
> chart. I have added the min and max value but I am still unable to the get
> the range interval. Is their a control property I may be missing or I
> would need to create function to show the vAxis range in 20s.
>
> function drawVisualization(dataValues, chartTitle, columnNames,
> categoryCaption) {
> if (dataValues.length < 1)
> return;
>
> var data = new google.visualization.DataTable();
> data.addColumn('string', columnNames.split(',')[0],'name');
> data.addColumn('number', columnNames.split(',')[1], 'price');
> data.addColumn('string', columnNames.split(',')[2],'type');
> data.addColumn('datetime', columnNames.split(',')[3],'date');
>
> for (var i = 0; i < dataValues.length; i++) {
>
> var date = new Date(parseInt(dataValues[i].Date.substr(6),
> 10));
>
> data.addRow([dataValues[i].ColumnName,
> dataValues[i].Value, dataValues[i].Type, date]);
> }
>
>
> var dateFormatter = new google.visualization.DateFormat({
> pattern: 'dd MM yyyy' });
> var line = new google.visualization.ChartWrapper({
> 'chartType': 'AreaChart',
> 'containerId': 'PieChartContainer',
> 'options': {
> 'width': 1200,
> 'height': 500,
> 'legend': 'none',
> 'hAxis': {
> 'format': "dd-MM-yyyy",
> 'hAxis.maxValue': 'viewWindow.max',
> 'maxValue': new Date(2014, 05, 30), 'minValue':
> new Date(2014, 04, 05),
> 'viewWindow': { 'max': new Date(2014, 05, 30) },
> },
>
> 'vAxis': {
> 'viewWindowMode': 'explicit',
> 'viewWindow': {
> 'max': 100,
> 'min': 1
>
> }
> },
> //'title': chartTitle,
> 'chartArea': { 'left': 150, 'top': 100, 'right': 50,
> 'bottom': 100 },
> 'tooltip': { isHtml: true }
> },
> 'view': {
> 'columns': [{
>
> type: 'string',
> label: data.getColumnLabel(3),
> calc: function (dt, row) {
> var date = dt.getValue(row, 3);
> return dateFormatter.formatValue(date);
> }
> }, 1, {
> type: 'string',
> role: 'tooltip',
> calc: function (dt, row) {
> return 'Name: ' + dt.getValue(row, 0) + ',
> Price: ' + +dt.getValue(row, 1) + ', Date: ' + +dt.getFormattedValue(row,
> 3);
> }
> }]
> }
> });
>
> new
> google.visualization.Dashboard(document.getElementById('PieChartExample')).bind([myIdSlider],
>
> [line, table]).draw(data);
>
> }
>
>
> Please advice, if possible. Many thanks.
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
