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

Retrieve data as JSON

11 Answers 295 Views

Chart (HTML5)

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

11 Answers, 1 is accepted

Accepted

answered on 12 Mar 2013, 05:01 AM

Hello Teena,

Please have a look into the following sample client side code I tried at my end.

JavaScript:

<script type="text/javascript">

function OnClientClicked1() {

var RadHtmlChart1 = $find('<%=RadHtmlChart1.ClientID %>');

//Parsing the current datasource to an array of JSON objects and storing it a variable

var oldDataSource = $telerik.$.parseJSON(RadHtmlChart1.get_dataSourceJSON());

//Retaining the first Item of the datasource

var newDataSource[0] = oldDataSource[0];

}

</script>

Thanks,
Princy.

answered on 14 May 2013, 06:29 PM

HtmlChart-get-dataSourceJSON-test.zip

Hi Axel,

I have tried to reproduce to described issue but to no avail. You can find a short video with the test as well as a VS sample that I have used for the test in the attached archive and then notify me if I am missing something.

The used sample is a modified version of the example in the Client-side API help article. You can helpful that example as well as the HtmlChart - Client-side Binding online demo in resolving the unexpected behavior.

It may also be possible that you are using an older version of RadControls that do not support the client-side databinding functionality yet. If that is the case we strongly recommend to update your version of RadControls to the latest one. This help article will shed more light on how to do that.

If the above information, however, is not helpful could you please amend my VS example, so that it reproduces your issue and then tell us what changes you have made, so that we can proceed further with the investigation?

Greetings,
Danail Vasilev
the Telerik team

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 their blog feed now.

answered on 22 May 2013, 03:27 PM

HtmlChart-changeDataSourceSeriesType.zip

Hello Axel,

Thank you for the additional clarification.

Note that you can get the datasource of the RadHtmlChart on the client-side only for a databound chart (if SeriesItems are created and added programmatically then you cannot access them on the client).

You can, however, set a particular datasource to the chart on the client without the need to initially databound it on the server. The only requirement is to set the DataFieldY property of the particular series. More information on the matter is available in this demo.

I can suggest you that instead of creating SeriesItems programmatically, to create a sample datasource programmatically and databound it. Then you will have the ability to access and modify it on the client. You can also find attached a VS example that demonstrates how to switch the series type and modify the datasource of the chart on the client.

Regards,
Danail Vasilev
Telerik

answered on 16 May 2020, 08:33 PM

chrome_scatterlinechart.png

ie_scatterlinechart.png

ie_debug_cx_value_0.png

Hi Vessy,

Thanks for your example. I have tried ScatterLinechart with the sample json data, looks like the chart loads fine in Chrome browser but not loading in IE11 and Edge.

ScatterLineChart.aspx

<form id="form1" runat="server">

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

<div class="demo-container size-wide">

<telerik:RadClientDataSource ID="ClientDataSource1" runat="server">

<SortExpressions>

<telerik:ClientDataSourceSortExpression FieldName="year" SortOrder="Asc" />

</SortExpressions>

<DataSource>

<WebServiceDataSourceSettings ServiceType="GeoJSON">

<Select Url="electricity.json" DataType="JSON" ContentType="application/json" />

</WebServiceDataSourceSettings>

</DataSource>

</telerik:RadClientDataSource>

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="100%" ClientDataSourceID="ClientDataSource1">

<ChartTitle Text="Spain electricity production (GWh)"></ChartTitle>

<Legend>

<Appearance Position="Top"></Appearance>

</Legend>

<PlotArea>

<Series>

<telerik:ScatterLineSeries DataFieldY="nuclear" Name="Nuclear" DataFieldX="year">

<LabelsAppearance Visible="false"></LabelsAppearance>

</telerik:ScatterLineSeries>

<telerik:ScatterLineSeries DataFieldY="hydro" Name="Hydro" DataFieldX="year">

<LabelsAppearance Visible="false"></LabelsAppearance>

</telerik:ScatterLineSeries>

<telerik:ScatterLineSeries DataFieldY="wind" Name="Wind" DataFieldX="year">

<LabelsAppearance Visible="false"></LabelsAppearance>

</telerik:ScatterLineSeries>

</Series>

<XAxis DataLabelsField="year">

<LabelsAppearance RotationAngle="-90"></LabelsAppearance>

</XAxis>

<YAxis Step="10000"></YAxis>

<CommonTooltipsAppearance Shared="true" Visible="true"></CommonTooltipsAppearance>

</PlotArea>

</telerik:RadHtmlChart>

</div>

</form>

ScatterLineChart.aspx.cs code

protected void Page_Load(object sender, EventArgs e)

{

// X Axis Value

RadHtmlChart1.PlotArea.XAxis.MinDateValue = new DateTime(2000, 01, 01, 10, 00, 00);

RadHtmlChart1.PlotArea.XAxis.MaxDateValue = new DateTime(2008, 01, 01, 13, 00, 00);

}

electricity.json

[

{

"country": "Spain",

"year": "01-Jan-2008",

"unit": "GWh",

"solar": 2578,

"hydro": 26112,

"wind": 32203,

"nuclear": 58973

},

{

"country": "Spain",

"year": "01-Jan-2007",

"unit": "GWh",

"solar": 508,

"hydro": 30522,

"wind": 27568,

"nuclear": 55103

},

{

"country": "Spain",

"year": "01-Jan-2006",

"unit": "GWh",

"solar": 119,

"hydro": 29831,

"wind": 23297,

"nuclear": 60126

},

{

"country": "Spain",

"year": "01-Jan-2005",

"unit": "GWh",

"solar": 41,

"hydro": 23025,

"wind": 21176,

"nuclear": 57539

},

{

"country": "Spain",

"year": "01-Jan-2004",

"unit": "GWh",

"solar": 56,

"hydro": 34439,

"wind": 15700,

"nuclear": 63606

},

{

"country": "Spain",

"year": "01-Jan-2003",

"unit": "GWh",

"solar": 41,

"hydro": 43897,

"wind": 12075,

"nuclear": 61875

},

{

"country": "Spain",

"year": "01-Jan-2002",

"unit": "GWh",

"solar": 30,

"hydro": 26270,

"wind": 9342,

"nuclear": 63016

},

{

"country": "Spain",

"year": "01-Jan-2001",

"unit": "GWh",

"solar": 24,

"hydro": 43864,

"wind": 6759,

"nuclear": 63708

},

{

"country": "Spain",

"year": "01-Jan-2000",

"unit": "GWh",

"solar": 18,

"hydro": 31807,

"wind": 4727,

"nuclear": 62206

}

]

Further debug found that cx value is not set in Edge & IE11

<circle xmlns="http://www.w3.org/2000/svg" fill="#fff" fill-opacity="1" stroke="#f6921e" stroke-opacity="1" stroke-width="2" cx="0" cy="114.619" r="4" />

Could you please help me why it doesn't load in Edge & IE11.