Strategies for managing unpredictable time series data visualization

I am currently working on graphing data retrieved from an API. You can find a sample of the data here.

[
    {
        "id": 10516560,
        "username": "acrawford69",
        "avatar_url": "https://a.ppy.sh/10516560?1661994504.png",
        "country_code": "US",
        "country": {
            "code": "US",
            "name": "United States"
        },
        "cover_url": "https://assets.ppy.sh/user-profile-covers/10516560/a48a1388412e00cb53f63a18c988460f3a823bc59abfbca57dc0f3178518f828.jpeg",
        "playstyle": [
            "keyboard",
            "tablet"
        ],
        "stats": [
            {
                "count300": 125059,
                "count100": 26906,
                "count50": 5572,
                "playcount": 1492,
                "ranked_score": "103758885",
                "total_score": "351690963",
                "pp_rank": 483837,
                "level": 37.7535,
                "pp_raw": 376.591,
                "accuracy": 90.7366943359375,
                "count_rank_ss": 2,
                "count_rank_s": 40,
                "count_rank_a": 60,
                "timestamp": "2018-01-01T14:05:19Z"
            },
            // more stats here
        ]
    },
    // more users here

While I can successfully plot the graph, I am facing difficulty in configuring the tooltip. I would like the tooltip to display data for the closest point, even if it is far away. An example of what I am aiming for can be found here. I am open to switching chart libraries, as I am currently using echarts.

I have attempted to create a custom tooltip function that searches for the closest value on each line and displays it, but unfortunately, I have not been successful in getting it to work at all.

javascripttypescriptchartsstatisticsecharts

Answer №1

Here's a small example showcasing the implementation in echarts. You may need to tweak some details depending on how your data is structured. At present, the code considers the nearest x-value as the closest point and the formatting is basic, but you can build upon it.

Code:

option = {
  xAxis: {},
  yAxis: {},
  tooltip: {
    formatter: getNearest,
  },
  series: [
    {
      data: [[0,820], [1,932], [3,901], [5,934], [7,1290], [9,1330], [12,1320]],
      type: 'line',
      smooth: true
    },
    {
      data: [[0,367], [2,790], [4,905], [6,409], [8,1290], [10,1330], [12,504]],
      type: 'line',
      smooth: true
    }
  ]
};

function getNearest(params) {
  const seriesIndex = params.seriesIndex;
  const xValue = params.value[0];
  let curOption = myChart.getOption();
  let result = "<div>" + params.value[0] + " " + params.value[1] + "</div>";
  
  for (let index in curOption.series) {
    if (index == seriesIndex) {
      continue;
    }
    
    const series = curOption.series[index];
    let nearestX = Infinity;
    let nearestY;
    for (let datapoint of series.data) {
      if (Math.abs(datapoint[0] - xValue) <= Math.abs(nearestX - xValue)) {
        nearestX = datapoint[0];
        nearestY = datapoint[1];
      }
    }
    result += "<div>" + nearestX + " " + nearestY + "</div>"
  }
  
  return result;
}

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

If a div element includes a specific text, then update that portion of the text without altering the value of any variables

Need help removing text without affecting variables Attempting to translate a specific line with JQuery Looking to change text only, leaving the content within the strong tag intact $('.content-box__row div:nth-child(3)').text('') ...

javascriptjquery

Is it possible to capture a submit event from a form within an iframe using jQuery or JavaScript

If I have a webpage with an embedded iframe containing a form, how can I update a hidden field value on the main page once the form is submitted? What is the best way to trigger an event in the parent page upon form submission? Here's a simplified ex ...

javascriptjquery

Angular date selection with a range of plus two days, factoring in the exclusion of weekends

I am currently using a mat date picker range with specific logic. The minimum date that a user can select on the calendar is set to + 2 days. For example, if today's date is July 20, 2022, the minimum selectable date would be July 22, 2022. However, ...

javascriptangulartypescript

Invoke a method within a function triggered by the .call() method

Currently, I am developing an n8n node that essentially functions every time a specific event occurs. To facilitate this process, I have created an abstract class which is invoked by the n8n environment. However, there seems to be a limitation in calling ...

typescriptn8n

Issue with method assignment in extending Array class in Typescript

Currently, I am utilizing Typescript and Vue in my workflow, although the specific framework is not a major concern for me. I have been attempting to expand Array functionality in the following manner: class AudioArray extends Array<[number, number]&g ...

typescriptvue.js

Can someone please explain the result of console.log(error) and how can I convert it into a string?

Within a Node.js project that utilizes Typescript and is aimed at ES2020 compatibility, I have implemented a custom Error class in the following manner: class InvalidParamsError extends Error { } try { throw new InvalidParamsError(); } catch (error) { ...

javascriptnode.jstypescripterror-handlingconsole.log

Setting the default <a-sky> in Aframe: A step-by-step guide

There was a fascinating projection I witnessed where two images were displayed in the sky. [https://codepen.io/captDaylight/full/PNaVmR/][code] Upon opening it, you are greeted with two spheres and a default white background. As you move your cursor over ...

javascripthtmlvirtual-realityaframewebvr

Steps to Export Several Fusion Charts into Individual Image Files

My webpage contains multiple charts created using the Fusion Chart library. There are three different charts on the page, and I want to export each chart as a separate PNG file. However, when I click the export button, it generates separate images of the ...

javascriptjqueryangularfusioncharts

Condition-triggered Jquery Sticky navigation dynamically enables scrolling functionality

After successfully implementing a sticky navigation that works flawlessly, I am now looking to make it activate only when the browser width is less than or equal to 770px. This is my current code: $j = jQuery.noConflict(); $j(document).ready(function() ...

javascriptjqueryhtmlcss

Alignment issue with procedural plane vertices in threeJS

In my project, I am utilizing threeJS along with a Simplex noise algorithm to create a tile system consisting of 50x50 planes. Currently, I am iterating through x+y and adding each plane. The Simplex noise algorithm is then used to calculate the z position ...

javascriptthree.jsverticesprocedural-generationsimplex-noise

Enhancing PHP function speed through pre-compilation with Ajax

I am curious about compiling server side functions in PHP with Ajax, specifically when multiple asynchronous calls are made to the same server side script. Let's consider a PHP script called "msg.php": <?php function msg(){ $list1 = "hello world ...

javascriptphpjqueryajax

The inconsistency of Selenium's StaleElementReferenceException error and the variability of pageload completion codes is causing issues with clicking on elements

Big shoutout to the amazing stackoverflow community for always providing assistance. Lately, I've been grappling with the frustrating "StaleElementReferenceException" issue and haven't found a universal solution yet. Some helpful members have rec ...

javascriptjavajqueryhtmlselenium

what is preventing me from receiving the props effectively

It's important to note that this question is specifically related to next.js. Understanding Next.js is crucial for grasping the interaction between the getStaticProps and Home functions as shown in the code snippet below. export async function getStat ...

javascriptnext.jsjsx

Is there a way to quickly send information to this page using $_POST without the need to physically submit a form to it?

I currently have this code snippet: $.ajax({ type:'GET', url: 'save_desc.php?scrapbook_name=<?php print(addslashes($scrapbook_name)); ?>', success: function(data){ $("#" + id + "below").html(data); } }); How ...

phpjavascriptajaxget

Bug in timezone calculation on Internet Explorer 11

I've spent hours researching the issue but haven't been able to find any effective workarounds or solutions. In our Angular 7+ application, we are using a timezone interceptor that is defined as follows: import { HttpInterceptor, HttpRequest, H ...

javascriptangulartypescripttimezoneinternet-explorer-11

Ember.js: Storing function prototypes as objects

My interface consists of four vertical panels: The first panel displays the menu for selecting data The second panel allows you to choose a filter from a list The third panel shows the results based on the selected filter The fourth panel displays detail ...

javascriptember.jsnested-routes

Automatically fill in an input field with jQuery by using the value from another input field

I am currently working on a loan calculator and am trying to find a way to automatically populate an interest rate field based on the loan amount entered. Here is an example scenario: For amounts ranging from 0 to 100,000, the interest rate is 4.50 For ...

javascriptjquery

What strategies can be utilized to address the absence of an element in an array iteration that is currently ongoing?

Currently, I am looping through an array of strings using forEach() method to check if each element's length is even or odd. If the length is even, I am removing it using splice(). Although my conditions seem correct, when I look at the input and out ...

javascriptarraysloops

Using React Native to create a concise text component that fits perfectly within a flexbox with a

Within a row, there are two views with flex: 1 containing text. <View style={{ flexDirection: "row", padding: 5 }}> <View style={{ flex: 1 }}> <Text>Just a reallyyyyyyyy longgggg text</Text> </View> ...

javascriptcssreactjsreact-native

What is the best way to transfer GitHub OAuth information to a client?

I am in the process of implementing Github authorization and then sending received JSON data to the client. After doing some research, I came across a helpful tutorial at The tutorial suggests following this path: "/" -> "/login" -> "/redirect" -&g ...

javascriptnode.jsapiexpressgithub-api