HtmlChart with Data Navigation

7 posts, 0 answers
  1. ahmet
    ahmet avatar
    12 posts
    Member since:
    May 2014

    Posted 21 May 2014 Link to this post

    Hi everyone,
    I have a problem. I want to use scroll zoom in RadHtmlChart (with line or scatter line series) but I not to want extra control as this link
    http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/datanavigation/defaultcs.aspx ,

    How to use only scroll in radHtmlChart with Line series?
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 23 May 2014 Link to this post

    Hello Ahmet,

    The Data Navigation functionality of the chart works only with category series (i.e., area, line, column, candlestick), so that you cannot use it with numeric series like scatter, scatterline and bubble.

    If you want to have an example of a Data Navigation functionality with line series you can simply replace the candlestick series in the Data Navigation help article / HtmlChart - Data Navigation online demo with line series and set the corresponding data bound property of the series - DataFieldY. For example:
    ASPX:
    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Layout="Stock" Width="800" Height="500" Skin="Default">
        <Navigator Visible="true">
            <RangeSelector From="2008/05/01" To="2009/09/01" />
            <SelectionHint Visible="true" DataFormatString="From {0:d} to {1:d}" />
            <Series>
                <telerik:AreaSeries DataFieldY="DisneyClose">
                </telerik:AreaSeries>
            </Series>
            <XAxis Color="#aaaaaa">
                <LabelsAppearance>
                    <TextStyle Color="#666666" />
                </LabelsAppearance>
            </XAxis>
        </Navigator>
        <PlotArea>
            <Series>
                <telerik:LineSeries Name="Disney" DataFieldY="DisneyOpen">
                </telerik:LineSeries>
            </Series>
            <XAxis DataLabelsField="DisneyDate" Type="Date" Name="mainAxis">
                <MajorGridLines Visible="false"></MajorGridLines>
                <MinorGridLines Visible="false"></MinorGridLines>
                <TitleAppearance Text="Date">
                </TitleAppearance>
            </XAxis>
            <YAxis>
                <LabelsAppearance DataFormatString="{0:C}">
                </LabelsAppearance>
                <MajorGridLines Visible="true" Color="#efefef" Width="1"></MajorGridLines>
                <MinorGridLines Visible="false"></MinorGridLines>
                <TitleAppearance Text="Price">
                </TitleAppearance>
            </YAxis>
        </PlotArea>
        <ChartTitle Text="The Walt Disney Company (DIS)">
        </ChartTitle>
    </telerik:RadHtmlChart>

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadHtmlChart1.DataSource = GetData();
        RadHtmlChart1.DataBind();
    }

    You can find the full runnable VS example in the attached archive.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ahmet
    ahmet avatar
    12 posts
    Member since:
    May 2014

    Posted 26 May 2014 in reply to Danail Vasilev Link to this post

    thank u for your answer.
    i have a question to,
    i use that
    TooltipsAppearance.ClientTemplate = " #= dataItem.DATA_TIME#"
    but i want to this value be short datetime,
    how can i do?
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 26 May 2014 Link to this post

    Hi Ahmet,

    You can use the kendo.format() method, in order to format values in templates. More information on the matter is available in the following resources:


    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. ahmet
    ahmet avatar
    12 posts
    Member since:
    May 2014

    Posted 27 May 2014 in reply to Danail Vasilev Link to this post

    Yes i know this link but i can't use :/
    I set radhtmlcharts datasource to dataset and i used line series. My code likse that
    TooltipsAppearance.ClientTemplate = "#= kendo.format(dataItem.DATA_TIME,\"MM/dd/yyyy\") #";
    but it does not work.
    Please help..
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 27 May 2014 Link to this post

    Hello Ahmet,

    You can use the "#= kendo.format(\'{0:MM/dd/yyyy}\', dataItem.DATA_TIME) #" string in the template. For example:

    ASPX:
    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
        <PlotArea>
            <Series>
                <telerik:LineSeries Name="Volume" DataFieldY="Volume">
                    <TooltipsAppearance Color="White">
                        <ClientTemplate>
                        Inventory <br />
                         Date: #= kendo.format(\'{0:dd/MMM/yyyy}\', dataItem.DATA_TIME) # <br/>
                         YValue: #= kendo.format(\'{0:n0}\', dataItem.Volume)#
                        </ClientTemplate>
                    </TooltipsAppearance>
                    <LabelsAppearance Visible="false">
                    </LabelsAppearance>
                </telerik:LineSeries>
            </Series>
            <XAxis DataLabelsField="DATA_TIME">
                <LabelsAppearance Step="2"></LabelsAppearance>
            </XAxis>
        </PlotArea>
        <ChartTitle Text="Product sales for 2011">
        </ChartTitle>
        <Legend>
            <Appearance Position="Bottom" />
        </Legend>
    </telerik:RadHtmlChart>
    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadHtmlChart1.DataSource = GetData();
        RadHtmlChart1.DataBind();
    }
      
    protected DataTable GetData()
    {
        DataTable dt = new DataTable();
      
        dt.Columns.Add("ID", typeof(int));
        dt.Columns.Add("Volume", typeof(int));
        dt.Columns.Add("DATA_TIME", typeof(DateTime));
      
        dt.Rows.Add(1, 2, new DateTime(2011, 06, 12));
        dt.Rows.Add(2, 5, new DateTime(2011, 12, 12));
        dt.Rows.Add(3, 6, new DateTime(2012, 06, 17));
        dt.Rows.Add(4, 4, new DateTime(2012, 09, 18));
        dt.Rows.Add(5, 7, new DateTime(2013, 03, 18));
      
        return dt;
    }



    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. ahmet
    ahmet avatar
    12 posts
    Member since:
    May 2014

    Posted 27 May 2014 in reply to Danail Vasilev Link to this post

    Ok working, thank you so much :)
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017