I am building a visualization consisting of a dateslider (jQDateRangeSlider), 6 drop downs and a trendgraph (using highcharts.js)
So there are in total 7 filters( 6 drop downs + dateslider ) according to which the dataset changes and the chart dynamically changes for each selection.
But, there are many combinations(of selections) for which there is no data.
In this case, I would like to display all the filters (dateslider+ dropdowns) and instead of chart, I would like to display " No data present " or any text instead of data
OR
If possible, I could also display the charts with values-0 for the entire range (although in this even the range is not defined as there is no dataset, so I can take default entire range)
For the first idea, I was trying:
function printpgtyp(data)
{
console.log(data);
if (data.length > 0)
{
dataset = data;
p(dataset);
}
else
{ q(); }
}
function q()
{
document.write(" Unavailable data ");
}
function p(data)
{
//All my visualization code
}
So, this works but it takes me to another page and shows the text, I don't want this.
I would like to view all my filters and render a text message saying this selection has no data, so that the user can select a selection which will have data and continue with the visualization
Is there a way to do this?
Any suggestions will be highly appreciated.
Instead of document.write, add the text to a div element:
function q()
{
var div = document.getElementById("elementId");
div.innerHTML = "this selection has no data";
}
Have you seen noData plugin for Highcharts? In case of empty dataset just call series.setData([]) to remove previous points.
Related
I want to start by saying that I am by no means an expert in JavaScript, so apologies in advance if I am missing something obvious.
Example:
I'm trying to create a custom tooltip for column A. Using the data from another cell as the parameter for the output of column A's tooltip.
{title: "title", tooltip: function(cell) {return anotherfunction(cell)}...
When passing 'cell' through as a parameter, it's possible to view the information in the rest of the row console.log(cell._cell) but from what I've discovered, there's no way of accessing the rest of the data.
This is a code pen of the issue that I'm having (i've commented out the console.log(cell._cell.value) in the example, as this will make the table fail to render. So, looking at the browsers console, it's possible to see the data that is returned from console.log(cell._cell).
I've tried to use Tabulators cell.getData(), cell.getRow(), cell.getColumn() etc (and a load of others) but each results in an error.
Codepen
https://codepen.io/lukeorriss/pen/yLzMapg
If someone could please point me in the right direction for accessing the data in another row from a tooltip function, this would be great. Thank you all, in advance.
Tabulator use 2 types of definitions for tooltip .
ColumnComponent (Header Cell)
Cell (Data Cell)
So You have to put a condition for your formatTooltip function
function formatTooltip(cell) {
// Need to open browser console log to view this.
if (cell._cell) {
let { name, email, address } = cell.getData();
return `You are ${name}, your email is ${email} and address is ${address}`;
} else if (cell.type === "ColumnComponent") {
return cell.getField();
}
}
See My Codepen
is it possible to search data from json file and display it in a table format? ( I only want the table to show up when i hit the search button )
Would appreciate the help if someone could teach me how or give me a link as
I couldn't find it anywhere. All i can find are situations where the table is already there to begin with
You can basically make use of $filter to filter out records based on the input provided to the search box and display table only if final result has records. I have just used sample json data. In your case data would be coming from file.
vm.searchData = function() {
if (vm.searchText.length <= 0) {
vm.finalData = [];
}
else{
vm.finalData = $filter('filter')(vm.jsonData, { id: vm.searchText});
}
}
Working JSFiddle
I'm currently looking for a way to add a filter function to a list in SharePoint, which filters the lists content via checkbox selection.
This little mockup might help to understand what I'm talking about:
The idea is to have a normal SharePoint custom list on the right and a checkboxlist on the left side, which will be generated dynamically from the content of the list -> One column is a "filter group" and all the field contents are the filter values.
When selecting one or multiple values on the left side, the items in the list should instantly be filtered accordingly (ajax, without reloading the page).
For example in the mockup, selecting "New York" and "Blue" would only show the item "Steve's Car".
You now, like a product filter in almost every online shop and so on.
How can that be achieved? Would be awesome if this could be included in my solution package (which includes other stuff in C#/jQuery already).
I'm new to frontend customization in SharePoint, but I'm sure there's a way :-)
Edit: I'm using SP2016 by the way.
Pandora!
As i understand it, your first question is how you can dinamically get values for left side filter. I see there two ways: first way, you can build caml query and get items from list; second way, you can use ctx.ListData, which sharepoint initialize by itself and in ctx.ListData.Row (array of items) process items and get unique field values. Note, that ctx.ListData.Row contains only items loaded in list view on the page.
For list filtration you can concat filter link for hash of the page. Example: "?List={ListID}&View={ViewID}&FilterField1=Color-FilterValue1=Blue". Try to filter columns on list and you will see url modification. ListID and ViewId you can retrieve by ctx.listName and ctx.view.
And then pass it in function MyRefreshPageToEx. List will be filtered.
More list filtration info
function FilterList(){
var tableId = $(".ms-listviewtable").attr("id");
var filterUrl = "?List={ListID}&View={ViewID}&FilterField1=Color-FilterValue1=Blue";
MyRefreshPageToEx(tableId, filterUrl, false);
}
function MyRefreshPageToEx(lvTableID, url, bForceSubmit) {
var tblv = document.getElementById(lvTableID);
var clvp = CLVPFromCtx(tblv);
if (clvp != null && clvp.ctx.IsClientRendering) {
clvp.RefreshPaging(url);
clvp.ctx.queryString = url;
if ((typeof clvp.ctx.operationType == "undefined" || clvp.ctx.operationType == SPListOperationType.Default) && Boolean(clvp.ctx.ListData)) {
var fromPage = clvp.ctx.ListData.FirstRow - 1;
var toPage = Number(GetUrlKeyValue("PageFirstRow", false, url));
if (!isNaN(fromPage) && !isNaN(toPage) && fromPage != toPage)
fromPage < toPage ? (clvp.ctx.operationType = SPListOperationType.PagingRight) : (clvp.ctx.operationType = SPListOperationType.PagingLeft);
}
}
else {
SubmitFormPost(url, bForceSubmit);
}
}
I am trying to figure out a way to fetch only the filtered values from a table if a filter is active in Office-JS API.
Right now the only way I have figured to fetch all the table data is from the table range values property:
var table = tables.getItemAt(0);
var tableRange = table.getRange();
tableRange.load("values");
ctx.sync().then(function () {
// This returns all the values from the table, and not only the visible data
var values = tableRange.values;
});
Any ideas on how I can proceed to fetch only the visible values from the table if a filter is active?
From previous experience with Office Interop I have achieved the same by looping through the different Areas of the table range, but I am unable to find the equivalent to Areas in Office-JS.
The upcoming next wave of features as part of Excel JS APIs 1.3 will include a new object "RangeView" that allows you to read only the visible values off the Range object.
Here's a link to the open spec on GitHub - https://github.com/OfficeDev/office-js-docs/tree/ExcelJs_1.3_OpenSpec/excel.
Note that this isn't available just yet, but will be in the near future.
Usage for your case off a table would look like this:
var table = tables.getItemAt(0);
var visibleView = table.getRange().getVisibleView();
ctx.load(visibleView);
ctx.sync().then(function () {
var values = visibleView.values;
});
One way to get only filtered data is through the Binding.getDataAsync method, which takes a filterType parameter.
Office.select("bindings#myTableBinding1").getDataAsync({
coercionType: "table",
filterType: "onlyVisible"
},function(asyncResult){
var values = (asyncResult.value.rows);
});
This code assumes you have already created a binding to the table. If not, you can run the following code first, which uses the table name to call Bindings.addFromNamedItemAsync:
Office.context.document.bindings.addFromNamedItemAsync("Table1","table",{
id: "myTableBinding1"
},function(asyncResult){
// handle errors and call code sample #1
});
Note that the solution above is supported as far back as Excel 2013 because it uses the shared APIs. The Excel-specific API set doesn't yet have the capability to return only unfiltered data.
-Michael Saunders, PM for Office add-ins
I have a webdatagrid which retains data on searching in text box. I have noticed when I filter/page/sort the data and before clearing any of these I make a new search then the new search results retains previous filter/page/sort condition. I am not clearing it before reloading the page. I have search method on client side and I am using following code which does not work:
function btnSearch_click(sender, evntArgs){
var grid = $find('<%= grid1.ClientID %>');
grid.get_behaviors().get_filtering().clearColumnFilters();
grid.get_behaviors.get_sorting().clearColumnSorting();
grid.get_behaviors.get_paging().clearPaging();
}
This code is incorrect.
Since my grid loads on pressing the search button. I used the following on the server side:
if (search == "True")
{
var filtering = grid1.Behaviors.Filtering;
grid1.Behaviors.Sorting.SortedColumns.Clear();
grid1.Behaviors.Paging.PageIndex = 0;
grid1.Behaviors.Filtering.ClearBehaviorColumnInfo();
grid1.Behaviors.Filtering.ColumnFilters.Clear();
filtering.FilterType = Infragistics.Web.UI.GridControls.FilteringType.ExcelStyleFilter;
grid1.Behaviors.Filtering.ApplyFilter();
}
I wanted to implement excel style filter and Infragistics had no way to reproduce excel filter after clearing it I had to apply row type filter first and then change the filter type to excel type.