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);
});
I have seen multiple incarnations of this error, but not seen an answer directly related to using the Dojo API/CDN. I am just going through a quick Dojo charting tutorial to figure out how to correctly apply a pie chart. I was using the simple instructions to set up a web page I could use to test from my local (see below). Everytime I launch the .html file, I get the error - Uncaught ReferenceError: require is not defined. All previous answers point to the src being faulty, whether its a cdn, api, or file path. I have tried multiple cdn's and configurations, including src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"and
<script data-dojo-config="async: 1"
src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>`,
yet I still get the same error (These are straight from the documentation). Any suggestions as to what is causing this error and how to resolve it to test my simple pie chart?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Pie Chart!</title>
<script> src="//ajax.googleapis.com/ajax/libs/dojo/1.13.0/dojo/dojo.js"></script>
</head>
<body>
<script>
require([
'dojo/dom',
'dojo/dom-construct',
'dojox/charting/Chart',
'dojox/charting/themes/Claro',
'dojox/charting/PiePlot'
], function (dom, domConstruct, Chart, theme, PiePlot) {
var pieChart = new Chart("chartNode");
// Set the theme
pieChart.setTheme(theme);
// Add the only/default plot
pieChart.addPlot("default", {
type: PiePlot, // our plot2d/Pie module reference as type value
radius: 200,
fontColor: "black",
labelOffset: -20
});
// Add the series of data
pieChart.addSeries("January",chartData);
// Render the chart!
pieChart.render();
});
</script>
<div id="chartNode" style="width: 550px; height: 550px;"></div>
</body>
</html>
The first thing that there is a type error in your script tag line 6 ,
closed tag script and src attrib outside the script tag , that why you have the error reuire is not ...
Also after correcting those you'ill still have some errors ,
so you need to fix an import
The 'dojox/charting/PiePlot' should be replaced by 'dojox/charting/plot2d/Pie'
and you need to declare your chartData here ,
If you need a file version see this GIST
Otherwise see below working snippet :
require([
'dojo/dom',
'dojo/dom-construct',
'dojox/charting/Chart',
'dojox/charting/themes/Claro',
'dojox/charting/plot2d/Pie'
], function(dom, domConstruct, Chart, theme, PiePlot) {
chartData = [
{ y: 389, text: "data1 " },
{ y: 125, text: "data 2" },
{ y: 285, text: "data 3" },
{ y: 193, text: "data 4" },
{ y: 21, text: "No data" }
];
var pieChart = new Chart("chartNode");
// Set the theme
pieChart.setTheme(theme);
// Add the only/default plot
pieChart.addPlot("default", {
type: PiePlot, // our plot2d/Pie module reference as type value
radius: 200,
fontColor: "black",
labelOffset: -20
});
// Add the series of data
pieChart.addSeries("January", chartData);
// Render the chart!
pieChart.render();
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>
<div id="chartNode" style="width: 550px; height: 550px;"></div>
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) { ... }
After having tried a couple of ways to solve the issue, I decided to ask for some help. The thing is, that I provide information on a website, which users in most cases don’t look too much. On the other hand this information needs to be a click away if needed. So I am using a Shield UI JavaScript chart, that binds to remote data. What I need is to initialize the chart, but not to show the data. This needs to be postponed until (and if) the user clicks on the chart.
Is there a way to bind the data later (asynchronously). How can this be achieved?
Below is some code I worked on, for testing purposes it is local data.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../../../css/shieldchart.css" />
<script src="../../../../external/jquery-1.8.2.min.js" type="text/javascript">//</script>
<script src="../../../../external/jquery.mousewheel/jquery.mousewheel.js" type="text/javascript">//</script>
<script src="../../../../external/canvg-1.2/rgbcolor.js" type="text/javascript">//</script>
<script src="../../../../external/canvg-1.2/canvg.js" type="text/javascript">//</script>
<script src="../../../../external/globalize/globalize.js" type="text/javascript">//</script>
<script src="../../../../common/core.js" type="text/javascript">//</script>
<script src="../../../js/shieldchart.js" type="text/javascript">//</script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px; margin: auto;"></div>
<script type="text/javascript">
$(document).ready(function () {
var Information= [12,22,22,12,32,44,34 ];
$("#container").shieldChart({
events: {
seriesClick: function pointSelectHandler(args) {
var containterproducts = $("#container").swidget();
containterproducts.destroy();
$("#container").shieldChart({
exportOptions:
{
image: false,
print: false
},
primaryHeader: {
text: "Electricity prices"
},
dataSeries: [
{
seriesType: 'pie',
collectionAlias: "User Information",
data: Information
},
]
});
}
},
exportOptions:
{
image: false,
print: false
},
primaryHeader: {
text: "Click to show data"
},
});
});
You are on a right way to solve the problem. You initially create a chart that contains no data and eventually bind it to the data source.
However you may not use the seriesClick event, since you don’t have any series that the user can click on.
If you want to use that event, than you need to add for instance a single value, let’s say 1, so that the user is able to click on the pie:
dataSeries: [
{
seriesType: 'pie',
collectionAlias: "Logins",
data: [1]
},
]
or alternatively, you can have your code and only change the event used:
click: function pointSelectHandler(args) {}
In this case you will show the data when the user clicks on the chart and won’t be in need of any series.
This is the more comfortable strategy, because with the pie chart type it is easy to visualize a sample data series. But if you are using line type chart it will be more complicated for the user to get to know that he needs to click on a data series to get the actual data.