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

Scatter Graph with Data X-Axis

5 Answers 51 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Rob
Top achievements
Rank 2
Rob asked on 23 Aug 2013, 02:31 PM

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?

5 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 26 Aug 2013, 04:06 PM
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.
0
Ollie
Top achievements
Rank 1
answered on 15 Jul 2014, 09:31 AM
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:
[quote]
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();
}
[/quote]
Basically, I want the minimum maximum to be 25, but I load my datasource from a webservice.
Any ideas? 
Thanks,
Ollie
0
Danail Vasilev
Telerik team
answered on 17 Jul 2014, 09:29 AM
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.

 
0
Ollie
Top achievements
Rank 1
answered on 17 Jul 2014, 10:52 AM
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















0
Ollie
Top achievements
Rank 1
answered on 17 Jul 2014, 11:13 AM
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
Tags
Chart (HTML5)
Asked by
Rob
Top achievements
Rank 2
Answers by
Danail Vasilev
Telerik team
Ollie
Top achievements
Rank 1
Share this question
or