You are currently browsing the tag archive for the ‘charts’ tag.

Yes, I have to say it, I don’t build charts too often. And because of that, sometimes it’s hard to remember how did I do it last time. Stacked charts is one of those examples. It’s been a few months since the last time I built one, and I just got asked a few questions that sent be back scrambling to figure out how to do it.

First off, what are stacked charts?

A stacked chart, looking like the image below, is a representation of parts in a whole. Very generically stated.

image

The chart describes the cases by origin for each day. So, the whole is the day, while the parts are the case origins. This could have been a single bar for the current day, or a set of bars for multiple days like the example shown.

So, now that we see the purpose, what available options do we have for representation?

Starting with the previous article HERE, we can adjust colors, labels, and other properties of the chart by modifying the XML. But let’s leave that as a last option, and look first at what we can do out of the box.

The example presented above shows a simple stacked chart. We can actually modify it to make it into a 100% Stacked Column chart. That is very easy to achieve by going to the chart properties, and changing the type of chart to 100% Stacked Column.

image

NOTE: You can not modify a default chart, you have to save it as new and then modify it.

image

The end result will look like the above screenshot. Of course, make sure that it makes sense to represent the data as such.

Now, pay attention to which charts support this functionality. Just like I mentioned above, making sure the data represented makes sense, some chart types do not make sense to have a stacked option. The ones supporting stacking are:

  • Column Type Charts
  • Bar Type Charts
  • Area Type Charts

Bonus Brownie Points

Editing the XML allows us to change this chart and show it in 3D. Export the chart XML, and find the <presentationdescription> tag. Underneath, locate the <ChartArea> and right before the closing tag of </ChartArea> add the following line:

<Area3DStyle Enable3D="True" LightStyle="Simplistic" />

Re-import the XML as a new chart. And now, your shiny new 3D chart will look like so:

image

Cool, eh? Now go ahead and stack’em high.

Enjoy!

Advertisements

Creating new Charts in Dynamics CRM has been quite easy for a few versions now. It’s a visual process, very intuitive. But how is all this configuration stored?

To have a quick look at this information, we can start by selecting a chart to analyze. Let’s navigate to Sales > Accounts. Expand the chart in the My Active Accounts view on the right side.

image

Then click on the ellipsis (More Commands) and on Export Chart.

image

The output is an xml definition file. Let’s look at some of the elements.

Wrapper – the entire customization is wrapped in a <visualization> tag.

Inside, the specific chart ID is defined in a <visualizationid> tag. This recognizes if this is a new chart or n update to an existing one. Do note that you can not override the OOTB charts.

Next we have the respective <name> and <description> tags which are pretty self-explanatory.

The <primaryentitytypecode> tag defines the entity for which this chart is available. In our case it will be for account.

All the way at the bottom of the file we have the <isdefault> tag which simply defines the Chart as the default or non-default chart for this entity. Values are true or false.

The <datadescription> tag contain the <datadefinition> tag, which in turn contains the <fetchcollection> and <categorycollection> tags.

The <fetchcollection> contains the <fetch> tag which describes the query used to retrieve the data. This uses standard FetchXML to retrieve data for the chart. The <entity> tag defines the entity queries, while the <attribute> tags define the properties.

The <categorycollection> tag defines the category and series. These are basically the horizontal and vertical axes of the chart. The <category> sub-tag contains for each defined category a <measurecollection> which maps to a series element. For a single series chart we will only find a single <measurecollection> tag, while a multi-series chart will have more than one. The <measure> tag inside the <measurecollection> is just referencing the vertical axis value (series) which correspond to each element on the horizontal axis.

The next important tag is the <presentationdescription> tag. It contains the <chart> tag that wraps the following definitions:

The <series> tag which defines the chart type, labels visibility, colors and font size.

The <chartareas> tag which defines the chart border properties and the X and Y axis properties.

The <titles> tag which defines the title font, alignment and color.

The xml of the <chart> tag is a serialization of the Microsoft Chart Controls Chart class. For the standard features of the Chart Controls see this article on MSDN.

For the sake of this example, let’s modify the highlighted items:

image

Basically we define the BorderColor to be Red, the TitleForeColor to Red and the ForeColor to Green. Now, the modified chart, once re-imported, looks like this:

image

Not the most visually appealing, but proves the point. Now you can go ahead and “brand” your Charts.

When modifying colors, use the RGB notation.

Enjoy!

Continuing with THIS series of posts, today we are looking at using the Flot JScript library for visual rendering of data. Flot is a great little library for charting. It is available from HERE.

The Flot library has a few graphing variations available, and we can easily change the CSS as needed to make it look even more appealing. The idea is that presenting information visually will make our users so much faster, and more inclined to quickly glance to see what’s going on, rather than deep dive.

In this short article we focus on the Flot pie charts. What we will achieve is this:

image

Notice how, for the purpose of this demo, I have left the available rendering option buttons on the form. You can change the rendering type as needed, until you figure out which is the best to use. I like to do that with customers because giving them choice empowers them and engages them in the discussion.
Read the rest of this entry »

Check out my course [Video]

Dynamics 365 Customer Engagement Administration

Dynamics 365 Customer Engagement Administration

Check out my course [Video]

Configuring and Extending Dynamics 365 Customer Engagement

Configuring and Extending Dynamics 365 Customer Engagement

Check out my course [Video]

Getting Started with Dynamics 365 Customer Engagement

Reviewed Book

Implementing Microsoft Dynamics 365 for Finance and Operations

Implementing Microsoft Dynamics 365 for Finance and Operations

Reviewed Book

Microsoft Dynamics 365 Extensions Cookbook

Microsoft Dynamics 365 Extensions Cookbook

Check out my Book

Microsoft Dynamics CRM 2016 Customization - Second Edition

Microsoft Dynamics CRM 2016 Customization - Second Edition

Check out my Book

Microsoft Dynamics CRM Customization Essentials

Microsoft Dynamics CRM Customization Essentials

Check out my Book

Microsoft Dynamics CRM 2011 Scripting Cookbook

Microsoft Dynamics CRM 2011 Scripting Cookbook

Reviewed Book

Microsoft Dynamics CRM 2011: Dashboards Cookbook

Microsoft Dynamics CRM 2011: Dashboards Cookbook

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 607 other followers

Follow Dynamics 365 Wizardry on WordPress.com