hAxis ticks issue when using data.getDistinctValues - big gap

1,295 views
Skip to first unread message

Marc Simard

unread,
May 31, 2016, 1:08:30 PM5/31/16
to Google Visualization API
Hi there,

I have a chart that used to work well for quite some time. I am not sure when the issue first appeared. When using the "ticks: data.getDistinctValues(0)" option to define the hAxis, a very big gap is now generated in the chart:



If I remove the tick definition, it seems to get back to normal:



If I force the ticks to an array of dates (same as the data), it also has the issue. Here is the chart code that fails. Any idea if something has changed?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
        google.load("visualization", "1", {packages:["corechart"], 'language': 'en'});
    </script>
  </head>
  <body>                
    <script type='text/javascript'>

    google.setOnLoadCallback(monthlyline_B);
    function monthlyline_B()
    {
        var data = new google.visualization.DataTable();

        data.addColumn('date', 'Day of the month');
        data.addColumn('number', 'A Values');
        data.addRows([
        [new Date(2016, 4, 15),124],
        [new Date(2016, 4, 16),177],
        [new Date(2016, 4, 17),228],
        [new Date(2016, 4, 18),305],
        [new Date(2016, 4, 19),555],
        [new Date(2016, 4, 20),639],
        [new Date(2016, 4, 21),761],
        [new Date(2016, 4, 22),893],
        [new Date(2016, 4, 23),923],
        [new Date(2016, 4, 24),972],
        [new Date(2016, 4, 25),997],
        [new Date(2016, 4, 26),103],
        [new Date(2016, 4, 27),105],
        [new Date(2016, 4, 28),108],
        [new Date(2016, 4, 29),126],
        [new Date(2016, 4, 30),131],
        [new Date(2016, 4, 31),0],
        [new Date(2016, 5, 1),0],
        [new Date(2016, 5, 2),0],
        [new Date(2016, 5, 3),0],
        [new Date(2016, 5, 4),0],
        [new Date(2016, 5, 5),0],
        [new Date(2016, 5, 6),0],
        [new Date(2016, 5, 7),0],
        [new Date(2016, 5, 8),0],
        [new Date(2016, 5, 9),0],
        [new Date(2016, 5, 10),0],
        [new Date(2016, 5, 11),0],
        [new Date(2016, 5, 12),0],
        [new Date(2016, 5, 13),0],
        [new Date(2016, 5, 14),0]]);
                   
        var options = {
          fontSize: 11,
          hAxis: {ticks: data.getDistinctValues(0), format: "d", minTextSpacing:1,  showTextEvery:1, textPosition: 'out',  titleTextStyle: {italic: false, color: 'Black'}, title: "Day of the month", gridlines:{count:-1}},
          series: [{pointSize: 4}]
        };
        var chart = new google.visualization.AreaChart(document.getElementById('monthlyline_B'));
        chart.draw(data, options);
   
    }
    </script>

    <div id='monthlyline_B' style='width: 100%; height: 250px;'> </div>                    
                   
  </body>
</html>



Auto Generated Inline Image 1
Auto Generated Inline Image 2

Daniel LaLiberte

unread,
May 31, 2016, 2:00:41 PM5/31/16
to Google Visualization API
Thanks for this example.  Use of the explicit ticks option with dates is causing this problem, probably because it internally sets the viewWindow min and max which has the same problem.

I don't yet know why this occurs or how to fix it, but you can work around the problem by using the new www.gstatic.com/charts/loader.js with 'current'.   See https://developers.google.com/chart/interactive/docs/basic_load_libs#update-library-loader-code



--
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/b7b65c9e-4de1-4b4c-bd48-3a92a10ed31e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Marc Simard

unread,
May 31, 2016, 2:43:02 PM5/31/16
to Google Visualization API
Hi Daniel,

Thank you very much for the quick reply! Using the new loader did indeed fix the issue.
It's great to have people like yourself actively help us out :)

Here's the updated code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>

    <!--
    Old Google Chart Loading Method - hAxis ticks issue

    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type='text/javascript'>
       
        /*
        Old Google Chart Loading Method - hAxis ticks issue

        google.load("visualization", "1", {packages:["corechart"], 'language': 'en'});
        */
        google.charts.load('current', {packages: ['corechart'], 'language': 'en'});


    </script>
  </head>
  <body>                
    <script type='text/javascript'>


    /*
    Old Google Chart Loading Method - hAxis ticks issue
    google.setOnLoadCallback(monthlyline_B);
    */
   
    google.charts.setOnLoadCallback(monthlyline_B);


    // Rest of page....


Thanks again,

Marc

arjun bollam

unread,
Aug 4, 2018, 12:51:54 PM8/4/18
to Google Visualization API
Hi Marc,

         I am facing the same issue when using h-axis ticks option.The h-axis values are spread all at a time and the bars are looking almost like a straight lines when there are many.I am using the new charts loader and still facing the issue.Could you please help me resolve this issue ? Thanks in davance 
Reply all
Reply to author
Forward
0 new messages