# Filtering the Data

* Navigate to the Designer Canvas page.
* Drag a chart together with a filter component to the canvas.

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FEuVULauGMYN5odGF14gP%2Fimage.png?alt=media\&token=745b08a5-20cb-45b8-ad76-bbdafd627273)

* Create two data connections.      

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2F6tFfiJJzfQd287pQgRLK%2Fimage.png?alt=media\&token=9e4fbfce-a3cb-4b7e-afd0-12a0d1b2340c)

* Associate one data connection with the chart and the other with the filter.

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2Fx7ZNhdFoj9uM1KWCaKxK%2Fimage.png?alt=media\&token=2102c9e2-52e1-4aa8-8387-fcf26e3e61ec)

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FCgMVtlYJoM9Cu7YsGtoo%2Fimage.png?alt=media\&token=8df6bc83-0e89-4529-a2de-108f70a9d925)

* Add a filter parameter to the chart connection condition.

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FyKviSBPul5RprcKCUbkz%2Fimage.png?alt=media\&token=496eb7d2-8fdf-417b-b0e4-abaf2f113f8b)

* Navigate to the ***Script on load*** page of the filter component.
* Add the sdk.reload( \[ 'ConnectionID\_1' ] ); to filter the chart data.

![](https://972575688-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRYq1HgffNfbnIMWPu1D5%2Fuploads%2FYLAwoqLvSzZlosXesa1E%2Fimage.png?alt=media\&token=4e76a610-b6cc-403e-b7e8-c5c93481cdca)

{% hint style="info" %} <mark style="color:green;">Please Note</mark>: The *ConnectionID\_1* should be chart connection.
{% endhint %}