Tutorial

Create Charts with a Dynamic Filter

Infowise allows us to create over thirty different types of real-time charts in SharePoint. By combining Smart Chart Pro with Smart Filter, we can make live and filterable charts that allow us to easily drill into our data!

Instructions

First and foremost, we need to build a list of data that we want to report on. In this example, we will be using a Sales list with Product Name, Month, Year, Amount, Region and Product Category as columns.

In this example, we will be building a real time and filterable chart based off the Region column of the sales list. Possible values include: North America; South America; Europe; Asia; Africa; Australia.

 

Once you have data populated in your list, the next step is creating the Filter and Chart Profile’s in the Infowise Design Screen. From your newly created Sales list, navigate to the Infowise Design screen by selecting the ‘List’ tab and clicking the button as shown below:

 

Once in the design screen, ensure that your Sales list is selected and navigate to the Charts section:

Give your Chart Profile the name ‘By Region’ and select ‘Region’ from the Category (x axis) dropdown. Once you do that, the possible choice values in the list will populate below. Assign each value its own unique color value using the color picker on the right as shown below:

In the ‘Series’ section, select ‘Amount’ from the left-hand dropdown and ‘Sum’ on the next. Then click add to add this series to your chart profile.

 

Go ahead leave the chart settings as their default pie chart settings since the goal here is to demonstrate connecting the chart to the filtering ability.

Next, we will want to set up our Infowise Filter Profile. Navigate back to your Infowise Design Screen and select ‘Filters’ from the ‘Configure App Parts’ section.

Once in the Filter screen, give your new Filter the name of Sales and uncheck the ‘Show Filter button’ checkbox.

In the ‘Filters’ section, select ‘Choice’ from the filter type dropdown as shown below:

Give your filter the same name as your column, in this case ‘Region’. Leave the operator as equals and the ‘Same name as filter’ button selected. Ensure that the ‘Show label’, ‘Active’, ‘Filter instantly when updated’ and ‘Allow multiple values’ checkboxes are all selected.

Next you will want to take the choices for Region that we mentioned earlier (North America; South America; Europe; Asia; Africa; Australia) and paste them into the ‘Choices’ section as shown below:

Once done, click ‘Update’ to add the Filter to the Profile and click ‘Add’ to save your new ‘Sales’ Profile. You should see your new profile in the ‘Profile’ section at the top of your page.

 

Now we are ready to create our Modern UI page for our Filter and Chart to sit on. Navigate to your Site Contents and select the ‘New’ button. Select ‘Page’ from the dropdown.

Your page will generate and you will be shown a screen similar to the below:

 

Make sure to give your page a name. Then click the ‘+’ sign to add a web part. First add one Infowise Filter and then one Infowise Chart webpart. Afterwards, your page will look similar to below:

 

Hover over the first webpart (which should be your Infowise Filter) and select the pencil icon to edit the webpart properties as shown below:

In the edit properties pane, you can confirm that it is indeed you Infowise Filter webpart and select the ‘Sales’ profile from the dropdown that it offers you. Repeat this step with your Chart webpart by selecting the pencil icon and choosing the ‘By Region’ Chart Profile we just created from the dropdown as shown below:

Once you exit the webpart properties and save your page, your page should look something like the following:

 If you select the Region dropdown, you will see the choices that we entered earlier and if you select a checkbox you will see your chart filter in real time:

You can create a ton of interactive charts to drill down into your data.

 

Summary

By combining the Infowise Filter and Infowise Smart Chart Pro we can make real time, data driven charts that let us drill down and understand what is driving our business.

Last modified: 10/23/2018 12:18 PM
Loading...

Add your comment

Comments are not designed to replace support calls. If you have a specific issue with one of our products, please send an email to support@infowisesolutions.com to open a support ticket.