# Filtering the Data

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

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2F7t0Dn0lWx7qpaK2udKlE%2Fimage.png?alt=media&#x26;token=745b08a5-20cb-45b8-ad76-bbdafd627273" alt=""><figcaption></figcaption></figure>

* Create two data connections.

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FpwqpbMgs42H9ENM5IM9J%2Fimage.png?alt=media&#x26;token=9e4fbfce-a3cb-4b7e-afd0-12a0d1b2340c" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FQpF8gIG5JfqKGmhEYQw3%2Fimage.png?alt=media&#x26;token=2102c9e2-52e1-4aa8-8387-fcf26e3e61ec" alt=""><figcaption></figcaption></figure>

* Add a filter parameter to the chart connection condition.

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2Ffhh3ire2uwLMyMV2kYLU%2Fimage.png?alt=media&#x26;token=496eb7d2-8fdf-417b-b0e4-abaf2f113f8b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FqqS9Erjj4PCJVzA1UFxR%2Fimage.png?alt=media&#x26;token=4e76a610-b6cc-403e-b7e8-c5c93481cdca" alt=""><figcaption></figcaption></figure>

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