Filters
The DataStore
comes with a set of operations that you can use to filter data values from a large dataset, based on one or more conditions. If you apply one of these operations on the DataTable
it generates a new child table with the filtered data.
Types of filters
The predefined filters are:
- Equals
- Greater
- GreaterEquals
- Less
- LessEquals
- Between
In this article, we will apply all the above filter operations and check the result based on the DataTable shown below:
Order Date | Country | Sales | Quantity | Shipping Cost |
---|---|---|---|---|
1/22/2011 | Australia | 59.724 | 6 | 27.43 |
1/22/2011 | United States | 125.248 | 3 | 3.64 |
1/22/2011 | Australia | 6.318 | 1 | 1.77 |
1/24/2011 | Australia | 110.808 | 3 | 9.92 |
1/24/2011 | United States | 40.08 | 6 | 4.31 |
1/24/2011 | India | 59.25 | 5 | 4.27 |
1/24/2011 | United States | 5.94 | 3 | 0.95 |
1/26/2011 | India | 79.38 | 3 | 13.82 |
1/26/2011 | India | 342.51 | 7 | 13.22 |
Equals
Equals is an operation which can be used when you want to filter specific data value. In the above table, the Country column has three countries in it. To filter the data for United States, set the equals
operator and set its value to United States.
Equals takes two arguments which are:
- Column name on which you want to apply the filter
- The specific value you want to filter.
The data structure to set the equals
filter is shown below:
var filter1 = FusionCharts.DataStore.Operators.equals('Country', 'United States');
var dataTable = dataT.query(filter1);
The new DataTable after running the above code looks like:
Order Date | Country | Sales | Quantity | Shipping Cost |
---|---|---|---|---|
1/22/2011 | United States | 125.248 | 3 | 3.64 |
1/24/2011 | United States | 40.08 | 6 | 4.31 |
1/24/2011 | United States | 5.94 | 3 | 0.95 |
Greater
Greater is an operation which can be used when you want to filter the data values greater than a specific numeric value. In the above table, the Sales column consists of numeric value. Let's apply the greater
operator to filter the values greater than 100.
Greater takes two arguments which are:
- Column name on which you want to apply the filter
- To render the chart by values greater than 100, set the value of this argument to 100.
The data structure to set the greater
filter is shown below:
var filter1 = FusionCharts.DataStore.Operators.greater('Sales', 100);
var dataTable = dataT.query(filter1);
The new DataTable after running the above code looks like:
Order Date | Country | Sales | Quantity | Shipping Cost |
---|---|---|---|---|
1/22/2011 | United States | 125.248 | 3 | 3.64 |
1/24/2011 | Australia | 110.808 | 3 | 9.92 |
1/26/2011 | India | 342.51 | 7 | 13.22 |
GreaterEquals
This operation is similar to greater
filter which can be used when you want to filter the data values greater than a specific numeric value. greaterEquals
operation is used when you want to filter the data values greater and equal to the specific value. In the above table, the Quantity column consists of numeric value. Let's apply the greaterEquals
operator to filter the values greater and equal to 3.
GreaterEquals takes two arguments which are:
- Column name on which you want to apply the filter
- To render the chart by values greater and equal to 3, set the value of this argument to 3.
The data structure to set the greaterEquals
filter is shown below:
var filter1 = FusionCharts.DataStore.Operators.greaterEquals('Quantity', 3);
var dataTable = dataT.query(filter1);
The new DataTable after running the above code looks like:
Order Date | Country | Sales | Quantity | Shipping Cost |
---|---|---|---|---|
1/22/2011 | Australia | 59.724 | 6 | 27.43 |
1/22/2011 | United States | 125.248 | 3 | 3.64 |
1/24/2011 | Australia | 110.808 | 3 | 9.92 |
1/24/2011 | United States | 40.08 | 6 | 4.31 |
1/24/2011 | India | 59.25 | 5 | 4.27 |
1/24/2011 | United States | 5.94 | 3 | 0.95 |
1/26/2011 | India | 79.38 | 3 | 13.82 |
1/26/2011 | India | 342.51 | 7 | 13.22 |
Less
Less is an operation which can be used when you want to filter the data values less than a specific numeric value. In the above table, the Sales column consists of numeric value. Let's apply the less
operator to filter the values less than 100.
Less takes two arguments which are:
- Column name on which you want to apply the filter
- To render the chart by values less than 100, set the value of this argument to 100.
The data structure to set the less
filter is shown below:
var filter1 = FusionCharts.DataStore.Operators.less('Sales', 100);
var dataTable = dataT.query(filter1);
The new DataTable after running the above code looks like:
Order Date | Country | Sales | Quantity | Shipping Cost |
---|---|---|---|---|
1/22/2011 | Australia | 59.724 | 6 | 27.43 |
1/22/2011 | Australia | 6.318 | 1 | 1.77 |
1/24/2011 | United States | 40.08 | 6 | 4.31 |
1/24/2011 | India | 59.25 | 5 | 4.27 |
1/24/2011 | United States | 5.94 | 3 | 0.95 |
1/26/2011 | India | 79.38 | 3 | 13.82 |
LessEquals
This operation is similar to less
filter which can be used when you want to filter the data values less than a specific numeric value. lessEquals
operation is used when you want to filter the data values less and equal to the specific value. In the above table, the Quantity column consists of numeric value. Let's apply the lessEquals
operator to filter the values less than and equal to 3.
LessEquals takes two arguments which are:
- Column name on which you want to apply the filter
- To render the chart by values less than and equal to 3, set the value of this argument to 3.
The data structure to set the lessEquals
filter is shown below:
var filter1 = FusionCharts.DataStore.Operators.lessEquals('Quantity', 3);
var dataTable = dataT.query(filter1);
The new DataTable after running the above code looks like:
Order Date | Country | Sales | Quantity | Shipping Cost |
---|---|---|---|---|
1/22/2011 | United States | 125.248 | 3 | 3.64 |
1/22/2011 | Australia | 6.318 | 1 | 1.77 |
1/24/2011 | Australia | 110.808 | 3 | 9.92 |
1/24/2011 | United States | 5.94 | 3 | 0.95 |
1/26/2011 | India | 79.38 | 3 | 13.82 |
Between
Between is an operation which can be used when you want to filter the data between specific date/time or value. In the above table, the Sales column consists of numeric value. Let's apply the between
operator to filter the values between 50 and 100.
Between takes three arguments which are:
- Column name on which you want to apply the filter
- To render the chart by values from 50 to 100, set the value of the second argument to 50 and the third argument to 100.
The data structure to set the between
filter is shown below:
var filter1 = FusionCharts.DataStore.Operators.between('Sales', 50, 100);
var dataTable=dataT.query(filter1);
The new DataTable after running the above code looks like:
Order Date | Country | Sales | Quantity | Shipping Cost |
---|---|---|---|---|
1/22/2011 | Australia | 59.724 | 6 | 27.43 |
1/24/2011 | India | 59.25 | 5 | 4.27 |
1/26/2011 | India | 79.38 | 3 | 13.82 |
Filter by condition
Other than the above predefined filters, FusionTime gives an option to filter the data by condition.
Now, let's apply a conditional filter to the root table where all United States data and also data with Sales greater than 100 and Shipping Cost less than 10 will be selected.
To code to apply this filter to the above DataTable is given below:
var dataStore = new FusionCharts.DataStore();
var dataTable = dataStore.createDataTable(data, schema);
var filterQuery = FusionCharts.DataStore.Operators.filter((row, columns) => {
return row[columns.Country] === 'United States' ||
(row[columns.Sales] > 100 && row[columns.Shipping_Cost] < 10);
});
var filteredData = dataTable.query(filterQuery);
The new DataTable after running the above code looks like:
Order Date | Country | Sales | Quantity | Shipping Cost |
---|---|---|---|---|
1/22/2011 | United States | 125.248 | 3 | 3.64 |
1/24/2011 | Australia | 110.808 | 3 | 9.92 |
1/24/2011 | United States | 40.08 | 6 | 4.31 |
1/24/2011 | United States | 5.94 | 3 | 0.95 |