This is a migrated thread and some comments may be shown as answers.

Stacked Series Issue and Tooltip Format

7 Answers 354 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 2
Ron asked on 19 Jun 2012, 03:05 PM
Hello,

I have been slowly replacing our RadChart controls with the new RadHtmlChart with small issues here and there as I have posted on the forums.  I have come across a couple of additional issues while trying to replace some of our stacked bar charts.

Below is the HTML markup for the chart that I am trying to implement which is a column series with the property for stacked on the first series set to true as indicated by the documentation on how to create a stacked chart.  However, the rendering of the chart does not produce the intended results.  Although the columns do stack on one another, the YAxis max value is a much larger number than what it needs to be.  This causes the bars to be small compared to the chart and hard to distinguish the stacks series.  For instance, the data being returned in this case would not cause a stacked bar to have a total of more than about 90 to 100.  When the chart renders, the YAxis max value is set to 500 with step increments of 100.  The problem is further exasperated when retrieving larger numbers such as getting the monthly logon count totals versus the daily.  In this case the total count of a stacked column is no more than 13,000 to 14,000.  When the chart renders in this case, the YAxis max value is set to 500,000 with step increments of 100,000.  As you can imagine, at this point the stacked columns are nearly visible they are so small.

If I remove the stacked property and instead let the chart render each series as individual columns, the chart renders perfectly fine with a proper YAxis max value and step increment making an easy to read chart.  However, there are times I need to use the stacked column approach as it lends more to the data I am trying to display.  I cannot set a YAxis max value in the HTML because the data is based on the user's criteria for amount of time such as daily, weekly, monthly or yearly.

Lastly, one other issue I have seen not just in this chart but in all the charts is with the Tooltip DataFormatString.  In the same markup below you will see I use a format of {0:N0} in order to show the comma placement in large numbers.  This works perfectly fine for the YAxis labels, but the tooltip format will not change and will just show the number without the commas in them.  I have another post where this is an issue with formatting the axis labels for date as well.

<telerik:RadHtmlChart runat="server" ID="MetricsDataChart" Width="660" Height="400"
    Transitions="true" DataSourceID="MetricsDataSource">
    <ChartTitle Text="Outlook Web Access Logon Traffic">
        <Appearance Align="Center" Position="Top" />
    </ChartTitle>
    <Legend>
        <Appearance Visible="true" Position="Top" />
    </Legend>
    <PlotArea>
        <XAxis MajorTickType="Outside" MinorTickType="None" DataLabelsField="Date">
            <LabelsAppearance DataFormatString="{0}" RotationAngle="75" />
            <TitleAppearance Visible="true" Text="Date" />
            <MinorGridLines Visible="false" />
        </XAxis>
        <YAxis MajorTickType="Outside" MinorTickType="None">
            <LabelsAppearance DataFormatString="{0:N0}" RotationAngle="0" />
            <TitleAppearance Visible="true" Text="Logons" />
            <MinorGridLines Visible="false" />
        </YAxis>
        <Series>
            <telerik:ColumnSeries Name="Successful Logons" DataField="Success" Stacked="true">
                <LabelsAppearance Visible="false" />
                <TooltipsAppearance DataFormatString="{0:N0}" />
            </telerik:ColumnSeries>
            <telerik:ColumnSeries Name="Failed Logons" DataField="Failure">
                <LabelsAppearance Visible="false" />
                <TooltipsAppearance DataFormatString="{0:N0}" />
            </telerik:ColumnSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

Thanks in advance,
Ron

7 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 21 Jun 2012, 12:45 PM
Hi Ron,

The problem with the numeric format strings is already logged in this PITS item and you can vote for it to raise its priority.

On the subject of stacking the columns - we are looking into this functionality at the moment and if you can post some data that shows the behavior on your end (perhaps along with screenshots) it would help us narrow down the situation and see what can be done to improve it as my attempts to recreate the described behavior have not yet been successful, so I may be missing something. You can either set some items in the markup, or use the approach from this demo to hardcode some data in the code-behind if you like.

Kind regards,
Marin Bratanov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Ron
Top achievements
Rank 2
answered on 09 Jul 2012, 12:25 PM
Sorry for the delayed response, I was away the past 2 weeks.  I have gone ahead and taken the screenshots you requested.  In the screenshots, it will show both the RadHtmlChart and a RadGrid bound to the same SQL datasource.  You will notice the behaviour of the chart from when it is set to stacked and when stacking is not enabled between the two screenshots.  When the chart is set to stack the series, it is creating such a large number step size that the bars are not even visible at this point.  The grid will give you the data that is being returned.

Thanks,
Ron
0
Slav
Telerik team
answered on 12 Jul 2012, 11:45 AM
Hello Ronald,

I tried to reproduce the described problem with the provided data, but to no avail. You can find attached my test page. Please compare it with your actual project and check if there are differences in the setup. This screen capture displays the stacked RadHtmlChart on my end.

I am willing to help you resolve the encountered problem, but I need to reproduce it as it has not been reported so far and I am not aware of its cause. Please open a support ticket and try modifying the attached sample in order to replicate your scenario. If this is not possible, you can also send a simple, runnable page that isolates the problem so that I can examine it locally and provide a more to the point answer.

All the best,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Ron
Top achievements
Rank 2
answered on 12 Jul 2012, 11:53 AM
I have checked out your attached sample and the markup is no different than what I have.  The only one difference between what you are doing and what I am doing is that you have the data hard coded in the markup while I am getting the data from an SQL datasource.

I will go ahead and open a ticket on this but I am curious to know if you have been able to test this scenario using an SQL datasource to see if you can reproduce the issue?
0
Slav
Telerik team
answered on 13 Jul 2012, 09:52 AM
Hi Ronald,

Please check the new sample that I attached in the support ticket on the matter and let me know what should be changed in order to reproduce the problem.

I would suggest continuing our discussion in the support ticket as this way the information on the case will be easier to track. After the cause of the issue is determined you can post it here so that the community can benefit from it as well. 

All the best,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Tom
Top achievements
Rank 1
answered on 16 Jul 2012, 09:12 AM
I'm also suffering from this issue with stacked charts.

My normal unstacked chart displays fine. Then when I activate the stacked version it loads the data but shows no columns (the labels and tooltips appear on top of eachother at the base). This also manifests as a unreasonable scale on the y-axis.

Please see the attached files for a comparison between the stacked and unstacked varieties.

Any help would be greatly appreciated.

Tom

0
Slav
Telerik team
answered on 19 Jul 2012, 09:00 AM
Hello Tom,

The problem with the stacked RadHtmlChart is now fixed. The solution is available in the latest internal build of RadControls for ASP.NET AJAX, so you can download it to resolve this issue.

Greetings,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Chart (HTML5)
Asked by
Ron
Top achievements
Rank 2
Answers by
Marin Bratanov
Telerik team
Ron
Top achievements
Rank 2
Slav
Telerik team
Tom
Top achievements
Rank 1
Share this question
or