I'm trying to use data from a csv to make a chart. I included the csv parser code, but you don't have to read it; I confirmed it's working correctly from console.log. arr[1] looks something like this:
[[1,2],
[3,4],
[5,7]]
I pass arr[1] to series.data (close to the bottom); however, I get a blank graph. I'm trying to get a simple (x,y) line graph. What am I doing wrong? Thanks in advance for the help!
EDIT: I pasted that 2D array from above into series.data and it made a graph...I think my parser code is running after my Highcharts code. Why is that/how do I fix that.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stock Data - Highcharts</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on DOM loaded -->
<script>
//CSV parser
var arr = new Array();
function successFunction(data) {
var allRows = data.split(/\r?\n|\r/);
for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
var this_row = allRows[singleRow].split(',')
if (singleRow === 0) {
//start at the first yaxis column
for (var i = 1; i < this_row.length; i++) {
arr[i] = new Array();
}
}
else {
for (var i = 1; i < this_row.length; i++) {
var a = Number(this_row[0]);
var b = Number(this_row[i]);
var temp_arr = [a, b];
arr[i].push(temp_arr);
}
}
}
console.log(arr[1])
}
var csv_name = "just-prices-sample.csv"
$.ajax({
url: csv_name,
dataType: 'text',
}).done(successFunction);
//end of CSV parser
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'line'
},
rangeSelector: {
selected: 1
},
title: {
text: 'Stock Price'
},
yAxis: {
title: {
text: 'Price (Dollars)'
}
},
series : [{
data: arr[1],
type: 'line'
}]
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Look like you don't get arr
as you defind
here is working example https://jsfiddle.net/nageen/oxrL8fd2/
i have make it static because your CSV file not giving any data. you have to check why you not getting data from CSV file. i just want to show everything is good except you arr[1]
because arr is getting data from CSV and if CSV don't give data then arr
will empty and it not showing graph.
Correct answer (thanks to askerovlab):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stock Data - Highcharts</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on DOM loaded -->
<script>
//CSV parser
var arr = new Array();
function successFunction(data) {
var allRows = data.split(/\r?\n|\r/);
for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
var this_row = allRows[singleRow].split(',')
if (singleRow === 0) {
//start at the first yaxis column
for (var i = 1; i < this_row.length; i++) {
arr[i] = new Array();
}
}
else {
for (var i = 1; i < this_row.length; i++) {
var a = Number(this_row[0]);
var b = Number(this_row[i]);
var temp_arr = [a, b];
arr[i].push(temp_arr);
}
}
}
console.log(arr[1]);
}
//end of CSV parser
function chartsFunction() {
Highcharts.chart('container', {
chart: {
type: 'line'
},
rangeSelector: {
selected: 1
},
title: {
text: 'Stock Price'
},
yAxis: {
max: 25,
title: {
text: 'Price (Dollars)'
}
},
series : [{
data: arr[1],
type: 'line'
}]
});
}
document.addEventListener('DOMContentLoaded', function () {
var csv_name = "just-prices-sample.csv"
$.ajax({
url: csv_name,
dataType: 'text',
}).done((data) => { successFunction(data); chartsFunction(); })
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.