Not able to load local csv data into Highcharts
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I'm trying to create a Highchart from data stored in local csv file, but I'm just getting a "blank" chart in html. Csv file is in same place as html file.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Highcharts</title>
<script language="JavaScript" type="text/javascript" src="./code/jquery-3.3.1.min.js"></script>
<script language="JavaScript" type="text/javascript" src="./code/highcharts.js"></script>
<script language="JavaScript" type="text/javascript" src="./code/modules/data.js"></script>
<script language="JavaScript" type="text/javascript" src="./code/themes/gray.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:800px;"></div>
</body>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
xAxis: {
type: 'category'
},
data: {
// enablePolling: true,
csvURL: window.location.origin + 'test.csv',
itemDelimiter: ';',
lineDelimiter: 'n',
},
title: {
text: 'Fuel Consumption'
},
});
});
</script>
</html>
This is the content of my csv file:
DateTime;Value
09/06/2018 18:00:15;1296.26098632813
09/06/2018 18:28:09;1451.98901367188
09/06/2018 18:56:03;563.752014160156
09/06/2018 19:23:57;429.237213134766
09/06/2018 19:51:51;445.504516601563
09/06/2018 20:19:45;1216.92199707031
09/06/2018 20:47:39;1108.98400878906
09/06/2018 21:15:34;478.514709472656
09/06/2018 21:43:28;649.652221679688
09/06/2018 22:11:22;159.626998901367
09/06/2018 22:39:16;135.208999633789
Can anyone please help?
javascript csv highcharts
asked Aug 18 '18 at 9:41
user3434120user3434120
125
add a comment |
0
I'm trying to create a Highchart from data stored in local csv file, but I'm just getting a "blank" chart in html. Csv file is in same place as html file.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Highcharts</title>
<script language="JavaScript" type="text/javascript" src="./code/jquery-3.3.1.min.js"></script>
<script language="JavaScript" type="text/javascript" src="./code/highcharts.js"></script>
<script language="JavaScript" type="text/javascript" src="./code/modules/data.js"></script>
<script language="JavaScript" type="text/javascript" src="./code/themes/gray.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:800px;"></div>
</body>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
xAxis: {
type: 'category'
},
data: {
// enablePolling: true,
csvURL: window.location.origin + 'test.csv',
itemDelimiter: ';',
lineDelimiter: 'n',
},
title: {
text: 'Fuel Consumption'
},
});
});
</script>
</html>
This is the content of my csv file:
DateTime;Value
09/06/2018 18:00:15;1296.26098632813
09/06/2018 18:28:09;1451.98901367188
09/06/2018 18:56:03;563.752014160156
09/06/2018 19:23:57;429.237213134766
09/06/2018 19:51:51;445.504516601563
09/06/2018 20:19:45;1216.92199707031
09/06/2018 20:47:39;1108.98400878906
09/06/2018 21:15:34;478.514709472656
09/06/2018 21:43:28;649.652221679688
09/06/2018 22:11:22;159.626998901367
09/06/2018 22:39:16;135.208999633789
Can anyone please help?
javascript csv highcharts
asked Aug 18 '18 at 9:41
user3434120user3434120
125
I think you forgot the/inwindow.location.origin + '/test.csv'
– Core972
Aug 18 '18 at 12:32
No, it is not that @Core972
– user3434120
Aug 18 '18 at 14:08
So what does the console say?
– Halvor Holsten Strand
Aug 18 '18 at 14:54
@Halvor. It's working now. Had to put the whole "app" in a node.js web server. The console did not output anything. Now on to getting the range selector working...
– user3434120
Aug 18 '18 at 17:18
add a comment |
0
0
0
I'm trying to create a Highchart from data stored in local csv file, but I'm just getting a "blank" chart in html. Csv file is in same place as html file.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Highcharts</title>
<script language="JavaScript" type="text/javascript" src="./code/jquery-3.3.1.min.js"></script>
<script language="JavaScript" type="text/javascript" src="./code/highcharts.js"></script>
<script language="JavaScript" type="text/javascript" src="./code/modules/data.js"></script>
<script language="JavaScript" type="text/javascript" src="./code/themes/gray.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:800px;"></div>
</body>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
xAxis: {
type: 'category'
},
data: {
// enablePolling: true,
csvURL: window.location.origin + 'test.csv',
itemDelimiter: ';',
lineDelimiter: 'n',
},
title: {
text: 'Fuel Consumption'
},
});
});
</script>
</html>
This is the content of my csv file:
DateTime;Value
09/06/2018 18:00:15;1296.26098632813
09/06/2018 18:28:09;1451.98901367188
09/06/2018 18:56:03;563.752014160156
09/06/2018 19:23:57;429.237213134766
09/06/2018 19:51:51;445.504516601563
09/06/2018 20:19:45;1216.92199707031
09/06/2018 20:47:39;1108.98400878906
09/06/2018 21:15:34;478.514709472656
09/06/2018 21:43:28;649.652221679688
09/06/2018 22:11:22;159.626998901367
09/06/2018 22:39:16;135.208999633789
Can anyone please help?
javascript csv highcharts
asked Aug 18 '18 at 9:41
user3434120user3434120
125
I'm trying to create a Highchart from data stored in local csv file, but I'm just getting a "blank" chart in html. Csv file is in same place as html file.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Highcharts</title>
<script language="JavaScript" type="text/javascript" src="./code/jquery-3.3.1.min.js"></script>
<script language="JavaScript" type="text/javascript" src="./code/highcharts.js"></script>
<script language="JavaScript" type="text/javascript" src="./code/modules/data.js"></script>
<script language="JavaScript" type="text/javascript" src="./code/themes/gray.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:800px;"></div>
</body>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
xAxis: {
type: 'category'
},
data: {
// enablePolling: true,
csvURL: window.location.origin + 'test.csv',
itemDelimiter: ';',
lineDelimiter: 'n',
},
title: {
text: 'Fuel Consumption'
},
});
});
</script>
</html>
This is the content of my csv file:
DateTime;Value
09/06/2018 18:00:15;1296.26098632813
09/06/2018 18:28:09;1451.98901367188
09/06/2018 18:56:03;563.752014160156
09/06/2018 19:23:57;429.237213134766
09/06/2018 19:51:51;445.504516601563
09/06/2018 20:19:45;1216.92199707031
09/06/2018 20:47:39;1108.98400878906
09/06/2018 21:15:34;478.514709472656
09/06/2018 21:43:28;649.652221679688
09/06/2018 22:11:22;159.626998901367
09/06/2018 22:39:16;135.208999633789
Can anyone please help?
javascript csv highcharts
javascript csv highcharts
asked Aug 18 '18 at 9:41
user3434120user3434120
125
asked Aug 18 '18 at 9:41
user3434120user3434120
125
asked Aug 18 '18 at 9:41
user3434120user3434120
125
asked Aug 18 '18 at 9:41
user3434120user3434120
125
asked Aug 18 '18 at 9:41
user3434120user3434120
125
125
I think you forgot the/inwindow.location.origin + '/test.csv'
– Core972
Aug 18 '18 at 12:32
No, it is not that @Core972
– user3434120
Aug 18 '18 at 14:08
So what does the console say?
– Halvor Holsten Strand
Aug 18 '18 at 14:54
@Halvor. It's working now. Had to put the whole "app" in a node.js web server. The console did not output anything. Now on to getting the range selector working...
– user3434120
Aug 18 '18 at 17:18
add a comment |
I think you forgot the/inwindow.location.origin + '/test.csv'
– Core972
Aug 18 '18 at 12:32
No, it is not that @Core972
– user3434120
Aug 18 '18 at 14:08
So what does the console say?
– Halvor Holsten Strand
Aug 18 '18 at 14:54
@Halvor. It's working now. Had to put the whole "app" in a node.js web server. The console did not output anything. Now on to getting the range selector working...
– user3434120
Aug 18 '18 at 17:18
I think you forgot the
/ in window.location.origin + '/test.csv'– Core972
Aug 18 '18 at 12:32
I think you forgot the
/ in window.location.origin + '/test.csv'– Core972
Aug 18 '18 at 12:32
No, it is not that @Core972
– user3434120
Aug 18 '18 at 14:08
No, it is not that @Core972
– user3434120
Aug 18 '18 at 14:08
So what does the console say?
– Halvor Holsten Strand
Aug 18 '18 at 14:54
So what does the console say?
– Halvor Holsten Strand
Aug 18 '18 at 14:54
@Halvor. It's working now. Had to put the whole "app" in a node.js web server. The console did not output anything. Now on to getting the range selector working...
– user3434120
Aug 18 '18 at 17:18
@Halvor. It's working now. Had to put the whole "app" in a node.js web server. The console did not output anything. Now on to getting the range selector working...
– user3434120
Aug 18 '18 at 17:18
add a comment |
1 Answer
1
active
oldest
votes
0
The problem with this demo is that the file path isn't correct.
If you log the window location you are using, you'll see it's null. Try:
console.log(window.location.origin)
It was discussed on this thread.
Try putting your CSV on your (a) server and then use the fully qualified path name. For example:
csvURL:'https://myserver/data/test.csv'
answered Nov 14 '18 at 8:03
JMersJMers
366
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51907268%2fnot-able-to-load-local-csv-data-into-highcharts%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
The problem with this demo is that the file path isn't correct.
If you log the window location you are using, you'll see it's null. Try:
console.log(window.location.origin)
It was discussed on this thread.
Try putting your CSV on your (a) server and then use the fully qualified path name. For example:
csvURL:'https://myserver/data/test.csv'
answered Nov 14 '18 at 8:03
JMersJMers
366
add a comment |
0
The problem with this demo is that the file path isn't correct.
If you log the window location you are using, you'll see it's null. Try:
console.log(window.location.origin)
It was discussed on this thread.
Try putting your CSV on your (a) server and then use the fully qualified path name. For example:
csvURL:'https://myserver/data/test.csv'
answered Nov 14 '18 at 8:03
JMersJMers
366
add a comment |
0
0
0
The problem with this demo is that the file path isn't correct.
If you log the window location you are using, you'll see it's null. Try:
console.log(window.location.origin)
It was discussed on this thread.
Try putting your CSV on your (a) server and then use the fully qualified path name. For example:
csvURL:'https://myserver/data/test.csv'
answered Nov 14 '18 at 8:03
JMersJMers
366
The problem with this demo is that the file path isn't correct.
If you log the window location you are using, you'll see it's null. Try:
console.log(window.location.origin)
It was discussed on this thread.
Try putting your CSV on your (a) server and then use the fully qualified path name. For example:
csvURL:'https://myserver/data/test.csv'
answered Nov 14 '18 at 8:03
JMersJMers
366
edited Mar 13 at 0:55
answered Nov 14 '18 at 8:03
JMersJMers
366
answered Nov 14 '18 at 8:03
JMersJMers
366
answered Nov 14 '18 at 8:03
JMersJMers
366
366
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51907268%2fnot-able-to-load-local-csv-data-into-highcharts%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I think you forgot the
/inwindow.location.origin + '/test.csv'– Core972
Aug 18 '18 at 12:32
No, it is not that @Core972
– user3434120
Aug 18 '18 at 14:08
So what does the console say?
– Halvor Holsten Strand
Aug 18 '18 at 14:54
@Halvor. It's working now. Had to put the whole "app" in a node.js web server. The console did not output anything. Now on to getting the range selector working...
– user3434120
Aug 18 '18 at 17:18