PapaParse doesn't handle my date correctly - javascript
I am having an issue creating a chart with some JSON that papaparse gives me. It continually gives me this error.
c3.js:2100 Failed to parse x '10-18-2018' to Date object
I've attempted to change the date format in csv to no avail. I have followed examples from c3 website, papaparse examples, and some stack overflow questions. Hopefully someone can tell me what I'm doing wrong so I can move forward with my project. Here is the code and the csv lines
app.js
"use strict";
$(function () {
$.get("108jbdata.csv") // Use HTTP GET (via Live-server) to retreive data from the static CSV file that we have included with our web assets.
.then(function (response) {
// Callback is executed when data is asynchronously received.
var parseOptions = {
// Parse options given to PapaParse.
header: true, // Allow PapaParse to derive field names from the CSV header line.
dynamicTyping: true, // Tell PapaParse to parse CSV string fields to the correct types for us.
};
var parsed = Papa.parse(response, parseOptions); // Parse the CSV data retreived from Live-server.
console.log(parsed);
var chart = c3.generate({
// Generate our chart.
bindto: "#chart",
data: {
json: parsed.data, // Plug the parsed CSV data into the chart.
keys: {
x: "Date",
xFormat: "%m-%d-%Y",
value: [
"KFISH", // Specify which column from the CSV file that we want to appear in the chart.
"WATER",
],
},
},
axis: {
x: {
type: "timeseries",
tick: {
format: "%m-%d-%Y",
},
},
},
});
})
.catch(function (err) {
// Handle any error that might have occurred.
console.error(err);
});
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3 chart template</title>
<link href="bower_components/c3/c3.css" rel="stylesheet" />
</head>
<body>
<div id="chart"></div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/d3/d3.js"></script>
<script src="bower_components/c3/c3.js"></script>
<script src="bower_components/papaparse/papaparse.js"></script>
<script src="app.js"></script>
</body>
</html>
csv
Date,Iron,Chromium,Lead,Copper,Tin,Aluminum,Nickel,Silver,Silicon,boron,Sodium,Magnesium,Calcium,Barium,Phosphorous,Zinc,Molybdenum,Tin1,Vandium,W,Potassium,Antimony,Lithium,Maganese,Cadmium,VISC40,TAN,KFISH,WATER,PC0,PC1,pc2,pc3,pc4,pc5,PCISO0,PCISO1,PCISO2
"10-18-2018",0,0,3,0,0,0,0,0,2,0,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,65.03,0.37,15,0.0015,374,229,52,19,2,0,16,15,13
"11-2-2018",0,0,0,0,3,0,1,0,1,0,0,0,0,0,0,1,0,0,0,0,0,8,0,0,0,64.63,0.5,24,0.0024,2915,388,15,3,0,0,19,16,11
"11-29-2018",0,0,0,0,0,0,0,0,2,0,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,64.13,0.93,23,0.0023,3292,527,16,4,1,0,19,16,11
"12-13-2018",0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,63.95,0.91,20,0.002,3076,517,14,5,1,1,19,16,11
"1-14-2019",0,0,0,0,0,0,1,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,64.74,0.84,13,0.0013,4007,698,32,9,1,0,19,17,12
I got past being unable to parse the string date from the csv as a Date by going through each element and parsing it as a Date before I sent it off to the generate function.
parsed.data.forEach((h) => {
h.Date = Date.parse(h.Date);
});
Related
chartjs time cartesian axis adapter and date library setup
I am trying to implement this tutorial and could not get it done. https://www.chartjs.org/docs/latest/axes/cartesian/time.html
Input: list of objects with (time,value) attributes. Time is Integer that means unix time in seconds; value is Float.
The tutorial says "Date Adapters. The time scale requires both a date library and a corresponding adapter to be present. Please choose from the available adapters".
Date library, date-fns: https://github.com/date-fns/date-fns
Question 1. how to install/include the date-fns library? The documentation says "npm", but I think it is only for Node.js, but I have a Django project, Ubuntu. If I just download the zip, there is a bunch of files inside.
Adapter, chartjs-adapter-date-fns https://github.com/chartjs/chartjs-adapter-date-fns.
Question 2. how to install the fns adapter? The documentation says "npm", but I have a Django project, Ubuntu. BUT, if I include <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>, I feel it is enough.
Question 3. after installing adapter and date library, how to fix the script below to make the plot work (Time Cartesian Axis)? I think it is all about updating line point["x"] = elem.time; to convert a unix time to some appropriate type.
HTML
<canvas id="myChart"></canvas>
JS
let points = [];
for(let elem of objs) {
point = {};
point["x"] = elem.time;
point["y"] = elem.value;
points.push(point);
}
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: points,
// Configuration options go here
options: {
responsive: false,
scales: {
x: {
type: 'time',
}
}
}
});
Installing all the 3 required libs can indeed be done using script tags, see live example underneath.
The reason your data doesnt show is because chart.js doesnt expect a data array in the data field. In the data field it expects an object with at least a key for all the datasets which is an array and an optional labels array, but since you are using object format for your data the labels array is not neccesarry.
Each dataset has its own label for the legend and in the dataset object you configure the data array in the data field. See live example:
const options = {
type: 'line',
data: {
datasets: [{
label: '# of Votes',
data: [{
x: 1632664468243,
y: 5
}, {
x: 1632664458143,
y: 10
}],
borderColor: 'pink'
}]
},
options: {
scales: {
x: {
type: 'time'
}
}
}
}
const ctx = document.getElementById('tt').getContext('2d');
new Chart(ctx, options);
<canvas id="tt"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
How to save a csv file uploaded from my machine into a data object in javascript?
I'm building a page that can display a chart of sensor data from a csv file. The user should be able to click on a button to choose a desired csv file from his machine to be displayed on a chart. I'm using the Highcharts library for that. The chart works as desired, but I can only input the csv file in code. When I upload a file and update nothing happens. So how can I make "data.csv" dynamic? My idea was to somehow save it into a global data object, that can then be passed into ajax url. I don't know how to implement this, since this is my very first javascript project.
<!DOCTYPE html> <!-- Write your comments here -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script> <!-- library include-->
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
<title>Airmeter</title>
</head>
<body>
<div id="container"></div>
<form id='form'>
<input type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" id="input" />
<button type='submit'>
update the chart
</button>
</form>
<script>
$.ajax({
type: "GET",
url: "data.csv",
success: function (data) {
setTitle(data)
}
});
function setTitle(raw_data){
let newTitle;
let chart = Highcharts.chart('container', {
chart: {
zoomType: 'xy',
events: {
load: function() {
this.update({
title: {
text: 'Airmeter: '+ newTitle
}
})
}
}
},
xAxis:{
title:{
text: 'Zeit'
}
},
yAxis:{
title:{
text: 'CO2 in ppm'
}
} ,
exporting:{
enabled: true
},
title: {
text: null
},
credits:{
enabled: false
},
data: {
csv: raw_data,
parsed(e) {
newTitle=e[0][1] //set the first column as title of the chart
e.shift()
}
}
});
}
</script>
</body>
</html>
I would really appreciate help. Thanks for your time and have nice day!
If the CSV will always be on your local machine rather than a server, you don't really need to be using an AJAX call and you could use the FileAPI and a CSV parser to pass the data to your setTitle function.
But to help with your approach, try doing these changes to your code:
Add an onChange event to your input, so whenever a file is selected, the javascript code can 'react' to it.
Wrap your AJAX call in the 'change' event handler.
Pass the selected file name to your AJAX request's URL.
In terms of code changes (untested):
<script>
// Add an event listener, so when a file is selected, the graph is drawn again
document.getElementById("input").addEventListener("change", drawGraph, false);
// Wrap your current AJAX call in the event handler
function drawGraph() {
// Obtain the name of the file selected by the user in the <input>
var fileName = document.getElementById('input').files[0].name;
$.ajax({
type: "GET",
url: fileName, // use this name to fetch the selected file
success: function (data) {
setTitle(data)
}
});
}
// Leave the rest of the script block as it is
// ...
</script>
using Highstock and Highchart-Gantt on same page
I am trying to use the Highcharts set of javascript libraries to create a page that displays both a stock prices chart and a gantt chart (using the Highstocks and Highcharts Gantt libraries)
I do not have problems creating and displaying either of these plots independently on separate pages.
However, I cannot get the two libraries to work together in order to display these two plots on the same webpage.
I would appreciate any help i can get on how to get these two libraries to work together.
Attempt 1. If I import the highstock script first
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
then the following happens:
the prices plot will display but the gantt plot does not.
It throws two error messages in the console:
Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16
at m (highstock.src.js:463)
at Object.d.error (highstock.src.js:474)
at highcharts-gantt.src.js:21
at highcharts-gantt.src.js:9
and
Uncaught TypeError: Highcharts.ganttChart is not a function
at myExample.html:60
Attempt 2. If I import the gantt script first
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
then the following happens:
the gantt plot will display but the prices plot does not.
It throws two error messages in the console:
Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16
at d (highcharts-gantt.src.js:463)
at Object.c.error (highcharts-gantt.src.js:474)
at highstock.src.js:21
at highstock.src.js:9 ```
and
Uncaught TypeError: Highcharts.stockChart is not a function
at myExample.html:28
Example Code
A minimum viable code for demonstrating the problem i am running into is below:
<html>
<head>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
</head>
<body>
<!-- ================================================================== -->
<!-- PRICES PLOT -->
<!-- ================================================================== -->
<div id="pricesChart" style="height: 500px; min-width: 310px"></div>
<script type="text/javascript">
var prices =
[[Date.parse("2019-06-01 00:00:00"), 0.081558],
[Date.parse("2019-06-02 00:00:00"), 0.081728],
[Date.parse("2019-06-03 00:00:00"), 0.081624],
[Date.parse("2019-06-04 00:00:00"), 0.08164500000000001]
];
var lineplotOptions = {
xAxis: { type: 'datetime' },
series: [{
type: "line",
data: prices,
yAxis: 0,
}],
};
Highcharts.stockChart('pricesChart', lineplotOptions);
</script>
<!-- ================================================================== -->
<!-- GANT CHART -->
<!-- ================================================================== -->
<div id="container"></div>
<script type="text/javascript">
var tasks =
[{
start: Date.parse("2019-06-01 06:00:00"),
end: Date.parse("2019-06-01 20:30:00"),
name: 'task1'
}, {
start: Date.parse("2019-06-01 09:20:00"),
end: Date.parse("2019-06-03 02:00:00"),
name: 'task2'
}, {
start: Date.parse("2019-06-02 11:00:00"),
end: Date.parse("2019-06-03 21:10:00"),
name: 'task1'
}];
var gant_options = {
yAxis: { uniqueNames: true },
scrollbar: {enabled: true },
series: [{
name: 'Project 1',
data: tasks
}]
}
var mychart = Highcharts.ganttChart('container', gant_options);
</script>
</body>
</html>
Similar questions on stackoverflow
The following are similar questions on stack overflow, but which don't quite deal with my specific case.
Using highcharts & highstock together on same page
use highchart and highstock on the same page
These two deal with highcharts and highstock libraries on the same page.
Highstock library extends on the functionality of highcharts, so there is no need to also import highcharts.
This does not help my case because the functionality i need is not included in either highstock or highcharts-gantt on their own.
You can load highstock and highcharts-gantt separately like that:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script>
var Highstock = window.Highcharts;
window.Highcharts = null;
</script>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
initialization:
Highstock.stockChart('container1', {
series: [{
data: []
}]
});
Highcharts.ganttChart('container2', {
series: [{
data: []
}]
});
Demo:
https://jsfiddle.net/BlackLabel/Lxnjwsb9/1/
How to load and print json array/object in javascript
I do not have any json and d3 knowledge (just started to read few hours back) but have very basic javascript knowledge. I have to load a json file and print all the array and objects on the console using d3. I was wondering if anyone can help me to solve it. Actually, I did it but does not work :(
My json file.
{
"addressfile": "info",
"struct": {
"address": [
[
"A",
"B",
],
[
"B",
"C",
],
],
"address1": {
"address2": {
"address3": {
"zip": [
"NUMBER",
0
]
},
"address_type": "Home"
},
}
},
"COUNTRY": {},
}
My javascript code...
<!DOCTYPE html>
<meta charset="utf-8">
<style>
<body>
<script>
//LOADING JSON FILE
d3.json("address.json", function(error, root) {
if (error) return console.error(error);
for (var p in location) if (location.hasOwnProperty(p)) {
console.log(p + " : " + location[p]);
}
}
</script>
</body>
</html>
Please help me to solve it...
Try
d3.json("appinfo.json", function(location) {
I know the docs say the callback takes two parameters, in a project I recently did with d3 version 3.4.13, the callback function would only work if I only passed it the data parameter.
your code missing a closing parenthesis - );
correct code would be :
<script>
d3.json("appinfo.json", function(error, root) {
if (error) return console.error(error);
console.log(root) // output -your JSON data as pojo
//for (var p in location) if (location.hasOwnProperty(p)) {
// console.log(p + " : " + location[p]);
//}
});
</script>
make sure you write correct url to your json file in first parameter to d3.json().
make sure that appinfo.json contain correct json object, you can test it at http://jsonlint.com/
Thanks everyone.. After struggling I got the solution..
Solution: External Json files are not supported by the browsers ..so I needed to use webserver. Then I was able to see the output of it in the console.
the final code:
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script>
d3.json("address.json", function(location) {
console.log(location)
});
</script>
</body>
</html>
Hope it might help others to solve in minutes not in hours like me.....
Highcharts - Can't run example
I'm a beginner with HIGHCHARTS.
I want to start from this example :
http://people.canonical.com/~bradf/media/highstock/examples/basic-line/index.htm
I downloaded the corresponding JSON file :
http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json
And I want to run it locally (and after test it with my own JSON files).
But it doesn't works!
I use the source code of the example, I've just modified the getJSON line.
I have this :
$.getJSON('./data/json/'+ name+'-c.json&callback=?', function(data) { ... }
I think that the issue comes from the callback.
Any ideas?
To make the example working on your local you will have to follow the below steps:
I assume that the json source code you have downloaded from the url http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json is stored in a file data.json
Now as you would have noticed, the json source in the file data.json would be like as below:
?(/* AAPL historical OHLC data from the Google Finance API */
[
/* May 2006 */
[1147651200000,67.79],
[1147737600000,64.98],
[1147824000000,65.26],
[1147910400000,63.18],
.......
....
So now as you would have noticed there are code lines ?(/* AAPL historical OHLC data from the Google Finance API */ and /* May 2006 */ in the json source which are causing the things to go wrong by generating a parse error because the data source with such code lines is not a valid json string.
So you will have to remove each and every such invalid code line from the whole json file to make the things working correctly.
After removing all the invalid line of code your json file should look like:
[
[1147651200000,67.79],
[1147737600000,64.98],
[1147824000000,65.26],
....
...
]
3. Now till this step you are ready with a valid json data source for the Highstock chart, so finally to display the chart you will have to use the code like:
$(function() {
$.getJSON('data.json', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
The whole page source code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script>
$(function() {
$.getJSON('data.json', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
</script>
<body>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
&callback=? is normally appended for jsonp which is a technique used for cross domain calls (to other websites for example.)
From what I can see you should try removing it from the call.
In your case:
$.getJSON('./data/json/'+ name+'-c.json, function(data) { ... }