Can I save a state in amchart graph? - javascript

I was task to add additional feature that can save its state after a user toggle the legend items when he logged out and the state should be the same when he logged in. Is it possible to do it in amchart?

AmCharts doesn't provide any built-in solutions to save/load chart state, so you need to write your own custom code. As #Abhijit mentioned, you can use localStorage to accomplish this. I already provided a sample solution in our support forum using the legend events but here it is again for you and anyone else who is looking:
AmCharts.makeChart("...", {
// ...
graphs: [{
// ...
//get hidden value from localStorage. needs to cast stored string "1" or "0" to a number, then casted to a boolean if a value exists
hidden:
localStorage.carsHidden !== undefined
? !!+localStorage.carsHidden
: false,
},
// repeat
],
legend: {
// ...
listeners: [
{
event: "showItem",
method: saveState
},
{
event: "hideItem",
method: saveState
}
]
}
});
function saveState(e) {
localStorage[e.dataItem.valueField + "Hidden"] =
e.type === "hideItem" ? 1 : 0;
}
Demo

Related

Save column header filter in ag-grid in angular

I am working on an existing application in which they have used ag-grid library for angular for most of the grids that they have in their application. Now the ag-grid gives the functionality to filter the grid based on a column value by using the filter option in the column header. I am giving a link to that https://www.ag-grid.com/angular-data-grid/filtering-overview/. I wanted to implement a feature in which we can save the filter keyword that the user is searching for and when he comes back to the same grid the previous filter is already applied. for example https://plnkr.co/edit/?p=preview&preview here we can pick athlete and filter that by going to the column and searching a value so what I want is that if I search 'abc' I should be able to preserve that. is there a way to do that ? I am giving the colDef for the link above
this.columnDefs = [
{ field: 'athlete' },
{
field: 'age',
filter: 'agNumberColumnFilter',
maxWidth: 100,
},
{
field: 'date',
filter: 'agDateColumnFilter',
filterParams: filterParams,
},
{
field: 'total',
filter: false,
},
];
this.defaultColDef = {
flex: 1,
minWidth: 150,
filter: true,
};
}
Any kind of help is appreciated, thanks :)
You can save the filter applied by using the Grid Event onFilterChanged. Inside here you can get the filterModel by calling api.getFilterModel(). In the plunkr below we are showcasing this by saving the filter model to local storage and restoring it by applying it inside the Grid Event onFirstDataRendered
onFilterChanged(params) {
const filterModel = params.api.getFilterModel();
localStorage.setItem('filterModel', JSON.stringify(filterModel));
}
onFirstDataRendered(params) {
const filterModel = JSON.parse(localStorage.getItem('filterModel'));
if (filterModel) {
params.api.setFilterModel(filterModel);
}
}
See this implemented in the following plunkr
You may also find the following documentation pages relevant:
Saving and Restoring Filter Models
Grid Events
To apply existing filters to ag-grid, it can be done using by setting up filterModel on gridApi.
gridApi.getFilterInstance("fieldName").setModel({
"filterType":"equals", //type of filter condition
"type":"text", //Type of column [text/number/date]
"filter":"value" //Value need to be applied as filter.
})
Similarly onFilterChanged event you can capture changes and apply filter dynamically.

is there any way to disable angular multiselect(cuppa labs) dynamically

I am using multi select dropdown(cuppa labs) from this link https://www.npmjs.com/package/angular2-multiselect-dropdown But I am unable to disable the dropdown.
initially if i set In settings disabled:true is working fine but I want disabled:false initially then i need to change disabled:true after the success response from the api.
documentDropdownSettings = {
text: "Required Document",
badgeShowLimit: 3,
enableSearchFilter: true,
maxHeight: 150,
classes: "myclass custom-class",
showCheckbox: true,
enableFilterSelectAll: false,
disabled:false
}
this.taskService.getTaskDetails(this.taskId, (success) => {
this.documentDropdownSettings.disabled=true
}, (error) => {
enter code here
})
I want to make the dropdown disabled dynamically.
I believe the issue is that the the settings object is immutable.
you need to change the object reference not its properties for the binding to take effect.
doing your change, and changing the reference will probably work.
something like :
this.taskService.getTaskDetails(this.taskId, (success) => {
this.dropdownSettings['disabled'] = true;
this.dropdownSettings = Object.assign({}, this.dropdownSettings);
}, (error) => {
enter code here
})
P.S their official approach seems to be a bit awkward, they recreate the object for each settings change in their documentation..

Clean input before change

I'm using handsontable 0.35.1 with a float column. Aim is to allow users to copy paste from spreadsheets (and csvs opened in excel). Problem is, that it comes with some junk that i need to get rid of. Some examples of inputs which are not correctly validated are:
1,000.00
USD 100.00
'10000.00 ' //note there are trailing spaces
I would like to find a way i can manipulate input right before it's written. The only way i've found so far is with beforeChange, but the problem is validation. The system changes input, but seems to have validated already. If i blur in and blur out again, it works.
Here's the fiddle. Steps to reproduce: Enter number a123 -- which should be corrected to 123 and validated as a correct number.
I've tried using beforeValidation instead, but it doesn't work as i intend.
You can use beforePaste callback to clean your input
options = {
columns: [
{ type: 'date' },
{ type: 'numeric', numericFormat: {pattern: '0,0.00'} }
],
colHeaders: ["Date", "Float"],
beforePaste: (data, coords) => {
data.forEach((col, colIndex) => {
col.forEach((row, rowIndex) => {
let value = row.trim().replace(/[^0-9\.\-\+]/g, '')
data[colIndex][rowIndex] = value
})
})
return true
},
}
$('#hot-sheet').handsontable(options)
here is fiddle https://jsfiddle.net/xpvt214o/348195/
Note: you can't create new data array, you've to update data array instead of creating new.
I updated the example https://jsfiddle.net/fma4uge8/29/ this works all in 1 function.
function trimFloat(value) {
return value.trim().replace(/[^0-9\.\-\+]/g, '');
}
options = {
columns: [
{ type: 'date' },
{ type: 'numeric', numericFormat: {pattern: '0,0.00'}, trimWhitespace: true }
],
colHeaders: ["Date", "Float"],
beforeChange: function(changes, source){
let that = this;
_.each(changes, function(change){
if (_.isString(change[3])) {
let value = trimFloat(change[3]);
//prevent endless loop
if (value !== change[3]) {
change[3] = trimFloat(change[3]);
that.setDataAtCell(change[0], change[1], change[3]);
}
}
})
}
}
$('#hot-sheet').handsontable(options)

Is it possible to add more options to jstree after instantiate it?

I have a page where i'm using jstree and i would like to know if it's possible to add more options after instantiate it. In that case i want to add the dnd plugin depending if the user loged has that role assigned.
That's how i instantiate it:
$treeview.jstree({
"core" : {
"check_callback" : function (operation, node, node_parent, node_position) {
}
,"multiple":false
}
,"plugins" : [ "contextmenu","state" ]
,"dnd": {
copy : false
}
,"contextmenu": {"items": rewriteItems}
,"state": { "key":$treeview }
});
You must add the plugins that you need when jstreeis going to be instantiate but exists a way that can control if the nodes are draggable or not.
Your code will look like this:
var isDraggable = true;
$treeview.jstree({
"core" : {
"check_callback" : function (operation, node, node_parent, node_position) {
}
,"multiple":false
}
,"plugins" : [ "contextmenu","state","dnd" ]
,"dnd": {
copy : false,
is_draggable:function() { return isDraggable; }
}
,"contextmenu": {"items": rewriteItems}
,"state": { "key":$treeview }
});
You need to create a boolean variable isDraggable where you will keep true/false depending if the user is able to do that action. Then when you run your code and if the user is not able to drag the nodes the value will be false and he won't be able to drag it.

how to save a SlickGrid column order (js)?

I have two grids in my application.
var columns1 = [
{
name: "Address",
field: "address"
id: "address",
sortable: true
}
]
var columns2 = [
{
{
name: "Rating, in %",
field: "rating"
id: "rating_percent",
resizable: false
}
]
They are absolutely independent from each other. Also, I have some grid events descriptions in another js file.
grid.onColumnsReordered.subscribe(function (e, args) {
_this.updateHeaderRow();
// here
});
When user changes the columns order, then I want to save this order. Should I change (overwrite) the DOM elements, I mean column1 and column2?
So question: how can I save the columns order?
njr101's answer (using store.js) is great, but note: store.js cannot store functions (i.e. for editors, formatters), so once you store.get() the columns, you'll need to add the functions back, using your original stock "columns" array:
if (store.get('gridColumns')) {
grid.setColumns(store.get('gridColumns')); // Restore settings if available
grid.getColumns().forEach(function(ch) { // Re-create editor and formatter functions
var result = $.grep(columns, function(e){ return e.id == ch.id; });
if (result[0]) {
ch.editor = result[0].editor;
ch.formatter = result[0].formatter;
}
});
}
I have done this before and the easiest way I found was to store the columns in local storage. I use the store.js library which makes this pretty simple.
grid.onColumnsReordered.subscribe(function (e, args) {
store.set('gridColumns', grid.getColumns());
});
When you want to restore the columns (e.g. when the user returns to the page) you can just call:
grid.setColumns(store.get('gridColumns'));

Categories