Multi-Series chart with gaps/breaks in between when there is no data

[Hemendra Singh]

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;
            }
        }

[Peshito]

Hello,

You are having a categorical chart which means that your data is not sorted chronologically. You said that your data is sorted, however you need to make sure that the data is sorted right before passing it to the chart in order to have it displayed in the way you would have expected.

In case you are just starting with the charting control I would recommend you to use RadChartView control over RadChart. It is created with the limitations of the older RadChart control in mind and our efforts are now concentrated to make it even better then it is now. An article comparing both charts can be found here.

Note that the ChartView control supports Date Time Continuous Axis which always sorts the data chronologically.

Hope this helps.

Regards,
Peshito
Telerik

[Hemendra Singh]

Thanks for your reply. I tried several other solutions I found on your forum but nothing seems to work. However I have used XValue instead of XCategory, whenever we are showing dates on x-axis. This solved our issue of incorrect position of dates on x-axis. But now we are facing two more issues as follows:

1) (This issue we had earlier as well and is independent of using either XValue or XCategory)
Values are incorrectly positioned on graph and not on the data points(Please see image "Incorrect positioned values.jpg"). When we resize the chart just a little, position of values gets automatically corrected(Please see image "Correct positioned values.jpg").

Note: Resolving this issue is on priority for us

 

2) We have selected the date range from 1st feb 2014 to 24th feb 2014, but X-Axis contains 1st March as well. Thus a portion of graph remains blank on the right side which we don't want. Also we don't want to set AutoRange to false and minValue/maxValue manually on the code side as to achieve this with our current code we have to write multiple if/else or case statements.

 

Please guide us in resolving the first issue as it is priority for us. For the second issue, please let us know a better way of showing the graphs.

[Peshito]

Hello,

I am glad you solved the issue with the dates on the horizontal axis.

Regarding the other issues you have, have you tried using the Smart Labels feature of the RadChart?

For the axis showing bigger range than desired, as you have already pointed our this can be solved by manually setting your Axis range. It however does not become clear according to the picture attached why your axis shows extra range. A sample runnable project reproducing the issue would help me in debugging it and providing you with a solution. As this is a forum post you could either send us a link to a third party web site for files sharing or submit a support ticket.

I would also suggest again to use the newer ChartView control in case it is convenient for you and your project.

Regards,
Peshito
Telerik

[Hemendra Singh]

Hi

I tried using Smart Labels feature but it is also showing values incorrectly positioned on graph. Please see the image "afterSmartLabels.jpg".
And as soon as I resize the chart a little, position gets corrected. Incorrectly positioned values looks very ugly and gave a wrong impression to the end users.
Please help me out in solving this strange issue. 

[Peshito]

Hello,

I tried to reproduce the issue but to no avail. Could you please share a sample runnable project reproducing it. I will then be able to provide you with an appropriate solution. You can do that by either submitting a support ticket or by using a files sharing web site for this purpose.

Regards,
Peshito
Telerik