I am using a bootstrap table where I can choose the page size by the
pageSize: 10,
pageList: [5, 10, 20, 50, 100, 200],
parameters.
What I would like to do is to get the pages not of a fixed size, but dividing all the row by the values of one column. So for example if I have a column for salaries and 13 people have a salary 3500€ and 8 people have a salary 4000€, then I'd like to have the 13 entries on 1 table-page and the other 8 entries on the other table-page. I would like to make this work particularly for dates or date ranges.
What I've understood from the documentation, is that this feature does not exist, but I hope to get some alternative solutions for my Django-run page.
I am handling a similar situation, but not with paging. I have select2 dropbox boxes where the user select the parameter(s) and then I populate the grid with those choice(s). https://select2.github.io/examples.html
Here is a sample of the code I am using the pass parameters to the server application.
$('#comptable1').bootstrapTable({
url: 'urlhere.php',
pagination: true,
sidePagination: 'server',
uniqueId: 'id',
selectItemName: 'chkID',
columns:[
{
...
}
],
queryParams: function(params){
//add paramaters to the params array as needed
params['field']=$('#findfield').val();
return params;
}
});
Related
For example, if there are ten students in the class and you want to find three who scored 80, as of now, it works as follows: they retrieve the first three students and filter the scores as 80, then it does not check from the fourth to the tenth student. It should eventually filter out students who have a score of 80, and then it should select three.
Here is the code what I'm trying to do: I want to filter out those that contain "featured" in "tags" and I want 3 results. tags is a string array.
const filter = {
tags: { contains: 'FEATURED' },
};
await API.graphql({
query: listTestsByStatus,
variables: { status: 'APPROVED', filter: filter, limit: 3 },
});
I would like to customize my column chart API as below
1) When I click on the legend the data set associated with it should return null and show the legend in a disabled color. My code is below.
function drawVisualization() {
// Create and populate the data table.
var chart_div = document.getElementById('visualization2');
var data2 = google.visualization.arrayToDataTable([["Sections","Client Scored",{ role: "style" },"Client Confidence",{ role: "style" },"Average Mark",{ role: "style" },"Average Confidence",{ role: "style" }],["Set 1",90,"opacity: 1",95,"opacity: 0.5",78,"opacity: 1",69,"opacity: 0.5"],["Set 2",65,"opacity: 1",73,"opacity: 0.5",99,"opacity: 1",99,"opacity: 0.5"]]);
var options = {
title:"Understanding",
width:'100%', height:600,seriesType: "bars"
,series:{1: {type: "line",pointSize: 10,lineWidth :0},3: {type: "line",pointSize: 10,lineWidth :0}}
,colors: ['#fafe14','#fafe14','#05afed','#05afed']
,vAxis: {title: "%Score",format: '##', minValue: '1', maxValue: '8'},
hAxis: {title: "",slantedText: true,slantedTextAngle:60, maxTextLines: 5, maxAlternation: 10 },
chartArea: {height: '60%',top:10}
};
var chart = new google.visualization.ColumnChart(chart_div);
chart.draw(data2, options);
}
for this, I tried the hideColumns feature and it worked but the problem is that legend also fades out with the dataset and if I remove second column third column will become second and 4 will become 3 and 5 will become 4.
2) My second question is column 1 and column 3 are lines with line width zero as shown below.
Is there any way to move this to the exact middle of the first bar as shown below
If I'm understanding the first part of your question correctly you're trying to hide a column without removing it from your DataTable.
To have a column in a DataTable not display in a chart drawn from it you can change the column's role to something that doesn't display on the chart.
For example, the annotationText role for a column applies to the annotation column that comes before it, but if there isn't an annotation column before it then the annotationText column will simply be ignored.
So if you want to hide column 2, the following code snippet would do so:
data_table.setColumnProperty(2,'role','annotationText');
And if you want to show the column again you would just change the role back to data
data_table.setColumnProperty(2,'role','data');
I have created a filter that contains unik values of column:
{
header : 'Вопрос А',
dataIndex: 'answerA',
itemId: 'answerA',
width : 100,
filter: {
type: 'list',
options: this.getStore().collect('answerA'),
},
editor: 'textfield'
}
When the user inputs new value in the cell of the column this value must appear in the filter. How can I do this?
I have looked at Extjs Grid Filter - Dynamic ListFilter but it doesn't help me much.
You should carefully look at StringFilter.js file which is at ux/grid/filter. I did this myself by adding a combobox to each filter. On combo expand I update its store by parsing the corresponding column data. Besides I advise you to collect unique values, for this task use Ext.Array.unique function. Otherwise, if two cells contain the same data both values will go to the store, which is not good, because any of them will produce the same filtration. I do not attach my code, because it is heavily dependent on my custom data types, but the idea is quite easy, I think.
Using the Google visualization api, is there an easy way to see if a DataView is empty?
https://developers.google.com/chart/interactive/docs/reference#DataView
I can see perhaps using dataView.getValue(0, 1) etc to check for nulls, but it also contains column headings.
I'm guessing it's tricky as the dataview could have many different formats, but is there a good generic way of checking for empty data views? I'm using the dataview for a pie chart.
If I remember right, this can be easily done this way
var predata = response.getDataTable();
var vals = new Array();
var rownum = predata.getNumberOfRows();
// Make sure our data isn't empty.
if (null==predata) // yoda was here
return;
Returns the data table as returned by the data source. Returns null if
the query execution failed and no data was returned.
From reading the documentation, it seems like dataView.getNumberOfRows() is what you're looking for. Before calling that, however, you need to get the filtered rows which are null and then hide them. Here is an example using the Google Code Playground where I am checking one column for null and then hiding the row if it is null. Replace Google Code's default JavaScript for that example with what's below:
function drawVisualization() {
var dataTable = google.visualization.arrayToDataTable([
['Name', 'Age', 'Instrument', 'Color'],
[null, null, null, null],
['Paul', 52, 'Sitar', 'Red'],
['George', 16, 'Guitar', 'Green'],
['Ringo', 72, 'Drums', 'White']
]);
var table = new google.visualization.Table(document.getElementById('table'));
table.draw(dataTable, null);
var dataView = new google.visualization.DataView(dataTable);
// Get rows where the 2nd column contains null
var filteredRows = dataView.getFilteredRows([{column: 1, value:null}]);
console.log(filteredRows);
dataView.setColumns([0, 1]);
// Hide the filtered rows returned
dataView.hideRows(filteredRows);
// Check the number of rows that now exist
console.log(dataView.getNumberOfRows());
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(dataView, {width: 400, height: 200});
}
getDistinctValues may help you with that. It works fine for line charts, when applied to columns which are visualized along Y-axis.
It doesn't seem quite right...
Perhaps I should replace null with 0 on the server-side before the client side even sees the data....
I've resorted to:
if (dataView.getValue(0, 1) === null || dataView.getValue(1, 1) === null || dataView.getValue(2, 1)) === null)
Where my dataview strucuture is:
Column Title 1 | Data
Column Title 2 | Data
Column Title 3 | Data
I am looking to create a Google charts API dashboard with filtering but I would like to chart the data based on grouped data. For example, I can create a datatable such as this:
salesman cust_age cust_sex quantity
Joe 21 Male 3
Joe 30 Female 10
Suzie 40 Female 2
Dave 15 Female 5
Dave 30 Male 10
I can appropriately create a dashboard that creates two controls (for cust_age and cust_sex) and any number of output graphs and tables all pulling from an external data source - this is pretty stock stuff, see http://code.google.com/apis/chart/interactive/docs/gallery/controls.html
The problem that I am having is how to show all charts by grouped values. Using a pie chart as an example, without any filters there are 5 slices of the pie (Joe, Joe, Suzie, Dave, Dave) - I would like to see only three (Joe, Suzie Dave). Of course, when a control is applied everything should update.
In other words, the filters should act on the original datatable, but the charts should be based on a grouped datatable.
I would guess that we could use the grouping function:
http://code.google.com/apis/ajax/playground/?type=visualization#group
however I cannot seem to bind the filters to the larger datatable, update the grouped table, and then draw the charts based on the grouped table.
Any thoughts?
I found a workaround, you should use the chartWrapper without the dashboard, so you can pass a dataTable as parameter:
var $pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'pie_chart',
'options': {
'width': 300,
'height': 300,
},
//group the data for the pie chart
'dataTable' : google.visualization.data.group($dataTable, [0],
[{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}])
});
$pieChart.draw();
$tableWrapper = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_data'
});
var $genderPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'gender_filter',
'options': {
'filterColumnIndex': '2',
'useFormattedValue' : true,
'ui': {
'allowTyping': false,
'allowMultiple': false,
'labelStacking': 'vertical'
}
}
});
new google.visualization.Dashboard(document.getElementById('table_dashboard')).
bind([$genderPicker], [ $tableWrapper]).
draw($dataTable);
Then, you should add a callback to your controls so whenever the control changes the charts outside of the dashboard will be updated, like a manual binding, let's assume that the control for cust_sex is $genderPicker and the ChartWrapper table object is $tableWrapper:
google.visualization.events.addListener($genderPicker, 'statechange',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
$pieChart.setDataTable( google.visualization.data.group(
// get the filtered results
$tableWrapper.getDataTable(),
[0],
[{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
));
// redraw the pie chart to reflect changes
$pieChart.draw();
});
The result: whenever you chose male, female or both the pie chart will reflect the filtered results grouped by name. Hope it helps someone and sorry for my broken english.
another way to do it, is to use the 'ready' event of the dashboard object, then create a chart or table in there based on a grouping done to the main table of the dashboard.
eg:
//create datatable, filter elements and chart elements for the the dashboard then:
dash=new google.visualization.Dashboard(document.getElementById(elId));
google.visualization.events.addListener(dash, 'ready', function() {
//redraw the barchart with grouped data
//console.log("redraw grouped");
var dt=mainTable.getDataTable();
var grouped_dt = google.visualization.data.group(
dt, [0],
[{'column': 7, 'aggregation': google.visualization.data.sum, 'type': 'number'}]);
var mainChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'barChart',
'options': {
'height':500,
'chartArea':{'left':200}
},
//view columns from the grouped datatable
'view': {'columns': [0, 1]},
'dataTable':grouped_dt
});
mainChart2.draw();
});
dash.bind(
[lots,of,filter,elements],
[lots,of,chart,elements]
);
dash.draw(data)
After a long R&D, I found the solution fot this problem. For the fix, I used two event listeners in which one is ready event and other is statechange event as,
google.visualization.events.addListener(subdivPicker, 'ready',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
columnChart1.setDataTable( google.visualization.data.group(
// get the filtered results
table.getDataTable(),
[0],
[{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
));
// redraw the pie chart to reflect changes
columnChart1.draw();
});
google.visualization.events.addListener(subdivPicker, 'statechange',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
columnChart1.setDataTable( google.visualization.data.group(
// get the filtered results
table.getDataTable(),
[0],
[{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
));
// redraw the pie chart to reflect changes
columnChart1.draw();
});
Find my initial (problematic) sample here and fixed (solved) sample here
Read this thread: How to not display the data table (read at least the first two posts - the rest are really only important if you are dealing with large data sets).
Basically, you have to use an intermediary chart (tables are a good choice, because they are relatively fast to write and render, with a lower memory footprint than most charts) that is completely hidden from the users. You bind the category picker to this chart in the dashboard. Then you set up an event handler for the picker's "statechange" event that takes the data, groups it into a new DataTable, and draws the PieChart based on the grouped data.