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

Line chart first category is not starting from origin o

1 Answer 16 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
venu
Top achievements
Rank 1
venu asked on 14 Jan 2019, 02:11 PM

Line chart is displaying as in attached file chart 1. I need to updated the code to display as in attached file chart 2. Also find code from.aspx and .cs files.

 

aspx file:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>

         <telerik:radscriptmanager ID="QsfScriptManager" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
             </Scripts>
        </telerik:radscriptmanager>

        <telerik:radhtmlchart runat="server" ID="RadHtmlChart1" Width="800px" Height="400px">
        <PlotArea>
        <XAxis DataLabelsField="Measured_depth" MajorTickType="None">
            <MinorGridLines Visible="false" />
            <MajorGridLines Visible="false" />
        </XAxis>
        <YAxis MajorTickType="None">
            <MinorGridLines Visible="false" />
        </YAxis>
        </PlotArea>
        </telerik:radhtmlchart>

            <telerik:radajaxloadingpanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
        </telerik:radajaxloadingpanel>
        <telerik:radajaxmanager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="Configuratorpanel1">
    <UpdatedControls>
    <telerik:AjaxUpdatedControl ControlID="RadHtmlChart1" />
    </UpdatedControls>
    </telerik:AjaxSetting>
    </AjaxSettings>
        </telerik:radajaxmanager>

        </div>

        <div>
            <asp:button ID="Button1" runat="server" text="Submit" OnClick="Button1_Click"/>
        </div>
    </form>
   


</body>
</html>

cs file:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using Telerik.Web.UI.HtmlChart;
using Telerik.Web.UI.HtmlChart.Enums;
using System.Data.SqlClient;
using System.Data;

public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        try
        {

            DataTable dt = new DataTable();
            DataColumn dcMeasuredDepth = new DataColumn("Measured_depth", typeof(System.Decimal));
            DataColumn dcTrueVerticalDepth = new DataColumn("True_Vertical_Depth", typeof(System.Decimal));
            dt.Columns.Add(dcMeasuredDepth);
            dt.Columns.Add(dcTrueVerticalDepth);

            DataRow dr = dt.NewRow();
            dr[0] = 0.00;
            dr[1] = 0.00;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = 858.60;
            dr[1] = 858.60;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = 1740.40;
            dr[1] = 1740.35;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr[0] = 1882.60;
            dr[1] = 1882.54;
            dt.Rows.Add(dr);

            RadHtmlChart1.DataSource = dt;
            LineSeries ls = new LineSeries();

            ls.DataFieldY = "True_Vertical_Depth";
        
            RadHtmlChart1.PlotArea.Series.Add(ls);
            RadHtmlChart1.DataBind();

           
        }
        catch (Exception ex)
        {

        }
        finally
        {

        }
    }
}

 

 

 

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 17 Jan 2019, 07:07 AM
Hi Venu,

This is available as of R1 2019 that came out yesterday, under the Justified property of the x-axis. You can see it in action in the following demo: https://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/linechart/defaultcs.aspx.

On a side note, since you seem to be feeding the chart numerical data only, you mayu want to use a ScatterLineSeries instead. It will not use categories on the x-axis like the LineSeries and you cna control at what value the axis starts through its MinValue property: https://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/scatterlinechart/defaultcs.aspx.


Regards,
Marin Bratanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Chart (HTML5)
Asked by
venu
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or