zph
Posts: 2
Joined: Sun Oct 28, 2018 7:21 pm

Multiple CSV files - Single html page

Hi team,

I would like to generate on the fly the javascript used to display highcharts on a single HTML page.

The main idea is to get a dynamic render of all csv file in a single directory with highcharts.

Actually, I'm using the following code:

Code: Select all

<script type="text/javascript">
		$(document).ready(function() {
			$.get('export_xxxx.csv', function(csv) {
				$('#xxx').highcharts({
					data: {
						csv: csv
					},
					title: {
						text: 'Twitter (@xxxxx)'
					},
					yAxis: {
						allowDecimals: false,
						title: {
							text: 'Users'
						}
					},
					series: [{
						visible: true
					}, {
						visible: false
					}],
					plotOptions: {
						line: {
							dataLabels: {
								enabled: true
		}
		}
		},
				});
			});
		});
		
		$(document).ready(function() {
			$.get('export_xxxxyy.csv', function(csv) {
				$('#xxx').highcharts({
					data: {
						csv: csv
					},
					title: {
						text: 'Twitter (@xxxx)'
					},
					yAxis: {
						allowDecimals: false,
						title: {
							text: 'Users'
						}
					},
					series: [{
						visible: true
					}, {
						visible: false
					}],
					plotOptions: {
						line: {
							dataLabels: {
								enabled: true
		}
		}
		},
				});
			});
		});
		
		$(document).ready(function() {
			$.get('export_xxx_.csv', function(csv) {
				$('#xxx').highcharts({
					data: {
						csv: csv
					},
					title: {
						text: 'Twitter (@xxx)'
					},
					yAxis: {
						allowDecimals: false,
						title: {
							text: 'Users'
						}
					},
					series: [{
						visible: true
					}, {
						visible: false
					}],
					plotOptions: {
						line: {
							dataLabels: {
								enabled: true
		}
		}
		},
				});
			});
		});
		</script>
The idea is to generate this javascript on the fly and to use all CSV file in the current directory and not add a code block for each of CSV file. (for each csv... in ... )

Thanks for your help,
zph
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Multiple CSV files - Single html page

Hi, zph!

Could you explain one more time, what exactly do you want to achieve? You want to display 3 charts on the same page or just one chart and change charts that are displayed dynamically?

Kind regards
Rafal Sebestjanski,
Highcharts Team Lead
zph
Posts: 2
Joined: Sun Oct 28, 2018 7:21 pm

Re: Multiple CSV files - Single html page

Hi,

In my website, I've currently 3 csv, that are rendered by highcharts with 3 "$(document).ready(function() {" in a script markup.

and 3 "<div id="xxx" style="width: 49%; height: 400px; margin: 0 auto;float:left;"></div>" markup. (Its like a dashboard).

My wish is to craft an HTML page with javascript of highcharts, to handle as many as csv there is in the folder.

For example, if I put 10 csv files, the generic HTML file will display 10 different charts on the same page, without editing manually the HTML page.

Thanks for your help,
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Multiple CSV files - Single html page

zph,

Your requirement is not really related to Highcharts. You know how to create a chart and you know how to feed it with csv data. What you are asking about is rather a JavaScript question regarding your project/website structure. I recommend you to look for a help on Stack Overflow or another more general forum.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Usage”