I have managed to present JSON data in an HTML table as shown below :
$("#example-table").tabulator({
height:"300px",
fitColumns:true,
tooltips:true,
columns:[
{title:"Month", field:"Month", sorter:"string"},
{title:"Numbers", field:"numbers", width:400, sorter:"string"},
],
});
var sampleData= [
{Month:"January", numbers:"124010"},
]
$("#example-table").tabulator("setData", sampleData);
$(window).resize(function(){
$("#example-table").tabulator("redraw");
});
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/olifolkerd/tabulator/master/tabulator.css">
<script type="text/javascript" src="https://cdn.rawgit.com/olifolkerd/tabulator/master/tabulator.js"></script>
</head>
<body>
<div id="example-table"></div>
</body>
</html>
Now, I am getting the JSON data in a slightly different format. The first format was :
{Month:"January", numbers:"124010"},
{Month:"February", numbers:"545010"}
and now it is :
{"headers":["Month","numbers"],"rows":[["January",124010],["February",545010]]}
So, in a new snippet I tried to parse the data from the JSON data without success :
$("#example-table").tabulator({
height:"300px",
fitColumns:true,
tooltips:true,
columns:[
{title:"Month", field:"Month", sorter:"string"},
{title:"Numbers", field:"numbers", width:200, sorter:"string"},
],
});
var data= {"headers":["Month","numbers"],"rows":[["January",124010],["February",545010]]}
var finaldata = [];
for (var i = 0; i < data.rows.length; i++) {
finaldata.push(data.rows[i][1])
}
$("#example-table").tabulator("setData", finaldata);
$(window).resize(function(){
$("#example-table").tabulator("redraw");
});
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/olifolkerd/tabulator/master/tabulator.css">
<script type="text/javascript" src="https://cdn.rawgit.com/olifolkerd/tabulator/master/tabulator.js"></script>
</head>
<body>
<div id="example-table"></div>
</body>
</html>
Case 1 :
I might have to make a small change to make the parsing successful but I am pretty stuck here.
Case 2 :
A second though I had was to convert the JSON format to the one used in the first snippet. So, from a multidimensional JSON, I will have a flat one.
Convert this
{"headers":["Month","numbers"],"rows":[["January",124010],["February",545010]]}
to
{Month:"January", numbers:"124010"},
{Month:"February", numbers:"545010"}
Am I missing something? And if it is not possible to change the current script, is it worthy trying to convert the JSON format?
I'm assuming that the headers are fixed. If they are, it's just a simple case of looping through all of the rows and pushing them as a new object.
var unformatted = {
"headers": [
"Month",
"numbers"
],
"rows": [
[
"January",
124010
],
[
"February",
545010
]
]
};
var formatted = [];
for (var i = 0; i < unformatted.rows.length; i++) {
var row = unformatted.rows[i];
formatted.push({
Month: row[0],
numbers: row[1]
});
}
console.log(formatted);
As requested in the comments, if the headers are dynamic and may change in the future, you can use the below code.
var unformatted = {
"headers": [
"Month",
"numbers",
"another_column"
],
"rows": [
[
"January",
124010,
"Hello"
],
[
"February",
545010,
"World!"
]
]
};
var formatted = [];
for (var i = 0; i < unformatted.rows.length; i++) {
var row = unformatted.rows[i],
newObject = {};
for (var j = 0; j < unformatted.headers.length; j++) {
newObject[unformatted.headers[j]] = row[j];
}
formatted.push(newObject);
}
console.log(formatted);
Related
I am using Datatables and HighCharts. Please see my code below. I am not sure how to display this bar chart where Years are displayed in Y axis. I have added an image below to show how it looks like.
I am new to HighCharts, so I am not sure of all the functions. Thanks.
How can I get graph to show like this? I want years in Y axis. Thanks.
http://live.datatables.net/febayaxa/1/edit
$(document).ready(function() {
var table = $("#example1").DataTable();
var salary = getSalaries(table);
// Declare axis for the column graph
var axis = {
id: "salary",
min: 0,
title: {
text: "Number"
}
};
// Declare inital series with the values from the getSalaries function
var series = {
name: "Overall",
data: Object.values(salary)
};
var myChart = Highcharts.chart("container", {
chart: {
type: "column"
},
title: {
text: "Test Data"
},
xAxis: {
categories: Object.keys(salary)
},
yAxis: axis,
series: [series]
});
// On draw, get updated salaries and refresh axis and series
table.on("draw", function() {
salary = getSalaries(table);
myChart.axes[0].categories = Object.keys(salary);
myChart.series[0].setData(Object.values(salary));
});
});
function getSalaries(table) {
var salaryCounts = {};
var salary = {};
// Get the row indexes for the rows displayed under the current search
var indexes = table
.rows({ search: "applied" })
.indexes()
.toArray();
// For each row, extract the office and add the salary to the array
for (var i = 0; i < indexes.length; i++) {
var office = table.cell(indexes[i], 0).data();
if (salaryCounts[office] === undefined) {
salaryCounts[office] = [+table.cell(indexes[i], 1).data().replace(/[^0-9.]/g, "")];
}
else {
salaryCounts[office].push(+table.cell(indexes[i], 1).data().replace(/[^0-9.]/g, ""));
}
}
// Extract the office names that are present in the table
var keys = Object.keys(salaryCounts);
// For each office work out the average salary
for (var i = 0; i < keys.length; i++) {
var length = salaryCounts[keys[i]].length;
var total = salaryCounts[keys[i]].reduce((a, b) => a + b, 0);
salary[keys[i]] = total / length;
}
return salary;
};
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<meta charset=utf-8 />
</head>
<body>
<div id="container" style=" width: 100%; height: 400px;"></div>
<div class="container">
<table id="example1" class="display nowrap" width="100%"><thead>
<tr><th>Year</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th><th>2017</th><th>2018</th><th>2019</th><th>2020</th><th>2021</th></tr></thead>
<tr ><td> Data</td><td>3,823</td><td>3,823</td><td>3,954</td><td>3,959</td><td>3,955</td><td>3,956</td><td>3,843</td><td>3,699</td><td>3,472</td><td>3,551</td></tr></tbody>
</tbody></table>
I am going to assume you mean the x-axis (the horizontal axis) when you say that you want to use the years (from the table headings) from your DataTable for each bar's label in the chart.
You can access these table headings using the DataTables API and some jQuery.
Use this to get an array of table heading elements:
api.columns().header()
And then use $(element).html() to get the label (the year) from each heading.
There is a lot of code in your example in the question which does not appear to be relevant to the chart you want to create, so in the following example, I removed all of that. If it is needed, you can put it back.
$(document).ready(function() {
var tableData = [];
var tableCategories = []
var table = $("#example1").DataTable({
initComplete: function(settings, json) {
let api = new $.fn.dataTable.Api(settings);
// get the seris data as an array of numbers from the table row data:
api.rows().data().toArray()[0].forEach(function(element, index) {
if (index > 0) {
tableData.push(parseFloat(element.replace(/,/g, '')));
}
});
// get the x-axis caregories from the table headings:
api.columns().header().toArray().forEach(function(element, index) {
if (index > 0) {
tableCategories.push($(element).html());
}
});
}
});
var myChart = Highcharts.chart("container", {
chart: {
type: "column"
},
title: {
text: "Test Data"
},
xAxis: {
categories: tableCategories
},
series: [{
data: tableData
}]
});
});
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<meta charset=utf-8 />
</head>
<body>
<div id="container" style=" width: 100%; height: 400px;"></div>
<div class="container">
<table id="example1" class="display nowrap" width="100%">
<thead>
<tr>
<th>Year</th>
<th>2012</th>
<th>2013</th>
<th>2014</th>
<th>2015</th>
<th>2016</th>
<th>2017</th>
<th>2018</th>
<th>2019</th>
<th>2020</th>
<th>2021</th>
</tr>
</thead>
<tr>
<td> Data</td>
<td>3,823</td>
<td>3,823</td>
<td>3,954</td>
<td>3,959</td>
<td>3,955</td>
<td>3,956</td>
<td>3,843</td>
<td>3,699</td>
<td>3,472</td>
<td>3,551</td>
</tr>
</tbody>
</tbody>
</table>
The output looks like this:
If you do actually want the years labels to be displayed on the y-axis (with horizontal bars, instead of vertical bars) then you can change the chart type by changing this part of the chart...
chart: { type: "column" },
to this:
chart: { type: "bar" },
I would like my Plotly graph to update automatically every 1 seconds by reading data from an online CSV file.
This is what I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="graph"></div>
<script>
function read_data() {
d3.csv(
"https://docs.google.com/spreadsheets/d/e/2PACX-1vTkbRgvvBwM0tMheEziQC4ldtYoMVCgIek67Y5Lcjnu1WH0tTLLCzJPse-pL5OTR9U58Gk8VBD65L3u/pub?gid=0&single=true&output=csv",
function (data) {
processData(data);
}
);
}
function processData(allRows) {
console.log(allRows);
var x = [];
var y = [];
for (var i = 0; i < allRows.length; i++) {
row = allRows[i];
x.push(row["x"]);
y.push(row["y"]);
}
console.log("Y", y);
return y;
}
Plotly.newPlot(graph, [
{
y: [1, 2, 3],
mode: "lines",
line: { color: "#80CAF6" },
},
]);
var interval = setInterval(function () {
Plotly.restyle(
graph,
{
y: [[read_data()]],
},
[0]
);
}, 1000);
</script>
</body>
</html>
Although the y data is printed in the console, the plot is not updated.
My script is based on these two tutorials:
Streaming in JavaScript
Read CSV Data from an Ajax Call in JavaScript
Additional question: is there a way to automatically update the graph each time the data is updated in the CSV document? That is, without having to loop over each second.
In your code, read_data() returns undefined. It also schedules processData() to run later, and that function returns some data, but it was called by the JavaScript runtime which ignores this returned value.
You could stick the Plotly.restyle(... code in a function that processData calls, or you could stick that code inside processData. See the code sample below.
However, there's another issue here (watch the code sample below fail). This file can't be loaded by a browser page right now. Google sheets links like
https://docs.google.com/spreadsheets/d/e/2PACX-1vTkbRgvvBwM0tMheEziQC4ldtYoMVCgIek67Y5Lcjnu1WH0tTLLCzJPse-pL5OTR9U58Gk8VBD65L3u/pub?gid=0&single=true&output=csv no longer work in the browser as of about 18 months ago.
You'll need to use another method to get your data into a web page (see linked questions above for some suggestions).
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="graph"></div>
<script>
function read_data() {
d3.csv(
"https://docs.google.com/spreadsheets/d/e/2PACX-1vTkbRgvvBwM0tMheEziQC4ldtYoMVCgIek67Y5Lcjnu1WH0tTLLCzJPse-pL5OTR9U58Gk8VBD65L3u/pub?gid=0&single=true&output=csv",
function (data) {
processData(data);
}
);
}
function processData(allRows) {
console.log(allRows);
var x = [];
var y = [];
for (var i = 0; i < allRows.length; i++) {
row = allRows[i];
x.push(row["x"]);
y.push(row["y"]);
}
console.log("Y", y);
Plotly.restyle(
graph,
{
y: y,
},
[0]
);
}
Plotly.newPlot(graph, [
{
y: [1, 2, 3],
mode: "lines",
line: { color: "#80CAF6" },
},
]);
var interval = setInterval(read_data, 1000);
</script>
</body>
</html>
I'm using datatable to display predictions about future events. Among my columns I have "Day" "Hour" "Prediction" "Reality".
Prediction is always filled, but reality is only filled when the event happens.
I want to jump to the page corresponding to the current time. So I used jumpToData() on the date. With that, I have quick access to the last events of the current day but I still need to turn 4 or 5 pages if it's 9AM for example.
I think the easiest way to solve the problem is to jump to the first empty cell in the "Reality" column.
Have you any elements to do that ?
Thanks in advance for any help,
Thomas
Is that what you were trying to achieve?:
//Make up random chronological data to fill DataTable
var srcData = [...Array(300)].map((value, index) => {
let obj = {};
let today = new Date()
let randomDate = new Date(today.getFullYear(), today.getMonth(), today.getDate()-10, index);
obj.date = randomDate.toLocaleDateString();
obj.hour = index%24;
obj.prediction = Math.floor(Math.random()*1000);
obj.reality = randomDate < Date.now() ? obj.prediction+(3-Math.floor(Math.random()*6)) : '';
return obj;
});
//Define DataTables object
var dataTable = $('#forecasts').DataTable({
sDom: 'tp',
orderFixed: [[0, 'asc'],[1, 'asc']],
ordering: false,
data: srcData,
columns: [
{title: 'date', data: 'date'},
{title: 'hour', data: 'hour'},
{title: 'prediction', data: 'prediction'},
{title: 'reality', data: 'reality'},
]
});
$('#jumptoblank').on('click', () => {
//Search for empty cell
var emptyRowIndex = dataTable.rows().data().toArray().findIndex(row => row.reality == '');
//Go to the page, where necessary row is located
dataTable.page(Math.floor(emptyRowIndex/dataTable.page.info().length)).draw(false)
});
.dataTables_wrapper {width: 600px}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<body>
<button id="jumptoblank">Jump to blank reality</button>
<table id="forecasts"></table>
</body>
</html>
I'm totally new in flot. At first I want to display three chart(d1, d2, d3) data in the same page and after that when I click on new chart button first chart(d1) will hide and new chart(d4) will insert and three chart(d2,d3,d4) will show and continuing the process. But the problem is that graph is not displaying. If I use random data under a function then it is showing the graph like this but when I tried with different variables, the graph is not showing.
How can I fix this problem?
Here is my code:
<html>
<head>
<title>Graph</title>
<style>
div.placeholder {
width: 400px;
height: 200px;
}
</style>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript">
function getdata(){
var d1 = [[0,1],[1,4],[2,4],[3,8],[4,2],[5,11],[6,19]];
var d2 = [[7,1],[8,5],[9,4],[10,13],[11,2],[12,11],[13,19]];
var d3 = [[14,10],[15,4],[16,14],[17,8],[18,2],[19,1],[20,19]];
var d4 = [[21,4],[22,11],[23,18],[24,12],[25,1],[26,19],[27,8]];
var d5 = [[28,5],[29,14],[30,13],[31,2],[32,11],[33,9]];
}
$(document).ready(function () {
getdata();
var dataset1 = [{
label: "Day1",
data: d1,
points: { symbol: "triangle" }
}];
var dataset2 = [{
label: "Day2",
data: d2,
points: { symbol: "cross" }
}];
var dataset3 = [{
label: "Day3",
data: d3,
points: { symbol: "square" }
}];
var dataset4 = [{
label: "Day4",
data: d4,
points: { symbol: "diamond" }
}];
var dataset5 = [{
label: "Day5",
data: d5,
points: { symbol: "circle", color: "black" }
}];
for(var i = 1, j = 0; i < dataset.length, j < $('div.placeholder').length; i++, j++){
$.plot("div.placeholder:eq("+j+")"),[dataset("+i+")];
}
function update() {
$('div.placeholder:visible:first').hide();
$('div.placeholder:last').after($('<div>').addClass('placeholder'));
$.plot("div.placeholder:last", [getdata()]);
}
$('#btn').on('click', update);
});
</script>
</head>
<body>
DAY 1<div class="placeholder"></div>
DAY 2<div class="placeholder"></div>
DAY 3<div class="placeholder"></div>
<input id="btn" type="button" value=" New Chart " />
</body>
</html>
There are multiple of issues with your code, most of which are not specific to Flot:
The d1... arrays are local to the getdata() function and not defined outside of it where you try to use them
You use dataset in your for loop like an array, but there is not such variable defined
Your call of the plot() method makes no sense, you can't access variables like this: $.plot("div.placeholder:eq(" + j + ")"), [dataset("+i+")];
The call to plot() in the update() function tries to use the raw data, not you labeled data (but fails because of point 1 above).
Here is a fiddle with most of the issues fixed. It still does not handle the titles above the charts when updating and gives errors after updating more then two times (when your data is used up).
I want a highstocks chart that can plot multiple streams from CSV files. My csv data looks like:
TIMESTAMP,DATA
2013-07-25 17:52:13.490,98425702
2013-07-25 17:52:34.840,382307
2013-07-25 17:52:55.900,380769
2013-07-25 17:54:37.380,500000
2013-07-25 17:54:47.910,98360155
2013-07-25 17:54:58.440,430000
2013-07-25 17:55:08.970,282307
2013-07-26 19:46:30.950,116923
Javascript in my index.html:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/data.js"></script>
<script type="text/javascript">
// Create the chart
$(function() {
var magx = [];
$.get('magx-11.csv', function(csv1) {
var lines = csv1.split('\n');
for (i=0; i<lines.length; i++) {
var elements = lines.split(',');
for (j=0; j<lines.length; j++) {
magx.push([ elements[j] ])
}
}
console.log(magx);
});
$('#container').highcharts('StockChart', {
xAxis: {
type: 'datetime'
},
title: {
text: 'Data'
},
series: [{
name: 'Mag X',
data: magx,
}]
});
});
</script>
With:
<body>
<div id="container" style="width: 1200px; height: 400px; margin: 0 auto"</div>
</body>
So, I'm trying first figure how I need to parse the data. I've seen various references on splitting for new line, and then on the ',' delimiter. But from logging output, I don't think the data is being passed into the next function that I would like some help with please.
This has little effect too:
magx.push([ parseFloat(elements[j])
I would like to be able to extend this for multiple csv files too.
(I'm ignoring the incorrect datetime handling there, for now).
I've already seen: Reading data from CSV with highstock and Highchart from CSV file with JavaScript. Many thanks in advance!
Trick was to investigate the JSON formats, then the Data.parse() formats. Documentation eh?
Also have "Highcharts error #15: http://www.highcharts.com/errors/15
highstock.js:13:195". My data is date-ordered, isn't that good enough?
Now need to convert this to multiple csv's per chart now.
$(function() {
var magx = [];
$.get('stuff.csv', function(csv1) {
var lines = csv1.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
if(lineNo > 0) {
var ds1 = items[0].split(' ');
magx.push( [ Date.parse(ds1[0] + "T" + ds1[1]) , parseFloat(items[1]) ] );
};
});
var options = {
xAxis: {
type: 'datetime'
},
exporting: {
enabled: true
},
series: [{
name: 'Data 1',
data: magx
}]
};
var chart = $('#container').highcharts('StockChart', options);
});
});