JavaScript LinkedCharts in ASP.NET (C#) with FusionCharts XT – Part 4

In the last part of FusionCharts XT with ASP.NET series, we will create LinkedCharts using MS SQL Server data and C#. LinkedCharts is a pioneering concept by FusionCharts, which allows you to create unlimited levels of drill-down using a single data source. LinkedCharts is most useful when the user requires to go from a summarized view to a granular view, such as annual revenue >> quarterly revenue >> monthly revenue, and back in the reverse order. LinkedCharts help in maintaining the context of the complete data set when the user is traversing down (or up). In LinkedCharts, the parent chart contains all the data or data sources for its child charts. The child charts can also be configured in every way imaginable.

FusionCharts XT with ASP.NET

What we are going to visualize

In the previous article of this series, we created a drill-down chart, where the user can go from the annual revenue chart to the monthly revenue chart. We will make use of the same data, and create a LinkedChart:

The overlay button at the top-right helps a user immensely while traversing up or down a data set. You can check out a few more implementations of LinkedCharts in our Features Gallery.

.NET library bundled with FusionCharts XT

FusionCharts XT is essentially a JavaScript charting library. In order to render a chart, a certain amount of HTML and JavaScript is required, along with the chart data in XML or JSON.

To automatically generate this HTML and JavaScript code, we provide a .NET library with FusionCharts XT, which generates the HTML and JavaScript required. You can find this library in FusionCharts XT Download Package > Code > CS > Bin > FusionCharts.dll.

What we will need

Attributes of LinkedCharts

When creating LinkedCharts, you will have to provide the data for the child charts in either Data URL or Data String formats using the link attribute.

  • LinkedCharts using Data URL

In the Data URL method, we can point to a static XML file which provides the data for this particular child. The syntax for Data URL method is:

The newChart prefix is used to indicate that it must invoke LinkedCharts. xmlURL indicates that Data URL method is used to specify XML data for the linked child charts. In case of JSON data, jsonurl is used. URL specifies the data path for the linked chart that opens when this column is clicked.
So according to the syntax, you would provide the child chart’s data in this way:

We can also point to a virtual data provider, such as a server-side script which returns only XML, with Content-type set to text/xml:

  • LinkedCharts using Data String

When using the Data String method, the child chart’s data will have to be within the parent chart. Each data plot item in the parent chart is then linked to the child chart’s data (embedded in parent data source) by means of a unique data identifier. The syntax for Data String method is:

According to this syntax, this demo’s code would have to be:

  • Data URL or Data String?

It is apparent from the samples above, the Data URL method is more concise than the Data String method. If you have more than 1 level of drill-down, your XML string will get large, and consequently difficult to debug. Load times for your charts might suffer too.

Creating LinkedCharts using Data URL method

As you already know from the first 3 articles, the Data URL method requires 3 things:

  1. The parent chart (which we created in the 2nd article)
  2. The correct path to the data provider in the link attribute (see below)
  3. The data provider (see further below!)

In the project that you downloaded above, you will have Using_MS_SQL_Server.aspx. Rename it to LinkedCharts_DataURL_Method.aspx. In the code-behind for this page, edit the part where you create the dataplots as below:

Save. Let us now create the data provider for the child charts.

  • Add a web form to the Solution and save it as DataProvider.aspx.
  • From DataProvider.aspx, delete everything except the first line. Since this page is supposed to only return the XML, we would not need any HTML tags here.

In DataProvider.aspx.cs, write the following code:

Save. Switch to LinkedCharts_DataURL_Method.aspx and run the project. This is the LinkedChart that you should see:

Creating LinkedCharts using Data String method

For the Data String method, we would need only 1 page to do both – provide the data and render the chart. Add a new web form to the Solution and save it as LinkedCharts_DataString_Method.aspx.

You can copy the contents from LinkedCharts_DataURL_Method.aspx to LinkedCharts_DataString_Method.aspx. Let us now concern ourselves with the code-behind:

Save. Run the project. This is what you should see:

Configuring LinkedCharts

Using the FusionCharts XT JavaScript API, you can configure every aspect of the child charts. For this, we’ve provided the configureLink() function. You can pass all the properties that a FusionCharts constructor accepts, as parameters to this function.

The syntax for the configureLink() is:

As two separate parameters, the first parameter is an Object containing all configurations (chart and overlay-Button). The second parameter accepts a number which denotes the level being configured. The first drill-down level is 0 (zero).

By default, the child charts have the same type of chart as the parent. We can configure them to use different chart types.

Let us see how we can change the child chart we created above to a Pie chart. In LinkedChart_DataURL_Method.aspx, write the following JavaScript code after the tag:

Save the file, navigate to this page, and click on one of the columns again. This is what you should see:

You can also render LinkedCharts in another container, or within a lightbox. Read more about such configurations in our documentation.

LinkedCharts Events

The FusionCharts XT JavaScript API provides a number of events when LinkedCharts are in action. Each parent chart can listen to the events and can add more functionality to the implementation. The events are as follows:

  • BeforeLinkedItemOpen: Fires before a child chart is created
  • LinkedItemOpened: Fires after a child chart is created
  • BeforeLinkItemClose: Fires before a child chart is closed
  • LinkedItemClosed: Fires after a child chart is closed

Read more about Events in FusionCharts XT JavaScript API.

Download sample project

Concluding the series

In this series, we’ve covered a lot about creating interactive JavaScript charts from the ASP.NET (C#) environment. Here is a recap of all the articles in this series:

Let us know in the comments how you liked this series. We’re putting out more interesting content for all you developers. Stay tuned..

  • Ruby April 24, 2014, 11:05 pm

    1.Is it possible that using HLinearGauges to be child chart?
    2.How to realize that one parent chart control two child chart? Is that possible?
    Waiting for your answer. Thank you!

  • Ruby April 25, 2014, 7:14 am

    1.Is it possible that using HLinearGauge to be child chart?
    2.Can one parent chart link two child charts using configureLink()?

    • Swarnam April 25, 2014, 10:19 am

      Hi Ruby,

      1.Is it possible that using HLinearGauge to be child chart?
      >>Yes, it is possible to render HLinearGauge as a child chart. To configure the descendant charts, call configureLink function on the chart instance and to this function, we pass an Object as parameter. The Object contains the property type with its value “HLinearGauge”. This helps in configuring the descendant charts to show up as Horizontal Linera Gauge.
      Ref.Code:
      FusionCharts(“myChartId”).configureLink( { type: “HLinearGauge” })

      2.Can one parent chart link two child charts using configureLink()?
      >>No, it is not possible to render two child charts using configureLink(). However, you can call custom JavaScript function which will render two descendant chart.

  • Athiban February 25, 2015, 3:16 pm

    I need to call a javascript function on eacch drill downs.???How is this possible
    link=’newchart-xml-” and link=’JavaScript:alert(” + text +”);..Both required……

Leave a Comment