Plotly.js traces not showing
up vote
1
down vote
favorite
I'm trying to use Plotly.js to create some graphs of historical cryptocurrency prices, and am running into the problem that my data is not showing up on the graph created. I'm building my code from the sample code at https://plot.ly/javascript/ajax-call/ but tooling it for my own data source and a local copy of plotly-latest.min.js. I'm using a small subset of my data and only one trace to get the code functional, and I've placed console.log statements after the processing of the data and the creation of the trace that show me my data is properly formatted judging by the sample code and its dataset. I've set the range of the chart to the range of my data, but I still see nothing on the chart when its created despite modeling it after working sample code. Where am I going wrong?
My code:
<!DOCTYPE html>
<html>
<head>
<script src="plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv" style="width: 480px; height: 400px;"></div>
<script>
function makePlot() {
Plotly.d3.csv("bitcoin.csv", function(data){ processData(data) } );
}
function processData(allRows) {
var Date = , Open = , High = , Low = , Volume = , MarketCap = ;
for (var i=0; i<allRows.length; i++) {
row = allRows[i];
tmpDate = row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[0]
Date.unshift( tmpDate.split('/')[2] + '-' + tmpDate.split('/')[1] + '-' + tmpDate.split('/')[0]);
Open.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[1]);
High.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[2]);
Low.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[3]);
Volume.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[4]);
MarketCap.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[5]);
};
makePlotly(Date, Open);
}
function makePlotly(Date, Open) {
var plotDiv = document.getElementById("plot");
var traces = [{
Date: Date,
Open: Open}
];
console.log(traces);
var layout = {
xaxis: {
type: 'date',
title: 'Date',
range: ['2017-11-12', '2017-11-22']
},
yaxis: {
title: 'Price (USD)',
range: [4000, 10000]
},
title: 'Cryptocurrency Historical Prices'
}
Plotly.newPlot('myDiv', traces, layout);
}
makePlot();
</script>
</body>
</html>
bitcoin.csv (1 column)
Date;Open;High;Low;Close;Volume;MarketCap
22/11/2017;8077.95;8302.26;8075.47;8253.55;3633530000;134851000000
21/11/2017;8205.74;8348.66;7762.71;8071.26;4277610000;136967000000
20/11/2017;8039.07;8336.86;7949.36;8200.64;3488450000;134167000000
19/11/2017;7766.03;8101.91;7694.10;8036.49;3149320000;129595000000
18/11/2017;7697.21;7884.99;7463.44;7790.15;3667190000;128425000000
17/11/2017;7853.57;8004.59;7561.09;7708.99;4651670000;131026000000
16/11/2017;7323.24;7967.38;7176.58;7871.69;5123810000;122164000000
15/11/2017;6634.76;7342.25;6634.76;7315.54;4200880000;110667000000
14/11/2017;6561.48;6764.98;6461.75;6635.75;3197110000;109434000000
13/11/2017;5938.25;6811.19;5844.29;6559.49;6263250000;99029000000
12/11/2017;6295.45;6625.05;5519.01;5950.07;8957350000;104980000000
javascript plot
asked Nov 28 '17 at 20:31
GITBNymph
63
add a comment |
up vote
1
down vote
favorite
I'm trying to use Plotly.js to create some graphs of historical cryptocurrency prices, and am running into the problem that my data is not showing up on the graph created. I'm building my code from the sample code at https://plot.ly/javascript/ajax-call/ but tooling it for my own data source and a local copy of plotly-latest.min.js. I'm using a small subset of my data and only one trace to get the code functional, and I've placed console.log statements after the processing of the data and the creation of the trace that show me my data is properly formatted judging by the sample code and its dataset. I've set the range of the chart to the range of my data, but I still see nothing on the chart when its created despite modeling it after working sample code. Where am I going wrong?
My code:
<!DOCTYPE html>
<html>
<head>
<script src="plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv" style="width: 480px; height: 400px;"></div>
<script>
function makePlot() {
Plotly.d3.csv("bitcoin.csv", function(data){ processData(data) } );
}
function processData(allRows) {
var Date = , Open = , High = , Low = , Volume = , MarketCap = ;
for (var i=0; i<allRows.length; i++) {
row = allRows[i];
tmpDate = row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[0]
Date.unshift( tmpDate.split('/')[2] + '-' + tmpDate.split('/')[1] + '-' + tmpDate.split('/')[0]);
Open.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[1]);
High.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[2]);
Low.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[3]);
Volume.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[4]);
MarketCap.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[5]);
};
makePlotly(Date, Open);
}
function makePlotly(Date, Open) {
var plotDiv = document.getElementById("plot");
var traces = [{
Date: Date,
Open: Open}
];
console.log(traces);
var layout = {
xaxis: {
type: 'date',
title: 'Date',
range: ['2017-11-12', '2017-11-22']
},
yaxis: {
title: 'Price (USD)',
range: [4000, 10000]
},
title: 'Cryptocurrency Historical Prices'
}
Plotly.newPlot('myDiv', traces, layout);
}
makePlot();
</script>
</body>
</html>
bitcoin.csv (1 column)
Date;Open;High;Low;Close;Volume;MarketCap
22/11/2017;8077.95;8302.26;8075.47;8253.55;3633530000;134851000000
21/11/2017;8205.74;8348.66;7762.71;8071.26;4277610000;136967000000
20/11/2017;8039.07;8336.86;7949.36;8200.64;3488450000;134167000000
19/11/2017;7766.03;8101.91;7694.10;8036.49;3149320000;129595000000
18/11/2017;7697.21;7884.99;7463.44;7790.15;3667190000;128425000000
17/11/2017;7853.57;8004.59;7561.09;7708.99;4651670000;131026000000
16/11/2017;7323.24;7967.38;7176.58;7871.69;5123810000;122164000000
15/11/2017;6634.76;7342.25;6634.76;7315.54;4200880000;110667000000
14/11/2017;6561.48;6764.98;6461.75;6635.75;3197110000;109434000000
13/11/2017;5938.25;6811.19;5844.29;6559.49;6263250000;99029000000
12/11/2017;6295.45;6625.05;5519.01;5950.07;8957350000;104980000000
javascript plot
asked Nov 28 '17 at 20:31
GITBNymph
63
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I'm trying to use Plotly.js to create some graphs of historical cryptocurrency prices, and am running into the problem that my data is not showing up on the graph created. I'm building my code from the sample code at https://plot.ly/javascript/ajax-call/ but tooling it for my own data source and a local copy of plotly-latest.min.js. I'm using a small subset of my data and only one trace to get the code functional, and I've placed console.log statements after the processing of the data and the creation of the trace that show me my data is properly formatted judging by the sample code and its dataset. I've set the range of the chart to the range of my data, but I still see nothing on the chart when its created despite modeling it after working sample code. Where am I going wrong?
My code:
<!DOCTYPE html>
<html>
<head>
<script src="plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv" style="width: 480px; height: 400px;"></div>
<script>
function makePlot() {
Plotly.d3.csv("bitcoin.csv", function(data){ processData(data) } );
}
function processData(allRows) {
var Date = , Open = , High = , Low = , Volume = , MarketCap = ;
for (var i=0; i<allRows.length; i++) {
row = allRows[i];
tmpDate = row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[0]
Date.unshift( tmpDate.split('/')[2] + '-' + tmpDate.split('/')[1] + '-' + tmpDate.split('/')[0]);
Open.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[1]);
High.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[2]);
Low.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[3]);
Volume.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[4]);
MarketCap.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[5]);
};
makePlotly(Date, Open);
}
function makePlotly(Date, Open) {
var plotDiv = document.getElementById("plot");
var traces = [{
Date: Date,
Open: Open}
];
console.log(traces);
var layout = {
xaxis: {
type: 'date',
title: 'Date',
range: ['2017-11-12', '2017-11-22']
},
yaxis: {
title: 'Price (USD)',
range: [4000, 10000]
},
title: 'Cryptocurrency Historical Prices'
}
Plotly.newPlot('myDiv', traces, layout);
}
makePlot();
</script>
</body>
</html>
bitcoin.csv (1 column)
Date;Open;High;Low;Close;Volume;MarketCap
22/11/2017;8077.95;8302.26;8075.47;8253.55;3633530000;134851000000
21/11/2017;8205.74;8348.66;7762.71;8071.26;4277610000;136967000000
20/11/2017;8039.07;8336.86;7949.36;8200.64;3488450000;134167000000
19/11/2017;7766.03;8101.91;7694.10;8036.49;3149320000;129595000000
18/11/2017;7697.21;7884.99;7463.44;7790.15;3667190000;128425000000
17/11/2017;7853.57;8004.59;7561.09;7708.99;4651670000;131026000000
16/11/2017;7323.24;7967.38;7176.58;7871.69;5123810000;122164000000
15/11/2017;6634.76;7342.25;6634.76;7315.54;4200880000;110667000000
14/11/2017;6561.48;6764.98;6461.75;6635.75;3197110000;109434000000
13/11/2017;5938.25;6811.19;5844.29;6559.49;6263250000;99029000000
12/11/2017;6295.45;6625.05;5519.01;5950.07;8957350000;104980000000
javascript plot
asked Nov 28 '17 at 20:31
GITBNymph
63
I'm trying to use Plotly.js to create some graphs of historical cryptocurrency prices, and am running into the problem that my data is not showing up on the graph created. I'm building my code from the sample code at https://plot.ly/javascript/ajax-call/ but tooling it for my own data source and a local copy of plotly-latest.min.js. I'm using a small subset of my data and only one trace to get the code functional, and I've placed console.log statements after the processing of the data and the creation of the trace that show me my data is properly formatted judging by the sample code and its dataset. I've set the range of the chart to the range of my data, but I still see nothing on the chart when its created despite modeling it after working sample code. Where am I going wrong?
My code:
<!DOCTYPE html>
<html>
<head>
<script src="plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv" style="width: 480px; height: 400px;"></div>
<script>
function makePlot() {
Plotly.d3.csv("bitcoin.csv", function(data){ processData(data) } );
}
function processData(allRows) {
var Date = , Open = , High = , Low = , Volume = , MarketCap = ;
for (var i=0; i<allRows.length; i++) {
row = allRows[i];
tmpDate = row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[0]
Date.unshift( tmpDate.split('/')[2] + '-' + tmpDate.split('/')[1] + '-' + tmpDate.split('/')[0]);
Open.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[1]);
High.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[2]);
Low.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[3]);
Volume.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[4]);
MarketCap.unshift( row['Date;Open;High;Low;Close;Volume;MarketCap'].split(';')[5]);
};
makePlotly(Date, Open);
}
function makePlotly(Date, Open) {
var plotDiv = document.getElementById("plot");
var traces = [{
Date: Date,
Open: Open}
];
console.log(traces);
var layout = {
xaxis: {
type: 'date',
title: 'Date',
range: ['2017-11-12', '2017-11-22']
},
yaxis: {
title: 'Price (USD)',
range: [4000, 10000]
},
title: 'Cryptocurrency Historical Prices'
}
Plotly.newPlot('myDiv', traces, layout);
}
makePlot();
</script>
</body>
</html>
bitcoin.csv (1 column)
Date;Open;High;Low;Close;Volume;MarketCap
22/11/2017;8077.95;8302.26;8075.47;8253.55;3633530000;134851000000
21/11/2017;8205.74;8348.66;7762.71;8071.26;4277610000;136967000000
20/11/2017;8039.07;8336.86;7949.36;8200.64;3488450000;134167000000
19/11/2017;7766.03;8101.91;7694.10;8036.49;3149320000;129595000000
18/11/2017;7697.21;7884.99;7463.44;7790.15;3667190000;128425000000
17/11/2017;7853.57;8004.59;7561.09;7708.99;4651670000;131026000000
16/11/2017;7323.24;7967.38;7176.58;7871.69;5123810000;122164000000
15/11/2017;6634.76;7342.25;6634.76;7315.54;4200880000;110667000000
14/11/2017;6561.48;6764.98;6461.75;6635.75;3197110000;109434000000
13/11/2017;5938.25;6811.19;5844.29;6559.49;6263250000;99029000000
12/11/2017;6295.45;6625.05;5519.01;5950.07;8957350000;104980000000
javascript plot
javascript plot
asked Nov 28 '17 at 20:31
GITBNymph
63
asked Nov 28 '17 at 20:31
GITBNymph
63
asked Nov 28 '17 at 20:31
GITBNymph
63
asked Nov 28 '17 at 20:31
GITBNymph
63
asked Nov 28 '17 at 20:31
GITBNymph
63
63
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
I guess it should be your variable traces causes the problem
var traces = [{
x: Date, //not Date: Date
y: Open //not Open: Open
}];
answered Nov 19 at 10:21
jeffsama
1,237187
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
I guess it should be your variable traces causes the problem
var traces = [{
x: Date, //not Date: Date
y: Open //not Open: Open
}];
answered Nov 19 at 10:21
jeffsama
1,237187
add a comment |
up vote
0
down vote
I guess it should be your variable traces causes the problem
var traces = [{
x: Date, //not Date: Date
y: Open //not Open: Open
}];
answered Nov 19 at 10:21
jeffsama
1,237187
add a comment |
up vote
0
down vote
up vote
0
down vote
I guess it should be your variable traces causes the problem
var traces = [{
x: Date, //not Date: Date
y: Open //not Open: Open
}];
answered Nov 19 at 10:21
jeffsama
1,237187
I guess it should be your variable traces causes the problem
var traces = [{
x: Date, //not Date: Date
y: Open //not Open: Open
}];
answered Nov 19 at 10:21
jeffsama
1,237187
answered Nov 19 at 10:21
jeffsama
1,237187
answered Nov 19 at 10:21
jeffsama
1,237187
answered Nov 19 at 10:21
jeffsama
1,237187
1,237187
add a comment |
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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%2f47540421%2fplotly-js-traces-not-showing%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
