Dynamic Swap Y-Axis Values in same Scatter Chart

47 views
Skip to first unread message

Kenton Jones

unread,
Mar 30, 2023, 3:18:45 PM3/30/23
to Google Visualization API
I have a google scatter chart up and running.
Chart shows a standard x-axis value and y-axis value.

I'm thinking of adding a feature where
user can click a button anCan you advise on general approach
to add a button when clicked the chart will update
from X date Y value to X date Y percent?
(and I could update new y axis options)

Thx

Ray Thomas

unread,
Mar 31, 2023, 3:10:08 PM3/31/23
to Google Visualization API
This is fairly easy to do, but you are going to have to change the type of chart you are drawing. This is because scatter charts do not support the isStacked option which allows you to use the percent stacked display. It's just not in the list of scatter chart options - https://developers.google.com/chart/interactive/docs/gallery/scatterchart#configuration-options as it is in things like the column charts - https://developers.google.com/chart/interactive/docs/gallery/columnchart#configuration-options. I also tried it on some of my own charts and it does not work. 

I suppose you could calculate the points yourself and draw that data, but it is probably easier to reconsider the type of chart you are drawing.

What you need is something like a button, dropdown or something similar to let the users switch between what they want to see. You can use the onChange event of the switch to signal the code to redraw the chart with the new values.

Here's a dropdown I used to choose between a normal, stacked and percent column chart:

<select id="chooseChart" onchange="studentSex.redrawChart()">
  <option value="Column">Column</option>
  <option value="Stacked">Stacked</option>
  <option value="Percent">Percent</option>
</select>

and here's the function I used to redraw the chart:

function redrawChart(){
var chartType = document.getElementById("chooseChart").value;
var optionVar = false;
if (chartType == "Stacked") {optionVar = true}
if (chartType == "Percent") {optionVar = 'percent'}
var options = {isStacked: optionVar};

var chart = new google.visualization.ColumnChart(document.getElementById('studentData_div'));

        chart.draw(studentData, options);
}

You can see a working example along with the full script of this on https://brisray.com/google-charts/multiple.htm

The page also shows how to change between different types of chart, I used a column and bar chart in my example. There's no reason you can't combine both the type of chart and whether it is stacked ot not in one go.

Kenton Jones

unread,
Apr 3, 2023, 9:11:54 PM4/3/23
to google-visua...@googlegroups.com
Thank you, that seems like what I'm after in terms of pull down selector.  My data table has x values and several y values already in there, and I want to swap out y values to make a "new" scatter chart.

--
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/f4SbYQnN3sE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/a3bb9374-3809-41c9-a555-62b77c60fd57n%40googlegroups.com.

Ray Thomas

unread,
Apr 4, 2023, 8:59:13 PM4/4/23
to Google Visualization API
If you have all the values in your data already, what you could do is create a dataview from that - see https://developers.google.com/chart/interactive/docs/reference#dataview-class and then use  example: view.setColumns([0,1,3])  tos et the columns to be shown. see https://developers.google.com/chart/interactive/docs/reference#DataView_setColumns

The column numbers to be shown can be controlled via a dropdown or buttons as before. There's an example at http://jsfiddle.net/katalin_2003/3rzv7pvz/

Reply all
Reply to author
Forward
0 new messages