hAxis date format is lost when I am using 'explorer' option for zoom

20 views

Skip to first unread message

VINAY KUMAR DEVATHA

unread,

Jun 16, 2016, 12:42:06 AM6/16/16

to Google Visualization API

I am using date as hAxis with specific date format. However, when i include 'explorer' option to enable user to be able to zoom, the hAxis date format is lost. Please help to resolve.

My code is as below:

<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: 'dd-MMM-yy'
          },
  explorer: { actions: ['dragToZoom', 'rightClickToReset'],keepInBounds:true } 
        };


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

</body>


</html>

Reply all

Reply to author

Forward

0 new messages