Want to show complete date in h-axis

24 views
Skip to first unread message

Huzaifa Arain

unread,
Jan 25, 2014, 6:43:22 AM1/25/14
to google-visua...@googlegroups.com
 

Q : i want to show every day of month on h-axis but currently it showing 2 , 6 , 9 so on till 30. Please check the code. 



 <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
     var data;
     var chart;

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

       //  Create our data table.
        data = new google.visualization.DataTable();
        data.addColumn('number', 'Date');
        data.addColumn('number', 'Income');
        // console.log(Math.random(10000));

        for(var a = 1 ; a <= 30 ; a++)
        {
           data.addRow([a,Math.floor((Math.random()*50000))]);
        }

        
        // Set chart options
       var options = {
          title: 'Income Of This Month',
          hAxis: {title: 'Days' },
          vAxis: {title: 'Income'},
         
        };


        // Instantiate and draw our chart, passing in some options.
        chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        // google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
      }
Capture.PNG

Sergey Grabkovsky

unread,
Jan 27, 2014, 9:51:29 AM1/27/14
to google-visua...@googlegroups.com
You can do this in one of two ways. Either you can set the number of gridlines to be what you want, like so:
var options = {
  title: 'Income Of This Month',
  hAxis: {
    title: 'Days',
    gridlines: {
      count: 30
    }
  },
  vAxis: {title: 'Income'},
};

Or, you could use the explicit ticks option, and tell the chart exactly where you want the ticks, like so:
var options = {
  title: 'Income Of This Month',
  hAxis: {
    title: 'Days',
    ticks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]
  },
  vAxis: {title: 'Income'},
};

Keep in mind that if your chart width isn't large enough, you won't see all your tick labels simply because there isn't enough room to render them all.

- Sergey


--
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/groups/opt_out.

Huzaifa Arain

unread,
Jan 27, 2014, 10:47:44 AM1/27/14
to google-visua...@googlegroups.com
great , it works fine ... 

Mr Sergey Thanks . :) 



With Kind Regards 

Divs & Pixel

Huzaifa Arain / Chief Executive Officer
+92-334-2550219/ huzaifa...@gmail.com

Divs & Pixel Web Solutions 
Office: +92-223-811506 
Banglow 202 Block D 2nd Floor Latifabad Unit 7 , Hyderabad Pakistan
http://www.divsnpixel.com

Facebook Twitter Google Plus

This e-mail message may contain confidential or legally privileged information and is intended only for the use of the intended recipient(s). Any unauthorized disclosure, dissemination, distribution, copying or the taking of any action in reliance on the information herein is prohibited. E-mails are not secure and cannot be guaranteed to be error free as they can be intercepted, amended, or contain viruses. Anyone who communicates with us by e-mail is deemed to have accepted these risks. Divs & Pixel is not responsible for errors or omissions in this message and denies any responsibility for any damage arising from the use of e-mail. Any opinion and other statement contained in this message and any attachment are solely those of the author and do not necessarily represent those of the company.



--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/kgeA6y5u_nQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages