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

multiple y-axis

1 Answer 34 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
david
Top achievements
Rank 1
david asked on 30 Sep 2016, 02:24 PM

Hi, I'm trying to reproduce this chart style - http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/multipleyaxes/defaultcs.aspx

with a sql datasource that looks like this:

Period     Person          Sales

1              Rick                100

1              Sue                  200

2              Rick                 120

2               Sue                 180

So rick/sue would each have a bar for this respective sales in each period. I cant figure out how to bind the values in the chart?

Thank you

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 04 Oct 2016, 02:05 PM
Hi David,

I am not quite sure I understand the scenario you are trying to achieve properly. Can you send us a simple scheme of the chart you are targeting, so we can advice you further?

Is this the result you want to achieve?

I so, you want to have separate Series item for each person (Rick and Sue in this case), you will have to have separate columns for each person and structure your data base in a similar way (or make a select bringing this result from your DB and bind the chart with this data):
Period        Rick              Sue
1                 100               120
2                  200              180

You can have a similar configuration:
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1">
    <PlotArea>
        <Series>
            <telerik:ColumnSeries Name="Rick" DataFieldY="RickSales">
            </telerik:ColumnSeries>
            <telerik:ColumnSeries Name="Sue" DataFieldY="SueSales">
            </telerik:ColumnSeries>
        </Series>
        <XAxis DataLabelsField="Period">
        </XAxis>
    </PlotArea>
</telerik:RadHtmlChart>
Code Behind:
protected
void Page_Load(object sender, System.EventArgs e)
{
    RadHtmlChart1.DataSource = GetData();
    RadHtmlChart1.DataBind();
}
 
private DataSet GetData()
{
    DataSet ds = new DataSet("Bookstore");
    DataTable dt = new DataTable("Products");
    dt.Columns.Add("Period", Type.GetType("System.Int32"));
    dt.Columns.Add("RickSales", Type.GetType("System.Int32"));
    dt.Columns.Add("SueSales", Type.GetType("System.Int32"));
    dt.Rows.Add(1, 100, 200);
    dt.Rows.Add(2, 120, 180);
    ds.Tables.Add(dt);
    return ds;
}

Regards,
Vessy
Telerik by Progress
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
Chart (HTML5)
Asked by
david
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or