开发者

Google Chart Api - Custom Axis Step

I have my char开发者_StackOverflowt working ok, however I would like to use a custom step for my vertical y-axis. At the moment it seems to be automatic and is spaced out as below:

1,500,000
3,000,000
4,500,000

I would prefer it to be:

100,000
200,000
300,000
and so on...

Is there any way I can set this, I have looked through all the documentation but can't figure it out.

Here is my code:

var chart = new google.visualization.LineChart(document.getElementById('chart'));
            chart.draw(chartData, { width: 1600, height: 900, title: 'Company Performance',
                yAxis: { gridlineColor: '#ff0000' },
                xAxis: { gridlineColor: '#ff0000' }
                }
            );

My data is company profit for each week of the year, y-axis is profit, x-axis is the week number.

Hope somebody can help.

Paul


this is how I do it:

var options = {
    vAxis: {            // same thing for horisontal, just use hAxis
        viewWindow: {   // what range will be visible
            max: 120,
            min: 0
        },
        gridlines: {
            count: 12   // how many gridlines. You can set not the step, but total count of gridlines.
        }
    }
};

all the best ;)


For as far as I know this cannot be done automatically with Google Charts settings.

I've written a javascript function to do this.

To use it you can create a nice sequence that can be used as ticks for the vertical axis:

var prettyTicks = getChartTicks(0, chartData.getColumnRange(1).max);

The line for the xAxis should be changed to apply the ticks:

yAxis: { gridlineColor: '#ff0000', ticks: prettyTicks },

Here is the javascript method to create the ticks. It will create a tick for each value of 10 and if that creates too many ticks then it will do this for each 100 or 1000 etc.

    // Creates an array of values that can be used for the tick property of the Google Charts vAxis
    // The values provide a nice scale to have a clean view. 
    var getChartTicks = function (min, max) {
        // settings
        var maxTicks = 8;
        var tickSize = 10;

        // determine the range of the values and the number of ticks
        var newMin;
        var newMax;
        var nrOfTicks;
        var appliedTickSize = 1;
        while (newMin == null || nrOfTicks > maxTicks) {
            appliedTickSize *= tickSize;

            newMin = Math.floor(min / appliedTickSize) * appliedTickSize;
            newMax = Math.ceil(max / appliedTickSize) * appliedTickSize;
            nrOfTicks = (newMax - newMin) / appliedTickSize;
        }

        // generate the tick values which will be applied to the axis
        var ticks = new Array();
        var i = 0;
        for (var v = newMin; v <= newMax; v += appliedTickSize) {
            ticks[i++] = v;
        }

        return ticks;
    }

So to summarize, after adding this method your code could then be changed to:

var prettyTicks = getChartTicks(0, chartData.getColumnRange(1).max);
var chart = new google.visualization.LineChart(document.getElementById('chart'));
        chart.draw(chartData, { width: 1600, height: 900, title: 'Company Performance',
            yAxis: { gridlineColor: '#ff0000', ticks: prettyTicks },
            xAxis: { gridlineColor: '#ff0000' }
            }
        );


Hi Please refer google chart api.There are several parameters available according to your requirement like

chbh = Bar width and spacing ...

chco = Series colors ...

chd = Chart data string...

chdl,chdlp, chdls=Chart legend text and style...

chds Scale for text format with custom range...

chem = Dynamic icon markers...

for more information http://code.google.com/apis/chart/image/docs/chart_params.html

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜