I am adding two line series chart with common x-axis (which is the date range selected) which is already sorted. Now the issue is that if any of the series don't have data for a particular date than those dates automatically gets shifted to the end.
Suppose if we have date range(x-axis) configured from 1st Nov 2013 to 30th Nov 2013 and for one series data is not there 21 to 29 Nov but the other series have data, than these dates gets shifted to the end. Please see the attached image "WrongDateInMiddle.png" for better understanding of the issue.
What I want is that if there is no data for particular dates than chart should show gaps instead of shifting those dates to the end. Something like the functionality available in "Telerik Ajaz HTML Charts" and shown in the attached image "ajax_htmlchart_various_data_types.png"
Code:
I am adding two line series and binding them to two different data sources. After that running a foreach loop to go through each series and make the chart. See code below, here chartSetting.Series contains both the series for whom line chart is to be created.
var count = 0;
foreach
( var setting
in
chartSetting.Series )
{
UpdateChartArea( chartSetting, setting, count );
UpdateSeriesMapping( chartSetting, setting );
count++;
}
private
void
UpdateChartArea( CustomChartSetting chartSetting, CustomChartSeriesSetting setting,
int
count )
{
//Axis
var axisY =
new
AxisY();
axisY.DefaultLabelFormat = setting.YAxisDisplayFormat;
axisY.Title = setting.YAxisLabel;
if
( count == 0 )
{
var axisX =
new
AxisX();
axisX.DefaultLabelFormat = chartSetting.XAxisDisplayFormat;
axisX.Title = chartSetting.XAxisLabel;
radChart.DefaultView.ChartArea.AxisY = axisY;
radChart.DefaultView.ChartArea.AxisX = axisX;
}
else
if
( setting.UseAdditionalYAxis )
{
radChart.DefaultView.ChartArea.AdditionalYAxes.Add( axisY );
}
//CustomGridLine
if
( setting.UpperLimit !=
null
)
{
var upperLimit =
new
CustomGridLine();
upperLimit.YIntercept = setting.UpperLimit.Value;
radChart.DefaultView.ChartArea.Annotations.Add( upperLimit );
}
if
( setting.LowerLimit !=
null
)
{
var lowerLimit =
new
CustomGridLine();
lowerLimit.YIntercept = setting.LowerLimit.Value;
radChart.DefaultView.ChartArea.Annotations.Add( lowerLimit );
}
}
private
void
UpdateSeriesMapping( CustomChartSetting chartSetting, CustomChartSeriesSetting setting )
{
if
( chartSetting.XAxisValue !=
null
&& setting.YAxisValue !=
null
)
{
var seriesMapping =
new
SeriesMapping();
seriesMapping.ItemsSource = setting.Details;
seriesMapping.LegendLabel = setting.YAxisLabel;
//Rotate lables if there are too many record
radChart.DefaultView.ChartArea.AxisX.LabelRotationAngle = setting.Details !=
null
? ( setting.Details.Count > 20 ? -90 : setting.Details.Count > 10 ? -50 : 0 ) : 0;
seriesMapping.SeriesDefinition = setting.ChartType == ConfigurableChartType.Bar ?
new
BarSeriesDefinition() : ( setting.ChartType == ConfigurableChartType.Line ?
new
LineSeriesDefinition() : seriesMapping.SeriesDefinition =
new
PieSeriesDefinition() );
ItemMapping itemMapping =
new
ItemMapping();
itemMapping.DataPointMember = setting.ChartType == ConfigurableChartType.Pie ? DataPointMember.LegendLabel : DataPointMember.XCategory;
itemMapping.FieldName = chartSetting.XAxisValue;
seriesMapping.ItemMappings.Add( itemMapping );
itemMapping =
new
ItemMapping();
itemMapping.DataPointMember = DataPointMember.YValue;
seriesMapping.ItemMappings.Add( itemMapping );
radChart.SeriesMappings.Add( seriesMapping );
this
.radChart.CreateItemStyleDelegate = BuildCustomItemStyle;
}
}