From The Field

With the new Chart Display Adapter in the Toolset, a useful functionality is ability to click on a chart and drilldown to view more specific information.  In this example, we have a Pie Chart that is representing sales for an employee for the months of March and April.  Our pie chart rolls up the monthly sales into one figure, but we may want to see the individual sales for the specific month, so we’ll configure our CDA to let us retrieve that detailed information.

First, let’s review our data set we are using.  We start with our base data that we retrieved through our External Data Provider, which returns us all of our detailed information (Employee, SalesMonth, GrossSales).  To help out our CDA, we use a Business Data Analysis Adapter to roll up our data and pass it to the CDA in a format that makes more sense for our charting needs.

A quick look at our Analysis Adapter settings…

For our Setup Properties:

URL to XML is pointing to our External Data Provider:

  <%SiteURL%>/DataSource/SalesDP.aspx

Convert XML is set to convert GrossSales to a decimal datatype so we can do our calculation:

  <Convert>

    <Column>

      <ColumnName>GrossSales</ColumnName>

      <ColumnType>System.Decimal</ColumnType>

    </Column>

  </Convert>

Output as XML is checked

For the Dynamic Group Properties:

Group Column Name is set to SalesMonth, since we want to group sales by month

Group Filter Template is set to

  [<%Group%>]=’<%GroupName%>’

Expression for Analysis is set to Sum(GrossSales), for our rollup

Now let’s take a look at our chart and how we’re going to configure it for the drilldown…

Let’s rundown the various properties we need to configure and we’ll point out the one’s that will allow the drilldown to happen. 

Setup Properties

We need to configure our URL To XML and Add Column XML.

URL To XML points to our Business Data Analysis Adapter:

  <%SiteURL%>/DataSource/ChartAnalysis.aspx

Add Column XML – In order for our chart to accept the NavigateToURL property setting, which defines the data property setting for the DataActionType required by the CDA, but to set this property it has to be done by adding an additional column and pointing the setting node back to our added column. We’ll also setup the URL for our drilldown, which defines the DataActionURL property in the data settings, so we need to add a couple columns to the settings of our chart:

<Columns>

  <Column>

    <ColumnName>NavigateToURL</ColumnName>

    <ColumnType>System.String</ColumnType>

    <Expression>’NavigateToURL’</Expression>

  </Column>

  <Column>

    <ColumnName>URL</ColumnName>

    <ColumnType>System.String</ColumnType>

    <Expression>’http://www.myportal.com/mysite/SalesDetail.aspx?SalesMonth=’+[Group Name]</Expression>

  </Column>

</Columns>

Notice that our URL column has the expression of the address to our SalesDetail page, which has a Grid Display Adapter configured to go against our SalesDP External Data Provider and has SalesMonth as a PassThrough parameter.  The [Group Name] is how we reference the value from the chart that we want to pass on to our SalesDetail page, the [Group Name] is set in our data settings (below).

Data Properties

Here we will configure our Data Settings, some general settings required for our chart.

<d>

  <setup>

    <Table1>Table1</Table1>

    <Type>Pie</Type>

    <Name>Series1</Name>

    <DataName>Group Name</DataName>

    <DataY>Group Value</DataY>

    <DataActionType>NavigateToURL</DataActionType>

    <DataActionURL>URL</DataActionURL>

  </setup>

</d>

Notice, that the value of the DataActionType and DataActionURL reference the names of the columns that we added up in the Add Column XML property.

Some other settings that we have configured for our chart are in the Chart Format Properties section which will set our labels, chart type, animation etc. 

Chart Format Properties

Chart Display Settings – setting up the chart header

<chart_settings>

  <title enabled=”true” padding=”15”>

    <text>Sales Status</text>

  </title>

</chart_settings>

Chart Setup – setting animation and the chart type

<c>

  <s>

    <EnableAnimation>true</EnableAnimation>

    <Type>Pie</Type>

  </s>

</c>

Data Plot Settings – which set our labels for our chart

<data_plot_settings enable_3d_mode=”false”>

  <pie_series>

    <tooltip_settings enabled=”true”>

      <format>{%Name} {%Value}{numDecimals:0}</format>

    </tooltip_settings>

    <label_settings enabled=”true” mode=”Outside” multi_line_align=”Center”>

      <background enabled=”false” />

      <position anchor=”Center” valign=”Center” halign=”Center” padding=”20” />

      <format>{%Name} {%Value}{numDecimals:0}</format>

      <font bold=”False” />

    </label_settings>

    <connector color=”Black” opacity=”0.4” />

  </pie_series>

</data_plot_settings>

So now that we have the chart setup for our drilldown and all the other properties configured, when we click on a piece of the pie, we’ll get a new window displaying our drilled-down information for our sales data.

Hopefully, you will find drilling down into the chart for more detailed information in your solutions… happy coding!