davins90
Posts: 9
Joined: Mon Sep 12, 2016 2:41 pm

Visualize time data on the specific scatter plot point

Hello all,

i would like to plot a scatter plot between 2 time series by using highcharts cloud. I also would like to visualize in the tooltip the data (like 24/03/2017) in order to see at each point, not only the value of the 2 time series, but also the data of the time series' values. Someone could help me please?

Daniele
stpoa

Re: Visualize data on a scatter plot

Hi,

Could you specify how your input data looks like? Are x values timestamp numbers or dates in string format?

Regards.
davins90
Posts: 9
Joined: Mon Sep 12, 2016 2:41 pm

Re: Visualize time data on the specific scatter plot point

Hi!

my 2 time series are simply time series of 2 different stock like this:

Date stock A stock B
21/1/01 10 15
21/2/01 12 10
....................................

Something like this.

I would like to make the scatter plot of this 2 time series' stock, and, if it's possible, to see in the tooltip not only the value of stock A and B but also the date.

Thanks very much
stpoa

Re: Visualize time data on the specific scatter plot point

Hi,

Just paste your data in format below:

Code: Select all

Date, stock A,stock B
2021/1/01,10,15
2021/2/01,12,10
Examples:
https://jsfiddle.net/kb2ary7y/
http://cloud.highcharts.com/show/aguvama

Regards.
davins90
Posts: 9
Joined: Mon Sep 12, 2016 2:41 pm

Re: Visualize time data on the specific scatter plot point

is this working also for scatter plot?
thanks
stpoa

Re: Visualize time data on the specific scatter plot point

Yes,

Just change your chart.type to 'scatter'

Live example:
https://jsfiddle.net/7kzhdtn6/

Regards.
davins90
Posts: 9
Joined: Mon Sep 12, 2016 2:41 pm

Re: Visualize time data on the specific scatter plot point

i attached now, how is now my scatter plot. I would like to see, if i move the mouse on one of the blue point, i see the x and y value and i want to see the date of every point.

thanks for the availability
Attachments
a.png
a.png (38 KiB) Viewed 5339 times
stpoa

Re: Visualize time data on the specific scatter plot point

For displaying multiple points in your scatter tooltip you can use tooltip formatter in order to return custom tooltip, because shared tooltip does not work with this type of series.

Live example:
https://jsfiddle.net/3eoe36nw/

Regards.
davins90
Posts: 9
Joined: Mon Sep 12, 2016 2:41 pm

Re: Visualize time data on the specific scatter plot point

thanks for your precious help.
But for my scatter plot i need that the stock A need to be on the x-axis and stock B on the y-axis (both have the same datatime). Is it possible?
On the y axis i would like to have the stock A and on the x axes the stock b. In this way the tooltip for every point show me the coordinates ( the x and y stock price ) and the datatime.
thanks
stpoa

Re: Visualize time data on the specific scatter plot point

Hi,

If you want your date to be visible only in tooltip, and assign xAxis to one value and yAxis to second one you can use seriesMapping in data module and tooltip formatter for displaying your data in tooltip.

Code: Select all

const csv = `Date,stock A,stock B
2021/1/01,10,15
2021/2/01,12,10`

const options = {
	xAxis: {
  	type: 'linear'
  },
	chart: { type: 'scatter' },
	tooltip: {
  	useHTML: true,
  	formatter () {
    	const chart = this.series.chart
      const series = chart.series
      const seriesText = `Stock A: ${this.x}<br>Stcok B: ${this.y}`
      const dateText = 'Date: ' + (new Date(this.point.date)).toISOString().slice(0, 10) + '<br>'
      return dateText + seriesText
    }
  },
  data: {
  	csv,
    seriesMapping: [{ x: 1, y: 2, name: 1, date: 0 }]
  },
}

const chart = Highcharts.chart('container', options)

Live example:
https://jsfiddle.net/3eoe36nw/

Regards.

Return to “Highcharts Cloud”