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

Design time configuration wizard not data aware

2 Answers 21 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 23 Apr 2021, 06:08 AM

Hi.

I'm used to working with DevExpress controls. When I use the Configuration Wizard I simple drag and drop the columns from my data source (SQL) and everything just lights up. 

In the Telerik RadHTMLChart Configuration Wizard, even though I've connected to a SQLDataSource and data is coming through fine, I still have to type the column names in the wizard.

And I still haven't figured out how to do this for stacked column chart.

Am I missing something? Is there another tool I should be using for this? I should be able to create a sqldatasource based stacked column chart in about 10 seconds!

Thanks.

2 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 27 Apr 2021, 12:57 PM

Hi Chris,

RadChtmlChart provides a complex functionality providing several boundable fields for the different series type, thus it needs the developers to specify the exact values that will be displayed.

Another reason is the fact that the most of our clients use different (more descriptive) names for the the series and their value fields.

Please, note, that not all functionality of the chart is available in its wizard, so it has to be configured through the code. Setting the Stacked="True" property of the first column series will be enough to get a stacked chart:

https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/stacked-series

For example:

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:YourConnectionString %>"
            SelectCommand="SELECT [Year], [Value],[Value2] FROM [Data] WHERE ([Subcategory_Id] = 1)"></asp:SqlDataSource>
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" DataSourceID="SqlDataSource1">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries DataFieldY="Value" Name="Electricity Consumption" Stacked="true">
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries DataFieldY="Value2" Name="Water Consumption">
                    </telerik:ColumnSeries>
                </Series>
                <XAxis DataLabelsField="Year">
                    <LabelsAppearance RotationAngle="75" />
                    <TitleAppearance Text="Year" />
                </XAxis>
                <YAxis>
                    <TitleAppearance Text="MWh" />
                </YAxis>
            </PlotArea>
            <Legend>
                <Appearance Visible="false" />
            </Legend>
            <ChartTitle Text="Electricity Consumption">
            </ChartTitle>
        </telerik:RadHtmlChart>

Regards,
Vessy
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Chris
Top achievements
Rank 1
commented on 28 Apr 2021, 12:40 AM

In your example above you specify Value and Value2 for the two dffferent series.
I want to be able to use only the Value column (MWh in my example below) for both series but filter the data in the recordset. In my case, by scope.

So scope 1 MWh will be series 1 and scope 2 MWh will be series 2. How do I do this?

E.g.
Year MWh Scope
2017 50000 1
2017 30000 2
2018 67000 2
2018 43000 1
2019 34000 1
2019 23000 2
0
Vessy
Telerik team
answered on 29 Apr 2021, 12:30 PM

Hello Chris,

RadHtmlChart is only a data visualizing control and, unfortunately, cannot filter, group or manipulate the data on its own. In order to bind the chart with the provided data set, you will either group it manually as per the desired criteria prior binding it to the chart, or implement the approach provided in the following code library:

https://www.telerik.com/support/code-library/group-radhtmlchart-data-source

Regards,
Vessy
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Chris
Top achievements
Rank 1
commented on 29 Apr 2021, 10:37 PM

ok. Thank you.
Tags
Chart (HTML5)
Asked by
Chris
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or