I have a table with data columns defined like this:
var table = myEl.DataTable({
paging: false,
searching: true,
info: false,
ordering: true,
autoWidth: false,
columns: [
{data: 'Name', name: 'Name'},
{data: 'Time', name: 'Time'}
]
});
The data that feed this table look like this:
{
Name: "Bob",
Time: "Wed Aug 26 2015 16:09:52 GMT-0500 (Central Daylight Time)",
TimeTwo: "16:09:52"
}
So DataTables stores the entire object and displays Name and Time.
How can I switch the data source as defined in "columns" in initialization to using TimeTwo rather than Time? (after the table gets data fed into it)
Simply: The table loads Name and Time, but how can I switch it to using TimeTwo after initialization? Switch it dynamically?
function switchDataSourceForTime(){
// what to do...?
}
You can make both columns are rendered but only one is shown. Something like this:
<div>
Toggle column:
<input id="btn" type="button" value="change column value"></input>
</div>
<br>
<div>
<table id="table"></table>
</div>
var data =
[
{
Name: "Bob",
Time: "Wed Aug 26 2015 16:09:52 GMT-0500 (Central Daylight Time)",
TimeTwo: "16:09:52"
},
{
Name: "Tom",
Time: "Wed Aug 25 2015 17:41:23 GMT-0500 (Central Daylight Time)",
TimeTwo: "17:41:23"
}
];
var table = $("#table").DataTable({
data: data,
paging: false,
searching: true,
info: false,
ordering: true,
autoWidth: false,
columns: [
{data: 'Name', name: 'Name'},
{data: 'Time', name: 'Time'},
{data: 'TimeTwo', name: 'TimeTwo'}
]
});
table.column("2").visible(false);
$('#btn').on('click', function(e){
e.preventDefault();
var columnTimeTwo = table.column("2").visible(!table.column("2").visible());
var columnTime = table.column("1").visible(!table.column("1").visible());
});
You can see the code running on fiddle
Related
I have an object
{
YHOO: [
{
date: Fri Apr 12 1996 00:00:00 GMT-0400 (EDT),
open: 25.25,
high: 43,
low: 24.5,
close: 33,
volume: 408720000,
adjClose: 1.38,
symbol: 'YHOO'
},
...
{
date: Thu Nov 14 2013 00:00:00 GMT-0500 (EST),
open: 35.07,
high: 35.89,
low: 34.76,
close: 35.69,
volume: 21368600,
adjClose: 35.69,
symbol: 'YHOO'
}
],
GOOGL: [
{
date: Thu Aug 19 2004 00:00:00 GMT-0400 (EDT),
open: 100,
high: 104.06,
low: 95.96,
close: 100.34,
volume: 22351900,
adjClose: 100.34,
symbol: 'GOOGL'
},
...
{
date: Thu Nov 14 2013 00:00:00 GMT-0500 (EST),
open: 1033.92,
high: 1039.75,
low: 1030.35,
close: 1035.23,
volume: 1166700,
adjClose: 1035.23,
symbol: 'GOOGL'
}
],
...
}
How do I alter this object so it becomes an array with
[
{
date: Fri Apr 12 1996 00:00:00 GMT-0400 (EDT),
YHOO: 33,
GOOG: 100.34
},
...
]
I know it can become a problem that they potentially not have the same dates, so I guess I should just say that one of the companies have the right dates, and then merge the other companies to these dates and omit those dates that are not in the already selected company.
I guess I should do something like
var data = [];
obj.YHOO.forEach((quote) => {
data.push({
date: quote.date,
YHOO: quote.price,
GOOG: ?
});
});
and instead of the question mark, I can loop through all the objects in array.GOOG and check if the date matches quote.date.
The big problem is that this seems quite computational heavy and the names of the companies can vary, so I cannot guarantee that YHOO and GOOG are present.
I am not very conversant with javascript.I have a jquery datatable loaded using an ajax call as follows:
$('#table').dataTable( {
"processing": true,
"serverSide": true,
"ajax": "http://api.mywebsite.com/report",
"columns": [
{ "data": "date" },
{ "data": "ordernumber" },
{ "data": "totalsales" },
{ "data": "subtotal" }
]
} );
I want to load the dataTable together with a Google chart but I have no clue how to get the data object from above dataTable initialization to the the Google code below and trigger the same routine every time the datable is re-populated:
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'Sales'],
['20 Jan - Feb 04', 10340 ],
['20 Feb - Mar 05', 23470 ],
['20 June - Dec 06', 450 ],
['20 Mar - Aug 07', 3030 ]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Is there a way I can replace below
`['Date', 'Sales'],
['20 Jan - Feb 04', 10340 ],
['20 Feb - Mar 05', 23470 ],
['20 June - Dec 06', 450 ],
['20 Mar - Aug 07', 3030 ]`
with something like:
dataTable.data[date]
This is quite easy. I notice you are using dataTables 1.10.x, and then you can use the API to iterate over each row, and build up a data array google visualization will use :
$("#buildChart").click(function() {
var dataArray = [];
dataArray.push([ 'date', 'totalsales' ]);
table.rows().data().each(function(value, index) {
dataArray.push([ value.date, value.totalsales ]);
});
drawChart(dataArray);
});
and the called drawChart function is pretty much like the one in your question :
function drawChart(dataArray) {
var data = google.visualization.arrayToDataTable(dataArray);
var options = {
title: 'dataTables to google visualization'
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
see demo using your data -> http://jsfiddle.net/9wvvh8sk/
columnValue = columnValue.get('Name');
give me Name of the release
but not able to read ReleaseDate
columnvalue1 = columnValue.get('ReleaseEndDate');
this gives me error
Uncaught TypeError: undefined is not a function
This is my release object
columnValue value
j {phantom: false, internalId: "ext-record-2", raw: Object, data: Object, modified: Object…}
data: Object
CreationDate: null
GrossEstimateConversionRatio: ""
Name: "Release 24"
Notes: ""
ObjectID: 12788620953
PlannedVelocity: null
Project: ""
ReleaseDate: Wed Sep 17 2014 10:29:59 GMT+0530 (India Standard Time)
ReleaseStartDate: Wed Jul 23 2014 10:30:00 GMT+0530 (India Standard Time)
RevisionHistory: ""
Release object has ReleaseStartDate and ReleaseDate. There is no ReleaseEndDate in WS API.
Use ReleaseDate.
Try this example of a simple grid from the guide. Replace model: 'userstory' with model: 'release', and use config:
columnCfgs:[
'Name',
'ReleaseStartDate',
'ReleaseDate'
]
You should see ReleaseDate.
Then try custom data example from the grid that requires explicit fetching of ReleaseDate. Modify that example to display a grid of releases instead of a grid of user stories. You may do something like this to create a custom column Release Dates based on values of both ReleaseStartDate and ReleaseDate:
launch: function() {
Ext.create('Rally.data.wsapi.Store', {
model: 'release',
autoLoad: true,
listeners: {
load: this._onDataLoaded,
scope: this
},
fetch: ['Name', 'ReleaseStartDate', 'ReleaseDate']
//fetch: ['Name', 'ReleaseStartDate']
});
},
_onDataLoaded: function(store, data) {
var records = _.map(data, function(record) {
console.log(record);
return Ext.apply({
ReleaseDates: record.get('ReleaseStartDate') + " -- " + record.get('ReleaseDate')
}, record.getData());
});
this.add({
xtype: 'rallygrid',
showPagingToolbar: false,
showRowActionsColumn: false,
editable: false,
store: Ext.create('Rally.data.custom.Store', {
data: records
}),
columnCfgs: [
{
text: 'Name',
dataIndex: 'Name'
},
{
text: 'Release Dates',
dataIndex: 'ReleaseDates',
flex: 1
}
]
});
}
This should also display ReleaseDate as long as fetch includes ReleaseDate fetch: ['Name', 'ReleaseStartDate',ReleaseDate']
The problem is likely to be related to your code. Start with working examples as above and see if ReleaseDate is returned.
I have the following
<div id="chart"></div>
<script src="js/flot/jquery.flot.js"></script>
<script src="js/flot/jquery.flot.tooltip.min.js"></script>
<script src="js/flot/jquery.flot.resize.js"></script>
var sessions = [
[1418706000000, 14813],
[1418792400000, 39580],
[1418878800000, 51193],
[1418965200000, 66700],
[1419051600000, 108737],
[1419138000000, 101081],
[1419224400000, 94449],
[1419310800000, 109039],
[1419397200000, 92329],
[1419483600000, 68942],
[1419570000000, 75391],
[1419656400000, 120016],
[1419742800000, 132495],
[1419829200000, 103469],
[1419915600000, 88940],
[1420002000000, 59938],
[1420088400000, 72359],
[1420174800000, 74663]
];
var users = [
[1418706000000, 2632],
[1418792400000, 9588],
[1418878800000, 9273],
[1418965200000, 10839],
[1419051600000, 14948],
[1419138000000, 11226],
[1419224400000, 13394],
[1419310800000, 10493],
[1419397200000, 8482],
[1419483600000, 2375],
[1419570000000, 5783],
[1419656400000, 10068],
[1419742800000, 8288],
[1419829200000, 5423],
[1419915600000, 4866],
[1420002000000, 1862],
[1420088400000, 5560],
[1420174800000, 1257]
];
function doPlot(position) {
$.plot($("#chart"), [{
data: sessions,
label: "Sessions"
}, {
data: revenue,
label: "Revenue",
yaxis: 2
}], {
xaxes: [{
mode: 'time'
}],
yaxes: [{
min: 0
}, {
alignTicksWithAxis: position == "right" ? 1 : null,
position: position
}],
legend: {
position: 'sw'
},
grid: {
hoverable: true
},
tooltip: true,
tooltipOpts: {
content: "%s for %x was %y",
xDateFormat: "%y-%0m-%0d",
onHover: function (flotItem, $tooltipEl) {
}
}
});
}
doPlot("right");
Thhis displays figures for both sessions and users on dates that there isn't even data for. The last date that there is data for is Dec 27th. Yet, this line graph shows data for up until Jan 2nd.
Here is a working example here
Any ideas?
According to your last data entry in each array element time = 1420174800000, so:
var date = new Date(1420174800000);
// output "Fri, 02 Jan 2015 05:00:00 GMT"
console.log(date.toGMTString());
I converted your data to dates:
date = new Date(sessions[i][0])
It contains dates between Dec 16 2014 and Jan 02 2015. You can see it in this fiddle.
When you fill your arrays, you should convert your dates to numbers simply with:
sessions[i] = [Number(date), value];
I'm not sure how you meant Date('D, M j'), I assume it's a string like "Date(month,day,year)". An example of converting this kinf of json to plottable data: in this other fiddle.
Actually, I reversed the day and month, but you get the idea. :)
I am using ExtJS Forms.
My form code is as follows:
Ext.create('Ext.form.Panel', {
width: 600,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: "Specimen",
name: "Specimen"
}, {
.
.
.
}, {
fieldLabel: "Time Stamp",
name: "timestamp",
xtype: "timefield",
allowBlank: false
}],
buttons: [{
text: 'Save',
handler: function() {
var form = this.up('form').getForm();
var fieldValuePair = form.getFieldValues();
}
}],
renderTo: "ui"
});
For some special purpose, I want to get the id/value pairs in json format, which I have acheived using the .getFieldValues() function.
The problem is, when I press the "Save" button, the "fieldValuePair" variable in the handler function correctly gets all the values in json format except for the fields that have the "timefield" or "datefield" xtypes.
I have searched the web, but didn't come across any solution.
Any idea what may be the problem...?
Try with:
handler: function () {
var form = this.up('form').getForm();
var formValues = form.getValues(); // instead getFieldValues
console.log(formValues);
}
this way it returns:
date "12:30 AM"
and not:
date
Date {Tue Jan 01 2008 00:15:00 GMT+0100 (Central European Standard Time)} // this being another object
cheers!