Highcharts data selector

How to?
#1

I'm trying to extract data from a Highcharts line chart but I'm getting nothing in the data preview.

This selector visually looks like it's selecting the whole path but returns no data:
path.highcharts-color-0

This is an example of the line of source code for each point:

But I need help to access the data inside the d="...." bit.

My chart is password protected but this example chart is the same as mine:
https://www.highcharts.com/demo/line-ajax

Sitemap:
{"_id":"sharesight","startUrl":["https://portfolio.sharesight.com/portfolios/371630?consolidated=false"],"selectors":[{"id":"holding_name","type":"SelectorLink","selector":"span.holding-name a","parentSelectors":["_root"],"multiple":true,"delay":0},{"id":"code","type":"SelectorText","selector":"h4.subheadline span.holding-code","parentSelectors":["holding_name"],"multiple":false,"regex":"","delay":0},{"id":"name","type":"SelectorText","selector":"div.inception-header h1","parentSelectors":["holding_name"],"multiple":false,"regex":"","delay":0},{"id":"Xvalues","type":"SelectorText","selector":"path.highcharts-color-0","parentSelectors":["holding_name"],"multiple":true,"regex":"","delay":0}]}

#2

I'm still struggling with Highcharts.

Can someone tell me if a selector is even capable of doing this or is it impossible?

Thanks

#3

Success.

Getting data by defining the following:

Type: Element selector
Attribute name:

But it's raw xy coordinates. I really want the tooltip data, but that seems impossible.

Here's a sitemap that might help others looking into highcharts scraping.

{"_id":"sharesight","startUrl":["https://portfolio.sharesight.com/portfolios/371630?consolidated=false"],"selectors":[{"id":"holding_name","type":"SelectorLink","selector":"span.holding-name a","parentSelectors":["_root"],"multiple":true,"delay":0},{"id":"code","type":"SelectorText","selector":"h4.subheadline span.holding-code","parentSelectors":["holding_name"],"multiple":false,"regex":"","delay":0},{"id":"name","type":"SelectorText","selector":"div.inception-header h1","parentSelectors":["holding_name"],"multiple":false,"regex":"","delay":0},{"id":"Data","type":"SelectorElementAttribute","selector":"path.highcharts-color-0","parentSelectors":["holding_name"],"multiple":true,"extractAttribute":"d","delay":0}]}

#4

Extracting data from this kind of chart wont be effective. The chart is an SVG vector image that is build from different vector/line elements.

Because the chart is generated you can probably find the source data that is passed the library. There are two ways how the data could be loaded in the chart:

  1. The data is embedded in page source. Press CTRL+U to inspect page source.
    a) The data is in a tag. Use HTML selector to scrape the tag. You probably will need to write a custom CSS selector but you can start with script as the css selector for the HTML selector.
    b) The data is in an elements attribute. Use element attribute selector.
  2. The data is loaded dynamically
    a) Press CTRL+U to inspect page source. Try to find a data link in the source. It could be stored in a tag or in an elements attribute.
    b) You can the link by checking what assets are being loaded by the site. Open Network tab in developer tools and refresh the page. You will see how assets are being loaded. You can filter by XHR to narrow down the list.

In this case the data is loaded dynamically. You can find the url in page source and also in network tab.