I want to load a csv file to my html file to plot some data.
I have figured out how to plot in html but the next challenge is to import data from a csv file. I am new to html and javascript and would appreciate inputs or even other modules aside from CanvasJS.
<!DOCTYPE HTML>
<html>
<head>
<meta charset ="UTF-8">
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title:{
text: "DOE TEST Chart"
},
axisY:{
includeZero: false
},
data: [{
type: "line",
dataPoints: dataPoints
}]
});
$.get("file:////C:/Users/TestDev/Documents/html_files/js_plots/Sample/zpw.csv", getDataPointsFromCSV);
function getDataPointsFromCSV(csv) {
var csvLines = points = [];
csvLines = csv.split(/[\r?\n]\r|\n]+/);
for (var i = 0; i < csvLines.length; i++) {
if (csvLines[i].length > 0){
points = csvLines[i].split(",");
dataPoints.push({
label: points[0],
y: parseFloat(points[1])
});
}
}
chart.render();
}
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
<script src="../../canvasjs.min.js"></script>
</body>
</html>
Try moving the Sample folder containing the csv file into your project and use a relative url like "Sample/zpw.csv"
Due to security issues browsers doesn't allow you to read files from local filesystem. However, you can save your CSV in Google-Sheets and export it as CSV and use the link to the CSV in $.get("Google-Sheet-CSV-URL").
Related
Check my OHLC Data for Plotting Candlesticks with Trading View API.
I am using this HTML and Script to Plot the Data :
<!DOCTYPE html>
<html>
<head>
<title>Plot</title>
<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
</head>
<body>
<script type="text/javascript">
const chart = LightweightCharts.createChart(document.body, { width: 1200, height: 600 });
const lineSeries = chart.addLineSeries();
chart.applyOptions(
{
timeScale: {
rightOffset: 12,
timeVisible: true,
secondsVisible: false,
fixLeftEdge: false,
},
}
);
let candl_data = [my_OHLC_data]
const candlestickSeries = chart.addCandlestickSeries();
// set data
candlestickSeries.setData(candl_data)
</script>
</body>
</html>
See how it's being show :
How can I make it to show the Full Price?
Rakesh.
Better late than never.
You need to specify the price precision in the settings. Demo
const candlestickSeries = chart.addCandlestickSeries({
priceFormat: {
type: 'price',
precision: 10,
minMove: 0.0000000001,
},
});
I have a influxdb database and i would like to display its datas into a chart using highchart.
To do so, I'm taking the data from the database with :
https://github.com/vicanso/influxdb-nodejs
var time;
var valeur;
const Influx = require('influxdb-nodejs');
const client = new Influx('http://127.0.0.1:8086/aTimeSeries');
//query last value
client.queryRaw('select * from "valeurs" group by * order by desc limit 1')
.then((data) => {
time = Date.parse(data.results[0].series[0].values[0][0]);
valeur = data.results[0].series[0].values[0][1];
console.info("[" + time + "," + valeur + "]");
}).catch(console.error);
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/json'});
res.write("[" + time + "," + valeur + "]");
res.end();
}).listen(8080);
Then to display it, I try to use the example provide by Highcharts :
https://www.highcharts.com/docs/working-with-data/live-data
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script>
var chart; // global
/**
* Request data from the server, add it to the graph and set a timeout to request again
*/
function requestData() {
$.ajax({
url: 'http://localhost:8080/',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
// add the point
chart.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Random data',
data: []
}]
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 100%; height: 100%; margin: 0 auto"></div>
</body>
But as it's working with PHP, I had a lot of little issues, so I tried to switch in nodejs.
[1523957858507,40]
My nodejs file display the right data, the same way as my PHP file was doing it.
What i want is that my index html take the data from localhost:8080 where my JS send a json array.
thanks for your help
I found this, after making my own solution :') . But this one is much easier.
visualizing-influxdb-data-with-highcharts
I want to present a pie chat, the data came from csv file (excel).
I have html file (index.html) and js file (loadData2.js),
when I print the data in js file I get It like : word,number
donald,8
trump,12
refused ,2
to,7
release ,3
his,6
so I see the data ok.
one field is a word and the other is a number.
I get an error: "Uncaught TypeError: $(...).CanvasJSChart is not a function(…)"
my html code:
<!DOCTYPE html>
<html>
<head>
<title>hw 1</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="includes/loadData2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="canvas/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
<script>
(function(){
getData2();
})();
</script>
</div>
</body>
</html>
my js code:
function getData2()
{
console.log("hello");
$.get('data/words.csv', function(data) {
console.log(data);
//Better to construct options first and then pass it as a parameter
var options = {
exportEnabled: true,
animationEnabled: true,
title: {
text: "Exporting Chart as Image"
},
data: [
{
type: "splineArea", //change it to line, area, bar, pie, etc
dataPoints: [data]
}
]
};
$("#chartContainer").CanvasJS.Chart(options);
});
}
what I need to do to in order to see my chart on the screen?
Thanks,
You are including CanvasJs, and trying to use its jQuery plugin.
replace <script src="canvas/canvasjs.min.js"></script> by the right file and it'll work.
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/jquery.canvasjs.min.js"></script>
To create a Chart using the regular library would go like this :
var options = {
exportEnabled: true,
animationEnabled: true,
title: {
text: "Exporting Chart as Image"
},
data: [
{
type: "splineArea", //change it to line, area, bar, pie, etc
dataPoints: [data]
}
]
};
var chart = new CanvasJS.Chart("chartContainer",options);
chart.render
I have code for a simple bar chart using c3.js:
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
url: 'data/output.csv'
type: 'bar'
}
});
</script>
</body>
</html>
The file output.csv looks like this:
A,B,C,D
25,50,75,100
And the graph ends up looking like this:
which is all of the data in one group.
What I'd want to do is producing the following, without hard coding the data, but rather, getting it from the CSV file like the first example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = c3.generate({
bar: {
width: 15
},
padding: {
left: 60
},
data: {
x: 'Letter',
columns:
[
['Letter', 'A','B','C','D'],
['value', 25,50,75,100]
],
type: 'bar',
onclick: function(e) { console.log(ylist[e.x]);a = this;}
},
axis: {
x: {
type: 'category'
}
},
legend: {
show: false
}
});
</script>
</body>
</html>
which would give a graph that looks like this:
Here is a jFiddle link.
My main issue is not knowing if there is a way to split the CSV file into categories, since it seems like c3.js will always put a CSV file into a time series.
C3 uses the first line in your csv as a header line and then returns a set of objects like {A:25},{B:50} which C3 will find difficult/impossible to use in the way you'd like.
Instead parse the csv outside the chart using D3's parseRows function. Then prepend a row descriptor which C3 can use to know which bit of the file does what.
https://jsfiddle.net/bm57gye5/2/
// This is a separate bit of html which is explained below
<pre id="data">
A,B,C,D
25,50,75,100
</pre>
// Actual javascript
var unparsedData = d3.select("pre#data").text();
var data = d3.csv.parseRows( unparsedData );
data[0].splice (0,0,"Letter");
data[1].splice (0,0,"Data");
console.log ("data", data);
var chart = c3.generate({
bar: {
width: 15
},
padding: {
left: 60
},
data: {
columns: data,
x: "Letter",
type: 'bar',
onclick: function(e) { console.log(ylist[e.x]);a = this;}
},
axis: {
x: {
type: 'category'
}
},
legend: {
show: false
}
});
To access the csv from a url (in the jsfiddle I just reference the data as part of the html) to feed into csv.parseRows you'll need to use d3.text and a callback as so:
d3.text("data/output.csv", function(unparsedData)
{
var data = d3.csv.parseRows(unparsedData);
... parsing / c3 chart generation continues on here as above ...
}
I am trying to generate a simple line chart using HighChart. The source code is given below. The challenge is that I am getting my X-Axis and Y-Axis on the screen but the chart itself is missing. When I move the cursor across the screen, I can see the X and Y values displayed on the screen. I have tried to debug the program but I am not able to find a solution. Can someone guide me?
Regards
Sachin
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<!--[if IE]>
<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
<![endif]-->
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Pollution Level'
},
xAxis: {
categories: [''],
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Pollution %'
}
},
series: []
};
$.get('data/graphs/pollution.csv', function(data) {
window.alert(data);
// Split the lines
var lines = data.split('\n');
window.alert(lines);
lines = lines.map(function(line) {
var data = line.split(',');
data[1] = parseFloat(data[1]);
return data;
});
window.alert(lines);
var series = {
data: lines
};
options.series.push(series);
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body >
<div id="container" style="width: 610px; height: 610px; margin: 0 auto"></div>
</body>
</html>
Update 1-Mar-2016
I have modified the program as follows. I am still not able to get a line chart. The funny thing is that if I change the type of chart from 'line' to 'column' I can see a chart. Not sure of the problem. Please advise.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!--[if IE]>
<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
<![endif]-->
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
title: {
text: 'Pollution Level'
},
xAxis: {
categories: [''],
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Pollution %'
}
},
series: [ {
plotLines: [{
color: '#000000'
}],
data: []
}]
};
$.get('data/graphs/pollution.csv', function(data) {
window.alert(data);
// Split the lines
var lines = data.split('\n');
window.alert(lines);
var series = {
data: [],
name: 'serie1'
};
lines = lines.map(function(line) {
var data = line.split(',');
if (data[0] != "DATE"){
options.xAxis.categories.push(data[0]);
data1 = parseFloat(data[1]);
series.data.push(parseFloat(data[1]));
return data;
}
});
options.series.push(series);
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body >
<div id="container" style="width: 610px; height: 610px; margin: 0 auto"></div>
<?php
?>
</body>
</html>
Be sure you are fetching valid values instead of a string:
Please, check this section:
lines = lines.map(function(line) {
var data = line.split(',');
data[1] = parseFloat(data[1]);
return data;
});
Q: Could you share your CSV (pollution.csv)?
Thanks for your data: please check the following example
The parsing section is:
for (i = 0; i < lines.length; i++) {
var items = lines[i].split(',');
if (i == 0) {
ctg[0] = items[0];
ctg[1] = items[1];
} else {
dataYAxis.push([(new Date(items[0])).getTime(), parseFloat(items[1])]);
}
}
As you can see, I isolated the titles (DATE, LVL) from the data, the next step is to save data in dataYAxis array: date first and data second. I am using 'datetime' in xAxis to show date in xAxis' labels.