How to draw a line based upon data values in Dundas Chart – Customizing Dundas Chart using Code Editor (SSRS)

Introduction:

Dundas has come up with the adding new abilities to Reporting Services (SSRS) in terms of more featured & customizable controls. Not only they look better with lot of UI options to customize, but also have powerful features which are very interesting and useful for analysis. The most popular among these is Dundas Chart control. Existing SSRS charts can also be into Dundas chart just by few right clicks.

Though there are lot of in-built options to select which are quite enough to fulfil the reporting requirements, it also lets developer to apply his/her imagination in designing the chart with the help of writing custom code. And this can be done using the Code Editor of the Dundas control. It provides some event handlers wherein .net (C#/Vb.net) code can be put as per the requirement e.g. PostPaint, PostApplyData, CustomizeChart, CustomizeLegend etc. These are called at some specific point in time & serve a specific purpose.

Drawing a line on Dundas chart for some specific values:

Here we will try to understand the use of Code Editor in Dundas chart with the help of a very simple example. There may be some business need to show a line or any shape based upon certain data conditions on the chart. You need to be a little bit familiar with the .net coding as well.

We will take a simple dataset with some dummy values. 

DataSet: DS_Chart

————————————————

SELECT     1000 AS Value, 1 AS Rate

UNION

SELECT     1400 AS Value, 1.5 AS Rate

UNION

SELECT     2100 AS Value, 2 AS Rate

UNION

SELECT     1450 AS Value, 2.75 AS Rate

UNION

SELECT     2300 AS Value, 3 AS Rate

UNION

SELECT     3400 AS Value, 3.5 AS Rate

UNION

SELECT     2340 AS Value, 4 AS Rate

UNION

SELECT     4440 AS Value, 4.5 AS Rate

UNION

SELECT     4200 AS Value, 5.5 AS Rate

UNION

SELECT     3400 AS Value, 6 AS Rate

UNION

SELECT     9600 AS Value, 6.5 AS Rate

UNION

SELECT     5300 AS Value, 7 AS Rate

UNION

SELECT     5600 AS Value, 9 AS Rate

 Order By Rate

————————————————

The idea is to draw a line chart wherein value (Y-axis) will change overt the rate (X-axis). First we will configure the Dundas Chart control for a basic chart requirement.

1. Right click the control & select properties.
2. Give a title to the chart & go to Data tab.
3. Select ‘DS_Chart’ as dataset.
4. Add a Value series and there select
   1. rate on X-axis
   2. sum(value) on Y-axis.

1. 5. Add one CategoryGroup with Expression as Rate & label as also Rate.

6. Click Ok. Go to Preview tab to see the report. It will look a like as:

Now adding the custom code where 3 < Rate > 4 & Value > 3000.

 7. Go to properties and click on Advanced tab.

1. 8. Click on ViewCode button there.
2. 9. Select PostPaint event & put the below code inside the code editor.

// Chart Graphics object

ChartGraphics graphics = e.ChartGraphics;              

 

// Check what chart element fired the event

if(sender is Series ){

      Series series = (Series) sender;

               

      //Can also check for the series name using series.Name property

            double xValue;

        double yValue;

       

        // Data points loop

      foreach( DataPoint point in series.Points ){

     

        // Get relative position of the point, which will be the center of the ellipse.

      xValue = graphics.GetPositionFromAxis( “Default”, AxisName.X, point.XValue);

      yValue = graphics.GetPositionFromAxis( “Default”, AxisName.Y, 0);

      // Get absolute point.

      PointF absPoint = graphics.GetAbsolutePoint( new PointF( (float)xValue, (float)yValue ) );

       //Draw a line for data

       if(point.YValues[0] > 3000 && (point.XValue > 3 && point.XValue < 4))

       {

            Pen blackPen = new Pen(Color.Black, 3);

            PointF endPoint = graphics.GetAbsolutePoint( new PointF((float)xValue, (float)40) );

            graphics.DrawLine(blackPen, absPoint,endPoint);

       }

    

      }   

 }

 

10. Click Ok.

11. Now go to Preview tab to see the report. It will look similar to the following:

As shown, a line has been drawn at the specified condition’s location.

About these ads