Re: [visualization-api] hAxis date format is lost when 'explorer' is option is used.

25 views
Skip to first unread message

Daniel LaLiberte

unread,
Jun 16, 2016, 11:02:19 AM6/16/16
to Google Visualization API
When you use the explorer mode, the tick generation is forced to be automatic, and more flexible formatting is also invoked.  You can still control the date (or datetime) format by using the gridlines.units option.  See  https://developers.google.com/chart/interactive/docs/datesandtimes#formatting-axis-gridline-and-tick-labels for the details.

On Thu, Jun 16, 2016 at 12:36 AM, VINAY KUMAR DEVATHA <vinaykum...@gmail.com> wrote:
I am using a line chart to trend with hAxis as date type. I want a specific format to be used for hAxis and also the user to be able zoom in and out. But the hAxis format is not working when i use 'explorer' option.

My code:

<html>
<head>
 
<script src='jquery-1.11.2.min.js'></script>
 
<link rel="stylesheet" type="text/css" href="jquery-ui.min">
</head>
<body>
<div id='curve_chart'>


</div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   
<script type="text/javascript">
      google
.charts.load('current', {'packages':['corechart']});
      google
.charts.setOnLoadCallback(drawChart);


     
function drawChart() {
       
var data = new google.visualization.DataTable();
        data
.addColumn('date', 'Date');
        data
.addColumn('number', 'Kepler-22b mission');
 data
.addColumn({type:'number',role:'annotation'});
 data
.addRows([
         
[new Date(2014, 2, 15), 12400,12400],
         
[new Date(2014, 2, 16), 24045,24045],
         
[new Date(2014, 2, 17), 35022,35022],
         
[new Date(2014, 2, 18), 12284,12284],
         
[new Date(2014, 2, 19), 8476,8476],
         
[new Date(2014, 2, 20), 0,0]
       
]);
 
       
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));


       
var options = {
          displayAnnotations
: true,
  hAxis
: {
            format
: 'none'//'dd-MMM-yy'
         
},
  explorer
: { actions: ['dragToZoom', 'rightClickToReset'],keepInBounds:true }
       
};


        chart
.draw(data, options);
     
}
   
</script>
</body>



</html>

--
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 https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/18377097-9efe-46f4-bdcf-2a11be11aa9c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--
Reply all
Reply to author
Forward
0 new messages