I am using amcharts (MapArea within DataLoader) to fetch data as json and render the map. However, I also want to send a dynamic title/subtitle in json (e.g. Total Population: X), which I'd want to render in the Map. Is it possible? I couldn't find the correct property to send it in, in https://docs.amcharts.com/3/javascriptmaps/MapArea
Assuming you're referring to the map title, the dataLoader doesn't allow you to set the title directly as it only loads the mapData properties in the dataProvider (areas, lines, map type). You can store extra data in your JSON and use the dataLoader's complete callback to assign what you want to the chart instance itself.
For example, if you set a custom title property in your JSON response like so:
{
"map": "/* your map here */",
"title": "Your title text here",
// other properties omitted
}
You can add that title text in the complete callback like so:
"dataLoader": {
"url": "/* your json endpoint */",
"complete": function(map) {
map.addTitle(map.dataProvider.title);
}
},
Demo
Related
I want to export my datatable as CSV file. Unfortunately the Order History returns [object Object] value in CSV File. I have tried by looking this forum https://datatables.net/forums/discussion/50304/datatable-is-showing-object-object-in-columns#Comment_133450 but I'm not sure how should apply on my code.
Below the csv file, that give output [object Object] for Order History.
As for the datatables, it return the value that I wanted.
Here's my code: LIVE JS BIN DEMO
The Server_Processing.php JSON
{
"draw": 1,
"recordsTotal": 238633,
"recordsFiltered": 183514,
"data": [
[
"6789",
"North City"
],
[
"5325",
"South City"
]
]
}
Output console.log(result) for fetch_total.php ajax call
{"data":[[6]]}
{"data":[[1]]}
Basically I've pass the ID_No value to ajax call, and it will return the readable value to the cell.
I've tried by using JSON.stringify to the additionalData, it still return [object Object] value when I export as CSV file.
Any help would be greatly appreciated
Solution
The simplest way to fix this is to add an exportOptions section to your DataTable buttons option.
So, instead of this:
buttons: [ 'csv' ],
you can use this:
buttons: [
{
extend: 'csv',
exportOptions: {
format: {
body: function ( inner, rowidx, colidx, node ) {
return node.innerText;
}
}
}
}
],
And you can repeat the { extend: ... } section for additional buttons (e.g. Excel).
This logic ensures you take the value loaded into the DOM node (the HTML table cell) instead of the value stored in the DataTable (an object).
Explanation
In your logic, you are using this:
"createdCell": function(cell, cellData, rowData, rowIndex, colIndex) { ... }
This is documented here.
The key point is:
cell: The TD node that has been created.
In other words, this <td> element is what you see displayed in the web page - the HTML. It is not what is stored in the underlying DataTable (which is the createdCell function used to create the contents of that <td> element).
So, when you try to export your data, DataTables will use the data it has stored in its internal data structures. It does not use the data you added to the HTML table.
My exportOptions function solves that by telling DataTables to look at the data in the HTML table directly (node.innerText) instead of using its internal data.
This is a very basic solution. It looks in every <td> cell in the HTML table, not just the third column. In your case, this is probably fine. But you may need to refine this, if there are other cases where you do not want to use the cell contents.
Also, I agree with the comments made in the question by #mark_b:
You're making a separate Ajax call for each row of your data in order to populate the Order History column? Surely there is a more efficient way to get all the data you need in a single request?
I have a form which is built as a directive. I am providing the data for layout in my controller.
MyController.js
[{
"type":"selectbox",
"name":"name_one",
"label":"Name One"
}]
This data is then passed to my form_directive which then loads the template.
Then I am getting the actual data to be populated from an ajax call, inside MyController.js
eg:
$http.get('url/location').success(function(data) {
}).error(function(data) {
});
The data that is coming from the ajax will be like this:
[{
"id":"090986735",
"name":"option_1"
},{
"id":"78645679",
"name":"option_2"
}]
Now my question is how to bind this data to the selectbox?
Please note that there will be many such controls. But I have shown only one select box
Try to change the model of select.
https://docs.angularjs.org/api/ng/directive/select - the example with colors should be useful for you.
Is it possible to identify on a kendo UI grid which field was altered on a row edit?
Right now I am sending the entire row to the server that was changed. I would like to send
the request to the server to also include a variable holding the name
of the field that was edited.
Is something like that supported by kendo or
is there a work around for that?
This is not supported out of the box. However the grid API should allow this to be implemented. Check the edit and save events. In there you can listen to changes of the model instance which is currently being edit. Here is a quick example:
$("#grid").kendoGrid({
edit: function(e) {
e.model.unbind("change", model_change).bind("change", model_change);
}
});
function model_change(e) {
var model = this;
var field = e.field;
// store somewhere the field and model
}
Let´s say I have some sort of datagrid and I want to add a couple chained filters like in this site:
http://www.yelp.com/search?find_desc=bar&ns=1&find_loc=Minneapolis%2C+MN
(sort by,distance,price etc).
Each time a user clciked in a filter link it will update the content of datagrid accordingly. But I would also need to update the links in other filters to take account of the changes. Ex: if i change the order field I need to add/update ?order_field=x in all the other filters links.
What you think is the best way to implement such scenario?
Should i create a function that, when a filter link is clicked, it update the query string params of all the other filters? Or use hidden fields to record the selected option in each filter?
I would like a reusable solution if possible.
Since the data is loading via AJAX, there shouldn't be any links to update - at least not if you mean anchor tags <a>. You don't even need to store the filters in a hidden field.
I would store all the filters as a JSON object. Depending on how your API is set up, you may have to convert the JSON object to something usable by your API or you may even be able to pass on the JSON object directly in the $.ajax request.
This sample code assumes you have a textbox with id="price" in the markup. I intentionally left convert_filters_to_parameters blank because you didnt provide any details as to your API. jQuery will in turn serialize those parameters into a GET or POST request before it sends them out.
var filters = {
distance:null,
price:null,
sortBy:'distance'
}
//this assumes you have a textbox with id="price"
$('#price').changed(function()
{
filters.price = $(this).val();
refresh_data();
});
function refresh_data()
{
var parameters = convert_filters_to_parameters(filters);
$.ajax('/my_api',
{
//i left out a lot of properties here for brevity
data: parameters,
success: function(response) { alert(response); }
});
}
I can see how to create a jqGrid link using:
colModel: [ {name:'myname',
formatter:'showlink',
formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit'}
This creates a request like /someurl.php?id=XX&action=edit and the display text will be the value of myname.
But in our case we don't need the myname text - our display text will be hard coded. We don't want to have to pass any additional data down in our JSON request - but it seems you need a JSON attribute for each column. How can we have a link without the add'l JSON column?
The formatter 'showlink' like all other formatter are used to format the data loaded in jqGrid from server or from the local data. So in case of your example you will not have 'myname' text (the column name) in the link but the cell value from the grid.
So if you want to use predefined formatter 'showlink' you have to fill the column data with the text which want to see in the link. You can do this either inside of your JSON data or filling/overwriting the text after the page are loaded for example inside of loadComplete event handle:
loadComplete: function() {
var grid = $("list");
var ids = grid.getDataIDs();
for (var i = 0, idCount = ids.length; i < idCount; i++) {
grid.setCell(id, 'myname', 'My text for link');
}
}
You can use also custom formatter and custom unformatter instead of 'showlink' predefined formatter. Then you can define the text of link like you want without filling any data in the grid.