cnighswonger
Posts: 60
Joined: Fri Dec 07, 2012 1:28 pm

Multiple Series Chart using addSeries and csvURL

It is possible to add multiple series to a chart using csvURL as the data source?

Here is an example in which an initial series is created with the chart and another added using addSeries, but it does not seem to work properly:

https://jsfiddle.net/tsyvp9dL/13/

Kind Regards,
Chris
cnighswonger
Posts: 60
Joined: Fri Dec 07, 2012 1:28 pm

Re: Multiple Series Chart using addSeries and csvURL

Sorry for so many replies to my own post...

Using this syntax:

Code: Select all

    data: {
        csvURL: 'https://www.w4fbc.org/NF_door_state_subset.csv',
    }

Works; however, using this syntax does not:

Code: Select all

  series: [{
    id: 'subsetA',
    name: 'subset_a',
    data: {
      csvURL: 'https://www.w4fbc.org/NF_door_state_subset.csv',
    },
    color: '#0000ff',
    lineWidth: 2,
  }]

Even if we eliminate the code to addSeries it still does not work.

Am I misunderstanding the syntax here?
cnighswonger
Posts: 60
Joined: Fri Dec 07, 2012 1:28 pm

Re: Multiple Series Chart using addSeries and csvURL

Comparing the docs, I am suspecting that it is not possible to have multiple CSV series on a single chart.

See:
The Data module provides a simplified interface for adding data to a chart from sources like CVS, HTML tables or grid views. See also the tutorial article on the Data module.

It requires the modules/data.js file to be loaded.

Please note that the default way of adding data in Highcharts, without the need of a module, is through the series.type.data option.

That latter statement seems to imply that the two methods are distinct rather than the Data module being a derivative of the typical series methods.
cnighswonger
Posts: 60
Joined: Fri Dec 07, 2012 1:28 pm

Re: Multiple Series Chart using addSeries and csvURL

Watching the local console when running this fiddle, we can see that the second series is created when addSeries is called, but there is never a request sent to to csvURL to retrieve the csv data.

Since csvURL is not listed as a possible data source under series.type.data (see here), it follows that csvURL is not available when calling addSeries.

If true, this is somewhat disappointing as it would seem that csvURL should be an extension of the core series object rather than being independent and unique.

I may still be misunderstanding something here though, so feel free to correct me.

My end purpose is to be able to overlay a series on an existing chart based on a viewer supplied csv file. I can certainly whip up some JS to convert the csv to one of the forms supported by series.type.data, but it would be nicer to be able to just use what is provided in the data module.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Multiple Series Chart using addSeries and csvURL

Hi cnighswonger,

Thanks for contacting us with your question.

Yes, it is possible to add multipple series using csv. Here is an example:
https://jsfiddle.net/gh/get/library/pur ... /data/csv/
The data is hardcoded, it doesn't come from an url, but it doesn't matter. All you need is a properly formatted single csv file with multiple series' data.

As you have already noticed, your data have to fit format specified in series.type.data, and because of that you can't pass csvURL directly. Same rule appllies to addSeries method. However, in cases where you need to use more than one CSV file, you can parse it yourself so that it fits format specified in series API and then either pass it directly to series object or use addSeries.

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer
cnighswonger
Posts: 60
Joined: Fri Dec 07, 2012 1:28 pm

Re: Multiple Series Chart using addSeries and csvURL

mateusz.b,

Thanks again for your kind help.

I realized that the csv data may be hardcoded into the chart. However, that is very impractical when one has 10k+ lines of data. And that data changes dynamically over time.

I would imagine it is a trivial enhancement to extend the series object to incorporate the csvURL method given that the hard work has been done in the data module. I will submit it as an enhancement request.

Kind regards,
Chris
cnighswonger
Posts: 60
Joined: Fri Dec 07, 2012 1:28 pm

Re: Multiple Series Chart using addSeries and csvURL

Enhancement req filed for anyone else interested in this.

https://github.com/highcharts/highcharts/issues/16911
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Multiple Series Chart using addSeries and csvURL

Hi cnighswonger,

Thanks a lot for creating this ticket and its detailed description. It is really helpful. I personally think that such feature is a really good idea

If there is anything else I could help you with, feel free to ask.
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”