Sunday, May 27, 2012

Dundas Chart/Gauge for SharePoint: common scenarios

This post will contain a few common problems/scenarios with Dundas Chart/Gauges for SharePoint, solutions to which are not easily found. You will need to dig around a little bit to get these answers and the Knowledge Base on Dundas site is not very helpful.
Scenario#1) Hyperlink: How would you make each bar a hyperlink, generated dynamically (as shown in the screenshot below)?


Tooltip and Hyperlink on each Bar



The code snippet below tells you how to. Simply paste the code using the Code Editor, and replace it with your particular columns from the datasource. The Hyperlinks will be generated when the chart loads.


   1:  foreach (Series series in chartObj.Series) 
   2:   
   3:  { 
   4:   
   5:   foreach (DataPoint dp in series.Points) 
   6:   
   7:   { 
   8:   
   9:    if (dp.YValues[0] == 0) 
  10:   
  11:    { 
  12:   
  13:     dp.ShowLabelAsValue = false; 
  14:   
  15:    } object o = dp["URL"]; 
  16:   
  17:    if (o != null) 
  18:   
  19:     { 
  20:   
  21:      string value1 = o.ToString(); 
  22:   
  23:      dp.Href = "" + value1 ; 
  24:   
  25:      dp.MapAreaAttributes = "Target=_Blank"; 
  26:   
  27:     } 
  28:   
  29:    } 
  30:   
  31:  }
  32:   

Scenario #2) Tooltip: How would you display a tooltip on each Bar of your Chart Series? It is pretty sraigthforward. Connect you chart to a Data Source, and as you go through the wizard, make sure you pick a column coming from your datasource selected in the Tooltip field, as shown in the screenshots below:



Column Selected from the DataSource on the Tooltip Field

Scenarios #3) Read Querystring Value from Url: If you need the Dundas Chart to read a Querystring Value from the Url, here are the steps:


1) Throw a Querystring Url Filter Web Part on your page. Then complete it's customization as you would for any other web part, as shown in the screenshot below.


Querystring Filter Web Part
Querystring Filter Web Part - Edit Mode

2) Once the configuration is complete, connect it to the Dundas Chart Web Part that you would like to send the Filter Values to, just like you would do for any other web part that is getting its value from a Querystring filter web part (sample screenshot below).


Read Value from Querystring Filter Web Part

3) Once the value has been read, you could send it to the data source, using the Connect to Data Wizard in the Dundas Chart, like in the following example, I am calling a stored proc to the backend database, while passing Country as a parameter read from the Querystring Filter web part by the Dundas Chart Web Part.



Send Querystring Value to stored proc

Scenario #4) Hide and Show Dundas Charts based on Querystring value:
What if you want to hide dundas charts based on a Query string value, For example, if you want to prevent a chart from showing empty in case someone lands on a page without a querystring string value, which is neccesary to load data on the chart.

The following code snippet will show you how to accomplish this need. Make sure it is pasted in the Code Editor's PostInitialize method.

   1:  if(chartObj.Page.Request.QueryString["CountryCode"] != null)    
   2:  { 
   3:  string s = chartObj.Page.Request.QueryString["CountryCode"];    
   4:  int i = int.Parse(s);    
   5:  if (i != 304 && i != 308)  
   6:  {  
   7:  ChartWebPart wp = (ChartWebPart)chartObj.Parent;    
   8:  wp.ChromeState = System.Web.UI.WebControls.WebParts.PartChromeState.Minimized; 
   9:  wp.ChromeType = System.Web.UI.WebControls.WebParts.PartChromeType.None; 
  10:  chartObj.Visible = false; 
  11:  } 
  12:  else 
  13:  { 
  14:  chartObj.Visible = true;   
  15:  ChartWebPart wp = (ChartWebPart)chartObj.Parent; 
  16:  wp.ChromeState = System.Web.UI.WebControls.WebParts.PartChromeState.Normal; 
  17:  wp.ChromeType = System.Web.UI.WebControls.WebParts.PartChromeType.None;   
  18:  } 
  19:  } 
  20:  else  
  21:  {
  22:  ChartWebPart wp = (ChartWebPart)chartObj.Parent; 
  23:  wp.ChromeState = System.Web.UI.WebControls.WebParts.PartChromeState.Minimized; 
  24:  wp.ChromeType = System.Web.UI.WebControls.WebParts.PartChromeType.None; 
  25:  chartObj.Visible = false;  
  26:  } 

No comments: