You can try out what is coming next here: http://www.powerbi.com/dashboards

More information available in our blog post here: http://blogs.msdn.com/b/powerbi/archive/2014/12/18/new-power-bi-features-available-for-preview.aspx

Alex.

 Alex.

Palettes

Selecting one of the predefined palettes is the easiest way to change chart series colors. There are 12 built-in palettes with about 10 unique colors each.

Chart types like column and line, will assign a unique color from the palette to each of the series. If chart runs out of the palette colors then it will start reusing them again. 

// Set chart series palette
Chart.Palette = ChartColorPalette.Pastel;

Chart type like Pie, assigns unique colors to each individual data point. You can still use Chart.Palette property or you can define different palettes for different series using Series.Palette property. Note that setting Series.Palette property will force all chart types including Column to use unique colors for each data point.

Important! To determine the color assigned to the series or data point from the palette you can call chart1.ApplyPaletteColors() method and then check Series or DataPoint.Color property.

Custom Palettes

If none of the predefined palettes fits your needs, you can always create custom palette with as many colors as you need:

// Set chart custom palette
Chart.Palette = ChartColorPalette.None; 
Chart.PaletteCustomColors = new Color[] { Color.Red, Color.Blue, Color.Yellow};

Empty points

Not all series data points are equal… When you data bind your chart to the DBNull values the data points will be automatically marked as ‘empty’. You can also mark data points as empty by setting DataPoint.IsEmpty property. Each empty data point uses the visual attributes defined in Series.EmptyPointStyle property.

// Hide all series empty data point by making them transparent
Chart.Series[0].EmptyPointStyle.Color = Color.Transparent; 

Color Property

If all of the above methods does not work for you, then you can always set Color property for the series or individual data point.

// Set color for the whole series
Chart.Series[0].Color = Color.Green;

// Set color of a single data point
Chart.Series[0].Points[5].Color = Color.Red;

You can always switch back to using the palette colors by setting both Series and DataPoint Color properties to Color.Empty. 

Alex.

Examples

First of all, let’s start by looking at several different charts before (left) and after (right) we applied our layout improvement rules.

Example 1: Legend position was changed from Bottom to Right and its’ width was truncated.

Sample 2: Title font was reduced and legend position switched from Bottom to Right.

Sample 3: Vertical axis labels were limited to 30% of the chart width.

Sample 4: Bottom axis long labels are truncated and vertical axis labels are shown in thousands.

Sample 5: Labels are shown only for the largest 7 slices in the Pie.

Legend

The most common issue with the Legend, is that it can take significant amount of chart space and can make the actual chart data difficult to read. Here are things that can improve legend layout:

• Legend is docked depending on the proportions of the chart so that it takes advantage of the available space. For example, if we have a wide chart, it is better to dock legend on the Right than on the Bottom of the chart.
• Limit space available to the legend to 30% of the total chart space. Legend will be trimmed if its’ content exceeds 30% of the chart size.
• Hide legend when chart becomes too small.

Title

If chart title content depends on the dynamic data, its’ size can grow unpredictably and interfere with the data we are trying to shown in the chart. This is very similar with the Legend issues described above.

• Limit space available to the title to 20% of the total chart space. If title exceeds 20%, we will try to reduce its’ font size and then truncate the content.
• Hide title when chart becomes too small.

Axis Labels

A single very long label can make chart very hard to read.

• Limit maximum size available to the axis labels to 30% of the chart size. If labels can not fit their content will be automatically truncated.
• Use multipliers for showing values in thousands, millions, billions,… Instead of showing a very long axis label like this ‘50,000,000.00’, you can display ‘50’ and add ‘(in millions)’ to the axis title.

Pie Labels

Pie chart type is not the best visualization if you need to display many (>10) data points. It is hard to read and if you enable data point labels, there is a high chance that they will start overlapping. If you have to us the Pie chart it makes sense to show labels only for the largest slices in the pie.

• Only display labels for the largest 7 slices in the Pie or Doughnut chart.

How to use?

All these rules are implemented and can be automatically applied using ChartLayoutUtilities add-on. Attached project contains ChartLayoutUtilities class and a sample Web Form. Just create an instance of this call passing reference to the chart control!

 Alex.

ChartsWithLongLabels.zip

Before we start, lets have a look how automatic chart axis labels work... When you data bind your chart, axis automatically calculates data scale and sets axis Minimum and Maximum values. Based on the axis scale, chart determines axis labels text, interval (how often labels are shown), font size and label rotation, so that labels do not overlap each other. Below you can see a simple chart with categorical values (countries) shown on the bottom axis:

As you can see, there is not enough space to show all the labels and chart only displays every other country. For categorical axis it is important to show as many categories as possible and here are few different tricks which will help you achieving that.

Solution 1: Force chart axis to display every category.

Chart axis Interval property allows you to provide your own custom interval for axis labels, grid lines and tick marks. Our first solution is to set this property to 1, which will force the chart to display every single category. As you can see on the chart below, every country will become visible and chart will automatically rotate labels to better fit them. If you are using Column chart type you can also switch to Bar chart type to avoid labels rotation. 

This is a very simple approach but you should also be aware of the possible down sides. In case you have too many categories, labels auto-fit algorithm may not be able to completely avoid labels overlapping and they will be very hard to read. I simulated this by reducing our original chart width in half and as you can see it is very hard to read the labels. If we double number of data points (countries) it will be even harder to read this chart.

Solution 2: Enable Variable Count interval and set preferred labels appearance

Second solution keeps the axis Interval in automatic mode, so that in extreme cases we can still reduce number of labels on the axis. First step is to disable labels auto fitting and specify the preferred font size and rotation. In our case we are trying to fit as much labels as possible, so we will set axis labels rotation angle to 90 degrees. And the last step is to enable Variable Interval calculation mode on the axis. By default, chart displays about 5 labels on the axis no matter how long it is, Variable Interval mode will allow you display as many labels as we can fit into the axis. After all this changes you should see something very similar to the Solution 1 chart:

Now let's try to reduce the size of the chart and see what will be different... As you can see in the image below, when chart cannot fit more vertically oriented labels it starts skipping them to avoid making chart completely unreadable.

Conclusion

When categories are displayed on the axis, there is no grantee that all of them will be shown. You can set axis interval to 1 if it is extremely important to see every category but keep in mind that labels may overlap if there are too many categories. Use Variable Interval and labels rotation if you want to fit as many labels as possible and still have labels skipping in extreme cases.

SSRS Steps

Steps to apply Solution 1:

- Right click on the bottom axis and choose Axis Properties from the context menu

- Set Interval field to 1 in the Axis Options property page

- Press Ok to close property dialog

Steps to apply Solution 2:

- Make sure Properties View is enabled

- Click on the axis to select it and display it's properties in the Properties View

- Set VariableAutoInterval property to True

- Set LabelsAngle property to 90

- Click Yes on the pop-up dialog to labels disable auto fitting

.NET Chart Sample Code

Alex.

Binding chart to the data source with categorical values is pretty simple and usually requires just one line of code:

It is important to understand that after DataBind method creates series DataPoint objects, their XValue property will always be set to zero and category is saved in the AxisLabel property. Position of each data point along the category axis is determined using the index of the object in Series.Points collection. Below is an example of what your chart may look like:

Alignment of Multiple Series

When you bind multiple series with categorical values you may run into some un-expected results based on how you prepare your data source. For example, let's imagine that our two chart series are bound to this data:

As you can notice, we have less categories for the second series and their order does not match categories from the first series. If we try binding chart to this data we will end up with the chart shown below. Chart uses index of the data point to position them along the axis and we end up with orange series points in the wrong position. I added data point labels so that it would easier to see the issue.

In order to resolve this we can modify our data source to contain same number of categories in the same order like this:

Simpler approach is just to make a single call to Chart.AlignDataPointsByAxisLabel method which will automatically align the two series by inserting empty points and the end result will look like this:

Hope this helps!

Alex.

Alex.

You can find his article here: http://www.philpreen.co.uk/MSChart/

Alex.

When you add a new visualization in your application, the very first thing you do, is bind it to the data. Microsoft Chart control allows many different ways of populating data in the chart and it is important to understand the differences between them and being able to choose the best approach. I put together all the possible data binding options and the scenarios when they should be used.

Data Sources

Before jumping into the binding methods I want to quickly list all the supportable data sources which can be used in chart binding methods. Keep in mind that not all methods accept all source types.

• SqlCommand
• OleDbCommand
• SqlDataAdapter
• OleDbDataAdapter
• DataView
• DataSet
• DataReader
• List
• Array
• IList
• IListSource
• IEnumerable

Data Point X and Y values

When you bind chart you create series and series data points. Each data point in the series should have it's Y value set and in addition to the Y value you can also bind or set other data point properties:

• X Value - Defines location of the data point along X axis. If not specified, data point index in the series will be used.
• Additional Y Values - Chart types like Bubble or Stock require multiple Y values. You can also bind additional Y values in the regular chart types, if you want to use those values for labels or tooltips.
• Category - When you displaying categories on the X axis, they are stored in the AxisLabel property of the data point. All data binding methods will automatically detect the type of the data and you should not worry about it.
• Other Properties - Some of the binding methods allow you to set additional properties like data point labels, tooltips and others.

Binding Options Overview

This table lists data binding techniques, starting from the most basic methods proceeding to more advanced.

Binding Options Details

Chart.DataBindTable method

The Chart.DataBindTable method is the simplest way to bind chart to a table with several columns. New series will be automatically created for each of the columns and you can optionally use one column for the X value for all series.

Example

Imagine you have a data source containing these columns: Prod A, Prod B, Prod C, Prod D, Prod E, Other and SalesName, you can easily create chart below with a single line of code:

Chart1.DataBindTable(myReader, "SalesName");

 

Chart.DataSource property

Chart DataSource property is the only way to bind chart at design-time. In addition to specifying the DataSource property you also need to create series and set their YValueMembers and optionally XValueMember properties. Multiple Y values can be bound if you specify comma separated list of members in the YValueMembers property.

Chart will automatically bind itself to specified data source and members just before rendering. You can force chart to bind at any moment by calling Chart.DataBind() method.

// Set chart data source

chart1.DataSource = myCommand;

// Set series members names for the X and Y values

chart1.Series["Series 1"].XValueMember = "Name";

chart1.Series["Series 1"].YValueMembers = "Sales";

// Data bind to the selected data source

chart1.DataBind();

 

DataBindCrossTab

The Chart.DataBindCrossTab is different compared to all other binding methods, in that it allows for the grouping of unique values in a column. Each unique value in the specified grouped column results in the creation of a data series. In addition, extended data point properties other than X and Y values can be bound.

These other properties are bound using the otherFields parameter using this syntax:

PointProperty=Field[{Format}] [,PointProperty= Field[{Format}]].

A list of these properties are as follows: AxisLabel, Tooltip, Label,  LegendText,  LegendTooltip and CustomPropertyName (the name of a custom property). For more information on possible formats see the Formatting Types topic in the MSDN library.

Example

In the sample below we have a table that has the sales and commissions of sales people for three years. We group by the "Name" column, thereby creating one data series per sales person. The X values are bound to the "Year" column, the Y values are bound to the "Sales" column, the Label property of the resulting data points (one per record) is bound to the "Commissions" column, and the LegendText property is bound to the "Name" column. 

// Group by "Name" column, bind X values to "Year", Y values to "Sales",

// and Label property to "Commissions.

chart1.DataBindCrossTab(myReader, "Name", "Year", "Sales", "Label=Commissions");

 

Points.DataBind

This method allows for data point properties other than X and Y values to be bound to data columns. For example, you want to set data point label to a value in one of the data source columns. These other properties are bound using the otherFields parameter using this syntax:

PointProperty=FieldName[{Format}][,PointProperty= FieldName[{Format}]]

A list of these properties includes: AxisLabel, Tooltip, Label,  LegendText,  LegendTooltip and CustomPropertyName (the name of a custom property).

This method does not allow you to specify separate data sources for the X and Y values of a series (for this functionality use the DataBind(X)Y methods described in the section above).

Example

Code below demonstrates how to bind X and Y values of the series to columns "Name" and "Sales" respectively. The Label and Tooltip properties of the resulting data points are also bound to the "Commissions" and "Year" column.

Chart1.Series["Series1"].Points.DataBind(

myReader, "Name", "Sales", "Tooltip=Year, Label=Commissions{C2}");

 

Points.DataBind[X]Y

The DataBindXY method allows for the binding of X and Y values of a series, while DataBindY binds Y values only. When binding X and Y values using DataBindXY the same or different data sources may be used.

Some data sources support multiple values (e.g. data sources that have columns of data). For example, OleDbDataReader may have access to more than one column of data. If the column to be used is not specified, then the first available column will be used. To use a column other than the first one just specify the column name in the method call.

Note that when specifying the column names to be bound to the Y values a comma can be embedded as part of a column name by specifying a double comma.

Example

Code below demonstrates how to bind series points to the array of doubles.

// Initialize an array of doubles.

double [] array = { 2.8, 4.4, 6.5, 8.3, 3.6, 5.6, 7.3, 9.2, 1.0};

// Bind the double array to the Y axis points of the data series.

Chart1.Series["Series1"].Points.DataBindY(array);

'Manual' series population

In case you need to perform some custom actions while binding and none of the above methods works, you can always 'manually' bind chart by iterating through the data source and add data points to the series as needed. This approach is also very useful when series data is calculated using some formula.

Example

// Resolve the address to the Access database

string fileNameString = this.MapPath(".");

fileNameString += "..\\..\\..\\data\\chartdata.mdb";

// Initialize a connection string

string myConnectionString = "PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=" + fileNameString;

// Define the database query

string mySelectQuery="SELECT * FROM SALESCOUNTS;";

// Create a database connection object using the connection string

OleDbConnection myConnection = new OleDbConnection(myConnectionString);

// Create a database command on the connection using query

OleDbCommand myCommand = new OleDbCommand(mySelectQuery, myConnection);

// Open the connection

myCommand.Connection.Open();

// Initializes a new instance of the OleDbDataAdapter class

OleDbDataAdapter myDataAdapter = new OleDbDataAdapter();

myDataAdapter.SelectCommand = myCommand;

// Initializes a new instance of the DataSet class

DataSet myDataSet = new DataSet();

// Adds rows in the DataSet

myDataAdapter.Fill(myDataSet, "Query");

foreach(DataRow row in myDataSet.Tables["Query"].Rows)

{

// For each Row add a new series

string seriesName = row["SalesRep"].ToString();

Chart1.Series.Add(seriesName);

Chart1.Series[seriesName].ChartType = SeriesChartType.Line;

Chart1.Series[seriesName].BorderWidth = 2;

for(int colIndex = 1; colIndex < myDataSet.Tables["Query"].Columns.Count; colIndex++)

{

// For each column (column 1 and onward) add the value as a point

string columnName = myDataSet.Tables["Query"].Columns[colIndex].ColumnName;

int YVal = (int) row[columnName];

Chart1.Series[seriesName].Points.AddXY(columnName, YVal);

}

}

DataGrid.DataSource = myDataSet;

DataGrid.DataBind();

// Closes the connection to the data source. This is the preferred

// method of closing any open connection.

myCommand.Connection.Close();

Other useful things to know

Here are couple things that you should know about when binding chart:

• Empty Points - Understand what empty points are and how you can use them. Right now the best source of the information is Chart Sample Environment but I will blog about it later.
• AlignDataPointsByAxisLabel - If you are using a stacked chart type with categorical X axis this helper method can be very useful. Find more information in the documentation and Chart Sample Environment.

http://www.devconnections.com/

Alex.