Enhance your google charts with easy updates through mouseover interaction

I am currently utilizing Google charts to dynamically display some data.

My goal is to have two separate charts shown. The first chart will display f(x) vs. x, while the second chart will display g(x,y) vs. y (with a fixed x value). When hovering over a data point on the first chart, I would like the second chart to update and plot g(x,y) vs. y based on the selected x value.

For instance, if "1" was hovered over on the first chart, the second chart should refresh and draw g(1,y) vs. y.

Thus far, I have only managed to achieve this by manually binding the mouseover event using JavaScript and triggering a complete redraw of the second chart (by clearing its data and replacing it with new data corresponding to the x value that was hovered over). However, I am aware that there is an existing mechanism that allows for redrawing the chart using values from controls (such as sliders, see example here).

Does anyone happen to know if there is a way to link these two charts together so that the mouseover event can be utilized to update one chart with new parameters?

javascriptgoogle-visualization

Answer №1

Check out the Programmatic Control Changes example. You have the option to adjust the slider's lower and upper bounds using code:

document.getElementById('rangeButton').onclick = function() {
  slider.setState({'lowValue': 2, 'highValue': 5});
  slider.draw();
};

If you select a lowValue and highValue of both 5, only rows with that specific value in the designated column will be displayed. Include this in your onmouseover event of the first chart:

google.visualization.events.addListener(chart1, 'onmouseover', function (e) {
    // access x value of current row from data table
    var xValue = data.getValue(e.row, 0);
    // set new slider bounds
    slider.setState({'lowValue': xValue, 'highValue': xValue});
    // update slider (and chart2)
    slider.draw();
  }
);

To make the slider hidden when not needed:

// hide the slider created with 'containerId': 'control'
document.getElementById("control").style.display = "none";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The search bar fails to display all pertinent results when only a single letter is inputted

How can I create a search functionality that displays array object names based on the number of letters entered? When I input one letter, only one result shows up on the HTML page, even though the console.log displays several results. The desired output is ...

javascripthtmlarraysobjectdom

Troubleshooting angular radio input display issue caused by controller updates

When the page loads, my AngularJS controller.js initializes the scope model by fetching data from an AJAX response: services.InitializePage().then(function (response) { $scope.DataModel = response.data; Shortly after that, the model undergoes ...

javascriptangularjs

Sending a request to a server from my local machine is resulting in a preflight request for 'Access-Control-Allow-Origin'

Encountered complete error: Error message - XMLHttpRequest cannot load . The response to the preflight request does not pass the access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' ...

javascriptangularjsnode.jsexpress

Maximizing the potential of browser navigation within a vue.js application

I'm currently working on an app with multiple dropdown components that affect the state of a main datatable based on selected parameters. It's cool how everything ties together. Now, I want to enhance user experience by allowing them to share UR ...

javascriptvue.jsstate

Ways to display or conceal dual views within a single Marionette js region

In my LayoutView, I have set up two regions: the filter region and the main region (Content Region). The main region displays a view based on the selection made in the filter region. Currently, I have a view for the main region called Current Year view. H ...

javascriptbackbone.jsmarionette

The state initialization process is beginning with an [object Object] being passed into the setState function

Within the async function provided below, I am invoking stationData to verify that an array of objects is being passed into bartData (which currently consists of an empty array). Upon exploration, I have observed a response containing the anticipated array ...

javascriptreactjs

Arranging radio input options in alphabetical order

My attempts to alphabetically sort these items are not working as expected. Could you help me identify why it's not functioning correctly? You can check out my jsFiddle example by following this link. handleAlphaOrder = fun ...

javascriptjquery

Issue with Value Update in Angular 7 Reactive Forms

I am encountering an issue where the data in my formgroup does not update upon submission. The formgroup successfully retrieves values from an API, but when attempting to update and return the value, it remains unchanged. I am unsure of what mistake I may ...

javascriptangulartypescriptangular7angular-reactive-forms

The npm run dev command is not functioning properly within the HackerNews example on Vue.js

I attempted to launch the vue-hackernews-2.0 demo from the vuejs' github repository The setup section provides instructions on how to set up the project: # install dependencies npm install # or yarn # run in dev mode, with hot reload at localhost:8 ...

javascriptnode.jsnpmwebpackvue.js

iOS devices will not scroll horizontally if there is a div that scrolls vertically within a div that scrolls horizontally

Picture a div that scrolls horizontally, housing two vertical-scrolling divs. You'll need to scroll left and right to navigate, then up and down inside the inner divs to read the content. /* RESET TO MINIMUM */ body, html { height: 100%; mar ...

javascripthtmlioscss

I am encountering an issue with the appendChild() method when trying to create a new element using createElement("ul")

I am facing an issue with creating a UL and LI elements beneath the P tag. Would appreciate it if someone could review my code below. The javascript is showing the following error message: Uncaught TypeError: thisIsQuizContainer.appendChild is not a fu ...

javascripthtml

Generating a two-dimensional array and setting its values in JavaScript

I need assistance with creating and initializing a two-dimensional array in JavaScript within an AngularJS application. My current approach is as follows: $scope.invalidVote = []; for (var i = 0; i < $scope.arry1.length; i += 1) { $scope.answersCou ...

javascriptarraysangularjs

Attempting to deactivate the bootstrap-fullscreen-select feature using JavaScript

Currently, I am in the process of developing a Python Flask server to manage a project that I have undertaken. While exploring different options, I came across bootstrap-fullscreen-select which turned out to be exactly what I needed for my control page. H ...

javascripthtml

Comparing nestableSortable with the Nestable JavaScript library

I am in the process of developing a navigation menu editor that consists of multiple nested, sortable forms. My goal is to submit all the form data in one comprehensive JSON data blob. After researching, I have narrowed down my options to two libraries: n ...

javascriptjqueryjsonnested-formsmptt

Check domains using Jquery, AJAX, and PHP

I'm currently developing a tool to check domain availability. Here is the PHP code I have so far: <?php $domain = $_GET["domname"]; function get_data($url) { $ch = curl_init(); $timeout = 5; curl_setopt($ch, CURLOPT_URL, $url); ...

javascriptphpjqueryajaxjson

Unable to retrieve all AJAX responses during page loading in Puppeteer

When loading the URL here, I notice around four AJAX calls in the network tab. However, when using Puppeteer to scrape the data, only one response URL from an AJAX call is being logged: I have attempted the following code: async function main() { try { ...

javascriptnode.jspuppeteer

Exploring the power of JavaScript template literals within the Document Object Model

I am curious as to why this particular template literal is not functioning correctly when I try to implement it using JavaScript DOM for styling CSS. Any assistance in helping me understand this issue would be greatly appreciated! let weatherColors = [& ...

javascript

The React JS textarea's onchange event is not functioning properly when trying to set the value

This is a class component I created for an auto-suggest text area similar to Twitter's feature. import React, { Component, createRef } from 'react'; import { TextArea, List, Triangle } from './Styled'; import ge ...

javascripthtmlreactjs

Issue: subscribe function is not definedDescription: There seems to be an

I'm currently trying to retrieve a value from an array based on a specific element, and then finding the exact matching element. Unfortunately, I've encountered an error with this.getProduct(name1: string) function even though I have already impo ...

javascriptangularangular4-httpclient

The setting for the background color of the chart area in chartjs appears to be ineffective

Why can't I color the chart area of my line graph using this code? options={{ maintainAspectRatio: false, title: { display: true, fontSize: 20 }, chartArea: { backgroundColor: ...

javascriptreactjschart.jsreact-chartjsreact-chartjs-2