Gridlines are not showing (linechart)

57 views
Skip to first unread message

Marek Kozela

unread,
Oct 4, 2018, 5:02:20 AM10/4/18
to Google Visualization API
Hi,

in our graphs the gridelines are not showing...

Here are our settings:

// Set chart default options
var options = {
width: '100%',
height: 260,
legend: 'none',
backgroundColor: '#fff',
chartArea: {
backgroundColor: '#fff',
width: '100%', 
height: '100%', 
left: 10, 
right: 20,
top: 20
},
hAxis: {
// baseline: 0,
// viewWindowMode: 'pretty',
gridlines: {count: 5},
textPosition: 'none'
},
vAxis: {
baseline: 0.0,
baselineColor: 'red',
gridlines: {count: 5},
textPosition: 'none'
},
series: {0: {color: '#7bd7f0'}},
gridlines: {color: "#cacfd8"},
baselineColor: '#cacfd8',
};

// Load the Visualization API and the linechart package.
google.charts.load('current', {'packages':['corechart'], 'language': 'sk'});


var from = "{arguments.from}";
var to = "{arguments.to}";

google.charts.setOnLoadCallback(drawChart{fund.uid});

function drawChart{fund.uid}() {
var fund = {fund.uid};
var jsonData{fund.uid} = $.ajax({
method: 'POST',
url: 'service/',
data: {
tx_rtgfunds_fund: {
action: 'performance',
id: fund,
from: from,
to: to
}
},
dataType: 'json',
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData{fund.uid});
var chart{fund.uid} = new google.visualization.LineChart(document.getElementById('chart_div{fund.uid}'));
// Get chart range
var axisRange = data.getColumnRange(1);
var min = Math.abs(axisRange.min);
var max = Math.abs(axisRange.max);
var optionsLocal = options;
//console.log('min/max: ' + Math.ceil(min) + ' - ' + Math.ceil(max));
if (max >= min) {
// optionsLocal.hAxis.viewWindowMode = 'pretty';
optionsLocal.vAxis.minValue = Math.ceil(max) * -1;
optionsLocal.vAxis.maxValue = Math.ceil(max);
} else {
optionsLocal.vAxis.minValue = Math.ceil(min) * -1;
optionsLocal.vAxis.maxValue = Math.ceil(min);
}
chart{fund.uid}.draw(data, optionsLocal);
}

Here is the website with the graphs: http://dev.iad.sk/en/mutual-funds/conservative-investment/

Thank you very much for your help.

Daniel LaLiberte

unread,
Oct 4, 2018, 2:58:01 PM10/4/18
to Google Visualization API
Hi Marek,

Apparently version 46 treats the { textPosition: 'none' } option differently than previous versions.  This happens because it is trying harder now to show all your ticks, but it gets confused if you tell it they are positioned nowhere.   

This is a regression, and I will probably be able to fix it for future versions.  There is an easy workaround, however.  Instead of using textPosition: 'none', set the textStyle.color to 'none'.

"textStyle": {
        "color": "none"
      }



--
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/eb5ce779-d6da-45b9-80ca-8d2af6eab457%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.


--

Marek Kozela

unread,
Oct 4, 2018, 4:09:01 PM10/4/18
to Google Visualization API
Hi Daniel,

I did what you suggested, but it is still not showing gridlines... I have there option gridlines: {count: 5} but it is not working...

Daniel LaLiberte

unread,
Oct 4, 2018, 4:19:55 PM10/4/18
to Google Visualization API
Did you remove the  { textPosition: 'none' } ?  Probably remove the count: 5 also. 


On Thu, Oct 4, 2018 at 4:09 PM Marek Kozela <marek....@gmail.com> wrote:
Hi Daniel,

I did what you suggested, but it is still not showing gridlines... I have there option gridlines: {count: 5} but it is not working...

--
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/c3cf80b7-2669-4e0b-b86b-fb380205d265%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Marek Kozela

unread,
Oct 4, 2018, 4:25:36 PM10/4/18
to Google Visualization API
Yes, I removed textPosition and also tried to remove count...still not working :(

Daniel LaLiberte

unread,
Oct 4, 2018, 4:39:40 PM10/4/18
to Google Visualization API
Maybe you changed the top-level gridlines option, which is not used.  You need to change both hAxis.gridlines and vAxis.gridlines.

On the site you linked to before, I am still seeing:

  1. hAxis:
    1. gridlines:
      1. count: 5
      2. __proto__: Object
    2. textPosition: "none"

On Thu, Oct 4, 2018 at 4:25 PM Marek Kozela <marek....@gmail.com> wrote:
Yes, I removed textPosition and also tried to remove count...still not working :(

--
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/98d61712-344a-4194-acf6-94b9e8c2f0be%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Marek Kozela

unread,
Oct 5, 2018, 2:21:24 AM10/5/18
to Google Visualization API
I removed gridlines from options, you can see it here now: http://dev.iad.sk/en/mutual-funds/conservative-investment/
But still not working...

Is there any way that I can change the version of package? I mean here:

google.charts.load('current', {'packages':['corechart'], 'language': 'sk'});

I want to use older version because about a week ago it was working... So can I replace the "current" with some number of older version of code?

Thank you for your time and help.

Daniel LaLiberte

unread,
Oct 5, 2018, 9:19:33 AM10/5/18
to Google Visualization API
As mentioned in the announcement of the new release, https://groups.google.com/forum/#!topic/google-visualization-api/SaQnVkXTUO8 
you can replace 'current' with '45.2' to get the previous version.

Your changes to the charts that you hope to see on http://dev.iad.sk/en/mutual-funds/conservative-investment/ are not happening.  In the debugger, I still see this for your options:

  1. {width: "100%", height: 260, legend: "none", backgroundColor: "#fff", chartArea: {…}, …}
    1. backgroundColor: "#fff"
    2. baselineColor: "#cacfd8"
    3. chartArea:
      1. backgroundColor: "#fff"
      2. height: "100%"
      3. left: 10
      4. right: 20
      5. top: 20
      6. width: "100%"
      7. __proto__: Object
    4. gridlines:
      1. color: "#cacfd8"
      2. __proto__: Object
    5. hAxis:
        1. gridlines:
          1. count: 5
          2. __proto__: Object
        2. textPosition: "none"
        1. __proto__: Object
      1. height: 260
      2. legend: "none"
      3. series:
        1. 0: {color: "#7bd7f0"}
        2. __proto__: Object
      4. vAxis:
        1. baseline: 0
        2. baselineColor: "red"
        1. gridlines:
          1. count: 5
          2. __proto__: Object
        1. maxValue: 16
        2. minValue: -16
        3. textPosition: "none"
        4. __proto__: Object
      1. width: "100%"
      2. __proto__: Object



    --
    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/46014719-c7a3-4dcb-b906-a6b695ef7e58%40googlegroups.com.

    For more options, visit https://groups.google.com/d/optout.

    Marek Kozela

    unread,
    Oct 5, 2018, 9:25:39 AM10/5/18
    to Google Visualization API
    They are not showing because I already replaced 'current' with '45.2' to get the previous version. It was not working with the 'current' version so I decided to use version '45.2'.

    Hartmut Gunther

    unread,
    Oct 11, 2018, 4:52:01 AM10/11/18
    to Google Visualization API
    Hi Daniel. Thanks for you great work.
    I also have a similar problem - the gridlines have disappeared
    My Site is here


    There are many pages like this on th site and the gridlines have been working well till this week. 
    As you can see the coding is complex but works well and did not want to use an older version ( like 45.2) and be then left behind
    The work around you recommend for Marek would not work for me due to the detail ecoded in my gridlines and ticks

    thanks for your help in advance

    Hartmut
    To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

    Hartmut Gunther

    unread,
    Oct 11, 2018, 5:20:21 AM10/11/18
    to Google Visualization API
    Hi Daniel. In the mean time I had to revert to 45.2 because my site looked and behaved badly.
    If there is something I can do under the current 46 release, that would be good to know.

    thanks again

    Hartmut

    Daniel LaLiberte

    unread,
    Oct 11, 2018, 8:50:52 AM10/11/18
    to Google Visualization API
    I have a fix I will be pushing out today, along with many other fixes.  Sorry for the delay.

    To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

    --
    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/8b24ebbf-dd4f-4692-a91c-6555baf5095c%40googlegroups.com.

    For more options, visit https://groups.google.com/d/optout.


    --

    Hartmut Gunther

    unread,
    Oct 15, 2018, 11:43:00 PM10/15/18
    to Google Visualization API
    Hi Daniel. Minor grid lines and ticks are still not displaying under 'current' version

    regards

    Hartmut

    To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

    --
    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-visualization-api+unsub...@googlegroups.com.
    Reply all
    Reply to author
    Forward
    0 new messages