Resources For IT Professionals
Post an article
Wikis - Page Details
  • First published by (eMicrosoft Community Contributo)
  • When: 21 Mar 2013 4:22 AM
  • Last revision by (1Microsoft Partne)
  • When: 17 Jul 2013 1:59 AM
  • Revisions: 13
  • Comments: 4
Options
RSSSubscribe to Article (RSS)
Can You Improve This Article?
Positively! Click Sign In to add the tip, solution, correction or comment that will help other users.

Report inappropriate content using these instructions.
Wiki  >  TechNet Articles  >  Microsoft Dynamics CRM 2011 Charts Customization

Microsoft Dynamics CRM 2011 Charts Customization

Microsoft Dynamics CRM 2011 Charts Customization

One of the best features of the Microsoft Dynamics CRM 2011 is its charts. Each user could create his/her desired charts (permissions needed), does the aggregations such as count and sum, select data series and select the chart type. All of this could be done without one line of coding. The story could be more interesting when you know the charts could be exported and imported easily. In this article some basic concepts and customization methods of Dynamics CRM 2011 would be discussed.

The main procedure of customizing a chart includes three steps:
  1. Exporting the chart which was build in CRM.
  2. Editing the XML file.
  3. Importing the customized chart to CRM.
 you have to select the charts at the section you are, and then export it as in the figure below:



Then, you have to save the chart as an XML file at an appropriate destination. After you have edited the chart XML file, then you could import it from this tab. At the import, if the chart name exists, the wizard asks you to "Replace" or "Keep both", and for a name obviously!

Editing chart XML

To edit the chart XML file, open it in Visual Studio (you could open it in any editor). A chart is rendered as a single image with its series and category. But the XML consists of two main parts:
  1. The "data description" part (the data used to render chart).
  2. The "presentation description" part (appearance parameters such as colors and legends).




The good news is that the CRM 2011 charts uses standard ASP .NET chart controls. Then, the presentation description uses .NET chart controls. As you know CRM 2011 has a limited chart types, but you could customize them to have more than 40 chart types. Refer to MSDN article on chart types.
At the rest of this article some of the most used tricks about customizing the data description and presentation description sections would be discussed.

Useful Tricks

Some useful tricks of charts are as follows:

Large difference in data ranges

If there is a lot of difference in data ranges, it could result in a ugly view! This ugly view could be eliminated with the gaps in the chart. You have to add the below section under the AxisY:

<AxisY LabelAutoFitMinFontSize="8" TitleForeColor="59, 59, 59" TitleFont="{0}, 10.5px" LineColor="165, 172, 181" IntervalAutoMode="VariableCount"> <MajorGrid LineColor="239, 242, 246" /> <MajorTickMark LineColor="165, 172, 181" /> <LabelStyle Font="{0}, 10.5px" ForeColor="59, 59, 59" /> <ScaleBreakStyle Enabled="True" BreakLineStyle="Straight" Spacing="2" /> </AxisY>

The customized chart should look like:



Customizing series name and legends

The series name in CRM 2011 charts are the aggregation of the field names, such as Sum(Estimated Revenue). You could change these names as you desire. To display the series names as won use:

<Series Name="o:opportunity_statecode,1" Color="149, 189, 66" IsValueShownAsLabel="False" BackGradientStyle='TopBottom" BackSecondaryColor="112, 142, 50" Font="{0}, 9.5px" LabelForeColor="59, 59, 59">

And to display the series name as lost use:

<Series Name="o:opportunity_statecode,2" Color="255,124,31" IsValueShownAsLabel="False" BackGradientStyle='TopBottom" BackSecondaryColor="235,98,0" Font="{0}, 9.5px" LabelForeColor="59, 59, 59">

To use the option sets as the series label use:

<Series Name = “o:optionsetLogicalName,optionSetValue” Color="255,124,31" IsValueShownAsLabel="False" BackGradientStyle='TopBottom" BackSecondaryColor="235,98,0" Font="{0}, 9.5px" LabelForeColor="59, 59, 59">


3D charts

You could enable 3D for almost all of the charts. You only have to add Area3DStyle Enable3D="True" to chart XML as follows:

<ChartAreas>
   <ChartArea BorderColor="White" BorderDashStyle="Solid">
       <AxisY LabelAutoFitMinFontSize="8" TitleForeColor="59, 59, 59" TitleFont="{0}, 10.5px" LineColor="165, 172, 181" IsReversed="False">
      <MajorGrid LineColor="128, 128, 128" />
      <LabelStyle Font="{0}, 10.5px" ForeColor="59, 59, 59" />
      </AxisY>
      <AxisX LabelAutoFitMinFontSize="8" TitleForeColor="59, 59, 59" TitleFont="{0}, 10.5px" LineColor="165, 172, 181" IsReversed="False">
      <MajorGrid Enabled="False" />
      <MajorTickMark Enabled="False" />
      <LabelStyle Font="{0}, 10.5px" ForeColor="59, 59, 59" />
      </AxisX>
      <Area3DStyle Enable3D="True" LightStyle="Realistic" WallWidth="5" IsRightAngleAxes="true" />
   </ChartArea>
</ChartAreas>

The result of the customization is as:



Hiding the bar values

To hide the values on the bar charts use:

<Series>
   <Series ChartType="Bar" IsValueShownAsLabel="False" Color="149, 189, 66"  BackGradientStyle="TopBottom"BackSecondaryColor="112, 142, 50" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PointWidth=0.75, MaxPixelPointWidth=40">
      <SmartLabelStyle Enabled="True" />
   </Series>
</Series>

3D Cylinder

To create 3D cylinder charts instead of stacked chart use:

<Series>
   <Series ChartType="Column" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PointWidth=0.75, MaxPixelPointWidth=40, DrawingStyle=Cylinder"></Series>
</Series>
<ChartAreas>

and this:

</AxisX>
   <Area3DStyle Enable3D="True" LightStyle="Realistic" WallWidth="5" IsRightAngleAxes="true" />
</ChartArea>



Soft Edge Doughnut

To have a soft edges for a doughnut chart type use:

<Series>
 <Series ShadowOffset="0" IsValueShownAsLabel="true" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PieLabelStyle=Inside, PieDrawingStyle=SoftEdge" ChartType=" Doughnut">
         <SmartLabelStyle Enabled="True" />
     </Series>
</Series>
<ChartAreas>
      <ChartArea>
          <Area3DStyle Enable3D="False" />
      </ChartArea>
</ChartAreas>

The resulting chart is as:



Square base Funnel

For a square base funnel use the snippet below:

Funnel3DDrawingStyle=SquareBase

Which results in:


Multi series chart

As a last trick, we discuss about the multi series chart. To create such a chart, first build a single series chart about the Estimated Revenue of each Potential Customer. The chart looks like:


And the XML file is as:

<visualizationid>{A3A9EE47-5093-DE11-97D4-00155DA3B01E}</visualizationid>
  <name>Sum(Estimated Revenue) by Owner</name >
  <description>Shows the estimated revenue by owner.</description>
  <primaryentitytypecode>opportunity</primaryentitytypecode>
  <datadescription>
    <datadefinition>
      <fetchcollection>
        <fetch mapping="logical" aggregate="true">
          <entity name="opportunity">
            <attribute alias="aggregate_column" name="estimatedvalue" aggregate="sum" />
            <attribute groupby="true" alias="groupby_column" name="ownerid" />
          </entity>
        </fetch>
      </fetchcollection>
      <categorycollection>
        <category>
          <measurecollection>
            <measure alias="aggregate_column" />
          </measurecollection>
        </category>
      </categorycollection>
    </datadefinition>
  </datadescription>
  <presentationdescription>
    <Chart>
      <Series>
        <Series ChartType="Column" IsValueShownAsLabel="True" Color="55, 118, 19"
BackGradientStyle="TopBottom" BackSecondaryColor="41, 88, 145" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PointWidth=0.75, MaxPixelPointWidth=40">
          <SmartLabelStyle Enabled="True" />
        </Series>
      </Series>
      <ChartAreas>
        <ChartArea BorderColor="White" BorderDashStyle="Solid">
          <AxisY LabelAutoFitMinFontSize="8" TitleForeColor="59, 59, 59" TitleFont="{0}, 10.5px" LineColor="165, 172, 181" IsReversed="False">
            <MajorGrid LineColor="239, 242, 246" />
            <LabelStyle Font="{0}, 10.5px" ForeColor="59, 59, 59" />
          </AxisY>
          <AxisX LabelAutoFitMinFontSize="8" TitleForeColor="59, 59, 59" TitleFont="{0}, 10.5px" LineColor="165, 172, 181" IsReversed="False">
            <MajorGrid Enabled="False" />
            <MajorTickMark Enabled="False" />
            <LabelStyle Font="{0}, 10.5px" ForeColor="59, 59, 59" />
          </AxisX>
        </ChartArea>
      </ChartAreas>
      <Titles>
        <Title DockingOffset="-3" Font="{0}, 13px" ForeColor="59, 59, 59" Alignment="TopLeft"></Title>
      </Titles>
    </Chart>
  </presentationdescription>
  <isdefault>false</isdefault>
</visualization>

First you have to add a new attribute alias:

<attribute alias="aggregate_column1" name="actualvalue" aggregate="sum" />

Then, add a new measure collection:

<measurecollection>
  <measure alias="aggregate_column1" />
</measurecollection>

Add a new series in the presentation section:

<Series BorderWidth="3" ChartType="Line" Color="49,171,204" MarkerStyle="Square"
MarkerSize="4" MarkerColor="37,128,153" MarkerBorderColor="37,128,153"> </Series>

Finally you have to add legends:

<Legends>
  <Legend Alignment="Center" LegendStyle="Table" Docking="Bottom" Font="{0}, 11px" ShadowColor="0, 0, 0, 0" ForeColor="59, 59, 59/>
</Legends>

The result is as:


In case of any suggestion, please revise or advice!
, , , , , , , , , , [Edit tags]
Leave a Comment
  • Please add 5 and 5 and type the answer here:
  • Post
Wiki - Revision Comment List(Revision Comment)
Sort by: Published Date | Most Recent | Most Useful
Comments
  • 4 May 2013 3:57 PM

    Carsten Siemens edited Revision 7. Comment: fixed typo

Page 1 of 1 (1 items)
Wikis - Comment List
Sort by: Published Date | Most Recent | Most Useful
Posting comments is temporarily disabled until 10:00am PST on Saturday, December 14th. Thank you for your patience.
Comments
  • Posted by
    on 17 Apr 2013 10:42 PM

    Hi,

    Very useful article.

  • Posted by
    on 4 May 2013 3:57 PM

    Carsten Siemens edited Revision 7. Comment: fixed typo

  • Posted by
    on 8 May 2013 9:49 AM

    In the "Editing Chart XML" section, there is what appears to be a link to "MSDN article" on chart types, but doesn't work. Is that a link, and if so, can you provide the URL? Thanks.

  • Posted by
    on 26 May 2013 8:13 AM

    Hi Danny,

    I have edited the links. Thanks.

Page 1 of 1 (4 items)