vertical axis values as interval for google charts

231 views
Skip to first unread message

Deividas Juškevičius

unread,
Jan 29, 2015, 3:44:43 PM1/29/15
to google-visua...@googlegroups.com
Hi, is it possible to combine two values to get vertical axis labes (or values) like shown in a picture?





























Cannot find any info about this, now I'm getting only one value in vertical axis.

 google.load("visualization", "1.1", {packages: ["bar"]});
            google.setOnLoadCallback(drawChart);

            function drawChart() {
                var data = {{ moneyChart|raw }};

                var maxItemsVal = 0;

                var rows = new Array(['year', 'amount']);
                $.each(data, function (index, value) {
                    value[0] = value[0];
                    value[1] = Math.round(value[1] * 100) / 100;
                    value[2] = Math.round(value[2] * 100) / 100;
                    rows.push (new Array(value[0], value[1]));
                    if (value[1] > maxItemsVal) {
                        maxItemsVal = value[1];
                    }

                });
                console.log(rows);
                var dataTable = google.visualization.arrayToDataTable(rows);
                var chart = new google.charts.Bar(document.getElementById('money_graph'));
                var options = {
                    focusTarget: 'category',
                    legend: {position: 'none'},
                    bars: 'horizontal',
                    vAxis: {textPosition: 'in', maxValue: maxItemsVal + 20, minValue: 0},
                    hAxis: {textPosition: 'in', maxValue: maxItemsVal + 20, minValue: 0},
                    chartArea: {width: '100%', height: '80%'}
                };

                chart.draw(dataTable, options);
            }



Daniel LaLiberte

unread,
Jan 29, 2015, 4:16:03 PM1/29/15
to google-visua...@googlegroups.com
We don't have any direct support for ranges of tick values as you show in your image, but you can create that effect by using the explicit ticks option with both a value and a formatted value for each tick.  E.g.

var options = {
  vAxis: { 
    ticks: [ 
      { v: 300000, f: "300K - 500K" }, 
      { v: 500000, f: "500K - 1M" },
    ...]
  }}

It is also possible to get the horizontal bands between the gridlines, but it is a fair amount of hacking.  Here is a thread that talks about this:   https://groups.google.com/forum/#!searchin/google-visualization-api/horizontal$20bands/google-visualization-api/v-waN8ija1Q/nsItUYqi_x8J

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.



--
dlaliberte@Google.com   5CC, Cambridge MA
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA
Reply all
Reply to author
Forward
0 new messages