Scatter Graph with Data X-Axis

6 posts, 0 answers
  1. Rob
    Rob avatar
    3 posts
    Member since:
    Jul 2012

    Posted 23 Aug 2013 Link to this post

    I am using HtmlChart with scatter. I want to specify the xaxis from 7/1/2013 to Today in multiple graphics so all of them have the same xAxis no matter of the data. How I can achieve this?
    How do I specify xasix min value = 7/1/2013 and maxvalue=today?

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 26 Aug 2013 Link to this post

    Hi Mickey,

    I am sorry to say that the desired functionality for setting min/max values for DateAxis is not available in RadHtmlChart yet. This idea, however, has already been logged as a feedback item here, so that you can monitor, comment or vote on it, in order to raise its priority. For the time being you obtain the current min/max values of the XAxis and set them:

    <script type="text/javascript">
        function pageLoad() {
            //Get reference to the chart
            var chart = $find("<%=RadHtmlChart1.ClientID%>");
      
            //Obtain charts datasource
            var currDataSource = eval(chart.get_dataSourceJSON());
      
            //Get minValue for the XAxis
            var minValue = currDataSource[0].xValues;
      
            //Get maxValue for the XAxis
            var maxValue = currDataSource[currDataSource.length - 1].xValues;
      
            //Reference the chartObject's min and max properties
            chart._chartObject.options.xAxis.min = minValue;
            chart._chartObject.options.xAxis.max = maxValue;
      
            //Repaint the chart
            chart.repaint();
        }
    </script>

    I have also attached a small VS example that illustrates this.


    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ollie
    Ollie avatar
    3 posts
    Member since:
    Jul 2014

    Posted 15 Jul 2014 Link to this post

    Hi there,
    Sorry for the slight hijack, I'm looking to set the min/max values using JavaScript as above, but it doesn't appear to work. I'm using version 2014.1.225.45.
    My code is:

    var rhcMain = $find('<%=rhcMain.ClientID %>');
    var jsonD = JSON && JSON.parse(data) || $.parseJSON(data);
    if (jsonD) {
        var maxVal = 25; // set minimum for maximum to be 25...
        for (i = 0; i < jsonD.length; i++) {
            maxVal = jsonD[i].Total > maxVal ? jsonD[i].Total : maxVal; // get the max total value from the daya
        }
    rhcMain._chartObject.options.xAxis.min = 0;
    rhcMain._chartObject.options.xAxis.max = maxVal;
        rhcMain.set_dataSource(jsonD);
        rhcMain.set_transitions(true);
        rhcMain.repaint();
    }

    Basically, I want the minimum maximum to be 25, but I load my datasource from a webservice.
    Any ideas? 
    Thanks,
    Ollie
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 17 Jul 2014 Link to this post

    Hello Ollie,

    I have tried to reproduce the mentioned issue but to no avail - the min and max values are properly taking effect when changed on the client. Could you please try to reproduce the issue with the code below and then tell us what changes you have made, so that I can proceed further with the investigation?
    JavaScript:
    <script type="text/javascript">
        function OnClientClicked() {
            //Get reference to the chart
            var chart = $find("<%=RadHtmlChart1.ClientID%>");
            chart._chartObject.options.xAxis.min = 10;
            chart._chartObject.options.xAxis.max = 24;
            //Repaint the chart
            chart.repaint();
        }
    </script>

    ASPX:
    <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" Text="Change XAxis Min/Max" OnClientClicked="OnClientClicked" />
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="800px" Height="400px">
        <PlotArea>
            <Series>
                <telerik:ScatterLineSeries DataFieldX="xValues" DataFieldY="yValues">
                </telerik:ScatterLineSeries>
            </Series>
        </PlotArea>
    </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");
        dt.Columns.Add("yValues");
        dt.Columns.Add("xValues");
     
        dt.Rows.Add(1, 10, 11);
        dt.Rows.Add(1, 15, 18);
        dt.Rows.Add(1, 20, 23);
     
        return dt;
    }

    Note also that MinDateValue and MaxDateValue properties of X axis are available since Q1 2014 and they control the start and the end points of the date range that is displayed. More information is available in this online demo.


    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. Ollie
    Ollie avatar
    3 posts
    Member since:
    Jul 2014

    Posted 17 Jul 2014 in reply to Danail Vasilev Link to this post

    Hi Danail,

    I can confirm that worked, what I didn't mention before and probably should of done, is that the I'm trying to use stacked ColumnSeries.

    Which adjusting the above code to:

    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="350" Height="250">
        <PlotArea>
            <XAxis DataLabelsField="xValues"></XAxis>
            <Series>
                <telerik:ColumnSeries DataFieldY="yValues">
                </telerik:ColumnSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>

    The OnClientClicked setting of xAxis/yAxis min/max no longer works.
    Could you confirm that this is not possible using stacked columns?

    Thank you for your help so far.
    Kind regards,
    Ollie















  7. Ollie
    Ollie avatar
    3 posts
    Member since:
    Jul 2014

    Posted 17 Jul 2014 in reply to Ollie Link to this post

    Nevermind, just got it working :)

    Adjust the JavaScript above to be:

    var maxVal = 25; // set minimum for maximum to be 25...
    for (i = 0; i < jsonD.length; i++) {
       maxVal = jsonD[i].Total > maxVal ? jsonD[i].Total : maxVal; // get the max total value from the daya
    }
    rhcMain._chartObject.options.valueAxis.min = 0;
    rhcMain._chartObject.options.valueAxis.max = maxVal;

    Cheers,
    Ollie
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017