Scrolling

4 posts, 1 answers
  1. David
    David avatar
    301 posts
    Member since:
    Mar 2014

    Posted 17 Oct 2017 Link to this post

    Sometimes i want to fit quite a few Column Series into the chart, so eventually they are becoming crowded.

    Is it possible to use fixed width for series, but enable scrolling?

  2. Answer
    Vessy
    Admin
    Vessy avatar
    2211 posts

    Posted 19 Oct 2017 Link to this post

    Hi David,

    RadHtmlChart does not provide the desired functionality out-of-the-box, but you can achieve a similar behavior by setting big width to the control and wrapping it in a standard scrollable div element in a similar way:
    <div style="width:600px; overflow-x:scroll">
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="2000px" Height="400px">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Products 1" DataFieldY="valueField1">
                        <LabelsAppearance Visible="false">
                        </LabelsAppearance>
                    </telerik:ColumnSeries>
                </Series>
                <XAxis DataLabelsField="dataFieldX">
                </XAxis>
            </PlotArea>
            <Legend>
                <Appearance Visible="false"></Appearance>
            </Legend>
            <ChartTitle Text="Money Spent Per Product"></ChartTitle>
        </telerik:RadHtmlChart>
    </div>
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            RadHtmlChart1.DataSource = GetData();
            RadHtmlChart1.DataBind();
        }
    }
     
    protected DataTable GetData()
    {
        DataTable tbl = new DataTable();
        tbl.Columns.Add(new DataColumn("dataFieldX"));
        tbl.Columns.Add(new DataColumn("valueField1"));
        tbl.Columns.Add(new DataColumn("valueField2"));
     
        for (int i = 0; i < 50; i++)
        {
            tbl.Rows.Add(new object[] { i, i*2-i});
        }
     
        return tbl;
    }


    Another possible approach you can suggest you is to consider using the Data Navigation feature of the chart:
    http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/datanavigation/defaultcs.aspx


    Regards,
    Vessy
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. David
    David avatar
    301 posts
    Member since:
    Mar 2014

    Posted 02 Nov 2017 in reply to Vessy Link to this post

    Understood

    Thank you

  4. Vessy
    Admin
    Vessy avatar
    2211 posts

    Posted 03 Nov 2017 Link to this post

    Hi,

    You are welcome, David. Let us know should any further question on this matter occur.

    Regards,
    Vessy
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top