How to set custom labels on the y axis

Question

I use the Google chart API (not the Google chart) to create a line chart with dates on the x-axis (bottom) and numbers on the y-axis (left). I want to add the r axis (right) with string labels.

If I understand the next page correctly, this is only possible for have lines on the main axis (x axis for the line chart). Only small axes (y and r axes) accept continuous values ​​(for example, numbers), and not discrete values ​​(for example, strings).

Axis settings

In Google graphics, you can get around this by assigning string data to a value (for example, from 0 to 100) and assign arbitrary string labels to the axis using the chxl parameter. This is especially useful if the data is evenly distributed.

I looked at the API link, but cannot find anything like this when using the Google chart API.

Does anyone know if this is possible?

Regards, JP

Answer 1

The simplest approach for everyone is to add the following chart parameters:

vAxis: { ticks: [{ v: 0, f: 'Zero'}, {v: 1, f: 'One'}, {v: 2, f: 'Two'}]} 

In this example, I indicate that instead of zero, "One" instead of 1, etc. should display "Zero".

Answer 2

One way to HACK to achieve this.

As you know, Google Chart uses SVG to draw diagrams. So, after drawing the diagram, SVG elements are inserted into the HTML DOM. So, using jQuery, you can recognize the vAxis label element and change its text.

For example, in my case, my vAxis values ​​have values ​​like [0, 1, 2, 3, 4]. I want to change it to ["IDLE", "PCH", "FACH", "DCH", ""] instead of a number.

I based an SVG element for the vAxis label DOM structure using my browser web element validation tool.

So, I added the code as shown below after the graph.

 $('#busy_rrclogs svg text[text-anchor="end"]:contains("0")').text("IDLE"); $('#busy_rrclogs svg text[text-anchor="end"]:contains("1")').text("PCH"); $('#busy_rrclogs svg text[text-anchor="end"]:contains("2")').text("FACH"); $('#busy_rrclogs svg text[text-anchor="end"]:contains("3")').text("DCH"); $('#busy_rrclogs svg text[text-anchor="end"]:contains("4")').text(""); 

I added my graph to the HTML div element below, as you can see from the jQuery selector above.

 <div id="busy_rrclogs"> </div> 

He can solve my problems, although it's kind of a hack.

Answer 3

This hack works until Google changes the api in the future. It also works until you use the experimental "explorer" option. If you use scaling, then the chart is re-displayed on each mouse event and your values ​​disappear. It is very sad that the api diagram does not subject to scaling or re-mapping of events. There is only a “ready-made” event that fires only once after drawing a graph. Also, I noticed that I can’t expect yAxis values ​​to be displayed when I provided their api. If the api decides that these lines are too long, it displays only the substring using the tooltip.

So, there is only one clumsy and one real workaround that I could come up with. I left awkward because it matches previous posts

 var chartDiv = document.getElementById ("chart"); chartDiv .addEventListener ("mousewheel", ProcessChart, false); //take care of "mousewheel" event browser compatibility!!! function ProcessChart() { setTimeout(function() { $("#chart svg text[text-anchor='end']:contains('$C$')").each(function() { var $this = $(this); var val = parseInt($this.text()); var label = GetCommunicationLabel(val); $this.text(label); }); }, 20); } 

Note that I used the setTimeout function to handle shortcuts. The chart is also displayed on the mousewheel event and without delay you are trying to process tags that do not yet exist. 20 milliseconds is just an experimental value, and it depends on how long your graph will be re-displayed on the mouse event. Unfortunately, the user may detect blinking when replacing old values.

Finally, I found a real solution.

 vAxes: { 0: { format: '#%', ticks: [0, 0.25, 0.5, 0.75, 1] //minValue: 0, //maxValue: 1, //title: batteryText, }, 1: { ticks: [ { v: 0, f: GetCommunicationLabel(0) }, { v: 1, f: GetCommunicationLabel(1) }, { v: 2, f: GetCommunicationLabel(2) }, { v: 3, f: GetCommunicationLabel(3) }, { v: 4, f: GetCommunicationLabel(4) }], // format: "#", textPosition: 'out' //minValue: 0, //maxValue: 3, //title: communicationText, } },