Vertical Gridlines

  • Resolved ptrkx

    (@ptrkx)


    3 years, 5 months ago

    hello all,

    i have a little problem implementing vertical gridlines in my manual configuration. I have a dual y axis chart that I want to add vertical gridlines to. According to the google doc this should work: https://developers.google.com/chart/interactive/docs/gallery/linechart?hl=de

    Unfortunately the implementation in the code did not work. Do you have any idea how it is possible to implement these vertical lines to the steps 10000, 20000 30000…?

    My Config:
    {
    “vAxes”: {
    “0”: {“title”: “Leistung / Power [W]”, “ticks”: [0,100,200,300,400,500,600,700,800]},
    “1”: {“title”: “Drehmoment / Torque [Ncm]”,”ticks”: [0,2,4,6,8,10,12,14,16]}
    },
    “series”: {
    “0”: {“targetAxisIndex”: “0”},
    “1”: {“targetAxisIndex”: “0”},
    “2”: {“targetAxisIndex”: “1”, “lineDashStyle”:[10,10]},
    “3”: {“targetAxisIndex”: “1”, “lineDashStyle”:[10,10]}
    }
    }

    Screenshot from the Chart for better understanding: https://ibb.co/RGFQnfY

    Thanks for the help

    Best regards

Viewing 5 replies - 1 through 5 (of 5 total)
  • Mat

    (@mateithemeisle)

    Hello @ptrkx ,

    Thank you for using Visualizer and apologies for the delayed reply!

    The vertical gridlines in Google Charts can only be drawn if you have numeric (number) values on the hAxis as the data needs to be continuous. You can read more about this condition here.

    Now, I haven’t seen your data but since the vertical lines are not working, I assume it looks something like this. Which does not form a continuous axis since the first column of data is not a number as the rest.

    I have created an example that may help you out with building the vertical lines and you can find it here. As you can see all columns are of number type thus, by default the chart will display like this.

    Now you can use the Horizontal/Vertical Axis settings from the plugin or the manual configuration tab and it will work just the same. Here is a screenshot of the result using the plugin settings.

    And here is a screenshot of the same table using the below Manual Configuration.

    {
"vAxis":{"title": "Hello", "titleTextStyle": {"color": "#FF0000"},
"gridlines.count":20,
"gridlines":{"color":"#FF5733",
"minSpacing":20
}
},
"hAxis":{"title": "Haxis", "titleTextStyle": {"color": "#0426E3"},
"gridlines.count":30,
"gridlines":{"color":"#0426E3",
"minSpacing":2
}
}
}

    I hope this answer will help you achieve your desired style.

    Thank you for understanding and have an amazing day!

    Thread Starter ptrkx

    (@ptrkx)

    Hey Mat,

    thank you very much for the reply. My data looks like this:
    x,Leistung S1 [w],Leistung max. [w],Drehmoment S1 [Ncm],Drehmoment max. [Ncm]
    string,number,number,number,number
    0,0,0,10,19.5
    10000,110,206,10.5,19.5
    20000,220,410,10.5,19.5
    30000,328,580,10.4,18.43
    40000,412,682,9.81,16.25
    50000,496,720,9.44,13.74
    60000,556,688,8.83,10.92

    But sadly the gridlines do not work. i tried to implement them manually but without success.

    Hi @ptrkx!

    Please try to set the first column data type as number, as it is currently set as string, thus the vertical gridlines won’t be displayed. As Mat mentioned above, the vertical gridlines will be displayed only if all the columns data type are set as number.

    Let us know if this helps!

    Have a nice day!

    Thread Starter ptrkx

    (@ptrkx)

    you guys are awesome ?? got it running with changing from string to number

    Thank you very much :))

    @ptrkx Great, we’re happy to hear it works properly now and we’re glad we could help!

    Have a great day!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Vertical Gridlines’ is closed to new replies.