Re: showTextEvery for date

1,367 views
Skip to first unread message

asgallant

unread,
Aug 7, 2012, 10:19:08 AM8/7/12
to google-visua...@googlegroups.com
The axes are very fickle, and the API will override your set options if it thinks there will be a problem implementing them.  Try playing around with the hAxis.minTextSpacing option to see if setting that to lower values adds your labels back in (default = font point size).

On Tuesday, August 7, 2012 9:16:28 AM UTC-4, Vadym Gyrkalo wrote:
I have 2 charts (weekly and monthly stat)
Parameters the same for both charts, exclude viewWindow.min and viewWindow.max.
In first case these parameters are: 2012-08-06 and 2012-08-12 (1 week)
In second case: 2012-08-01 and 2012-08-31 (1 month)
My options for date axis:
hAxis: {title: monthName.toUpperCase(), 
   titleTextStyle: {color: '#000000'},
baselineColor:'#ffffff',
allowContainerBoundaryTextCufoff:true,
viewWindow:{min:MIN,max:MAX},
format:'dd',
gridlines:{color: '#ffffff'},
//logScale:true,
textPosition:'out',
showTextEvery:1,
strictFirstColumnType: false
}
Why on second chart, I can not see all the dates on the axis X?

Thanks, Vadym

Vadym Gyrkalo

unread,
Aug 7, 2012, 12:10:04 PM8/7/12
to google-visua...@googlegroups.com
Thanks for your answer!
I tried maxTextLines: 2 and minTextSpacing: 1, but this does not work.
If you reduce the period to August 18, I see 50% of labels.

вторник, 7 августа 2012 г., 17:19:08 UTC+3 пользователь asgallant написал:

asgallant

unread,
Aug 7, 2012, 2:24:22 PM8/7/12
to google-visua...@googlegroups.com
Hmm...try setting hAxis.slantedTextAngle to 90.

It could be that the API just isn't going to draw every label for you no matter what.

Vadym Gyrkalo

unread,
Aug 7, 2012, 4:53:15 PM8/7/12
to google-visua...@googlegroups.com
Very strange!
I took an example from google and fill an array of data with other data and found that the behavior is identical.
Code:
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Calorie');
        data.addRows( [
          [new Date(2012,7,1),  400],
          [new Date(2012,7,2),  460],
          [new Date(2012,7,3),  770],
          [new Date(2012,7,4),  540],
          [new Date(2012,7,5),  400],
          [new Date(2012,7,6),  460],
          [new Date(2012,7,7),  770],
          [new Date(2012,7,8),  400],
          [new Date(2012,7,9),  460],
          [new Date(2012,7,10),  770],
          [new Date(2012,7,11),  540],
          [new Date(2012,7,12),  400],
          [new Date(2012,7,13),  460]  
        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Date', 
titleTextStyle: {color: 'red'},
minTextSpacing:1,
slantedText:true,
slantedTextAngle:90,
showTextEvery:1,
textStyle:{color: '#333333', fontSize: 9},
format:'dd'
 }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>


вторник, 7 августа 2012 г., 21:24:22 UTC+3 пользователь asgallant написал:
Reply all
Reply to author
Forward
0 new messages