I am making a call to the yahoo finance api which is returning a csv. I then want to convert the csv file to an array which google charts can read. The issue is when I pass the array to the view it has a bunch of html encoded characters.
For example I want to pass the array:
[['Year', 'Sales', 'Expenses'],['2004',1000,400],['2005',1170,460],['2006',660,1120],['2007',1030,540]]
But when the page is rendered it is throwing an error and the passed array looks like this:
[['Year', 'Sales', 'Expenses'],['2004',1000,400],['2005',1170,460],['2006',660,1120],['2007',1030,540]]
Here is my index.js:
var router = require('express').Router();
function GetCompanyInformation(callback) {
var request = require('request');
request('http://table.finance.yahoo.com/table.csv?s=orcl&a=0&b1&c=2010&d=0&e=1&f=2011&g=d&y=0&z=orcl', function (error, response, data) {
if (!error && response.statusCode == 200) {
return callback(null,data);
}
return callback('An error has occurred.',null);
})
}
/* GET home page. */
router.get('/', function(req, res, next) {
GetCompanyInformation(function(err, data){
res.render('index', {
title: 'Express',
data : "[['Year', 'Sales', 'Expenses'],['2004',1000,400],['2005',1170,460],['2006',660,1120],['2007',1030,540]]"
});
});
});
module.exports = router;
Here is my view:
<div class="container">
<div class="row">
<h1>{{ title }}</h1>
<hr>
<div id="stock-chart-container" class="col-lg-12">
<h3>Item Name</h3>
<hr>
<div id="company-performance-chart"></div>
</div>
</div>
</div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable({{data}});
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
var chart = new google.charts.Bar(document.getElementById('company-performance-chart'));
chart.draw(data, options);
}
<!--RESIZE THE GOOGLE CHART (MAKES IT RESPONSIVE)-->
$(window).resize(function(){
drawChart();
});
</script>
The value that needs to be passed over to the google charts needs to look like this:
var data = google.visualization.arrayToDataTable([
['Year', 'Income', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
Am I approaching this the wrong way?
@James When I pass it as an array i get this in the rendered view:
var data = google.visualization.arrayToDataTable(Year,Sales,Expenses,2004,1000,400,2005,1170,460,2006,660,1120,2007,1030,540);
