Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Retrieve data as JSON

11 Answers 260 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Teena
Top achievements
Rank 1
Teena asked on 12 Mar 2013, 02:31 AM
Hi,

From client side code, Is it possible to retrieve data from the current datasource of the HtmlChart to an array of JSON objects and store it in a variable?

Thanks,
Teena.

11 Answers, 1 is accepted

Sort by
0
Accepted
Princy
Top achievements
Rank 2
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.
0
Axel
Top achievements
Rank 1
answered on 09 May 2013, 08:49 PM
Hi Princy,
I'm getting a null value when trying to do the:
 
RadHtmlChart1.get_dataSourceJSON()

I'm databinding the htmlchart programmaticly and wanted to change the datasource from client-side on another chart clientseriesclick event.


0
Danail Vasilev
Telerik team
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.
0
Axel
Top achievements
Rank 1
answered on 17 May 2013, 06:22 PM
Hi Danail,
My case is different from the demo.
Im generating different type of charts, sometimes its a pie, others columns, etc...
I create series programmaticly thats why on the .aspx file i only declare the
<telerik:RadHtmlChart ID="chartId" runat="server"></telerik:RadHtmlChart>.
The rest is on the server side. 

Thanks for your help.
Axel

0
Danail Vasilev
Telerik team
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
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.
0
Axel
Top achievements
Rank 1
answered on 22 May 2013, 08:05 PM
Hi Danail,
Thanks for your reply, that was a really good idea! I'll try it.
Thanks again, 
Greetings,
Axel.
0
Jeeva
Top achievements
Rank 1
answered on 03 Feb 2020, 04:09 PM
Does ScatterLineChart (ASP.Net Ajax) supports json data binding? 
0
Vessy
Telerik team
answered on 06 Feb 2020, 09:42 AM

Hi,

Yes, you can use the ClientDataSource in order to bind RadHtmlChart to JSON data. A live demo demonstrating such scenario can be seen here:

https://demos.telerik.com/aspnet-ajax/htmlchart/examples/databinding/clientdatasource/defaultcs.aspx

Regards,
Vessy
Progress Telerik

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
0
Jeeva
Top achievements
Rank 1
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.

0
Jeeva
Top achievements
Rank 1
answered on 16 May 2020, 09:49 PM

Please ignore the above issue.I have fixed the issue by changing the datetime format.

Earlier i was using an datetime format as shown below

dd/MM/yyyy hh:mm:ss

 

now i have changed the datetime format as below and it started working in Edge & IE11.

M/d/yyyy h:mm:ss
0
Vessy
Telerik team
answered on 20 May 2020, 10:32 AM

Hi,

Thanks a lot for the update, Jeeva - I am happy to know the chart behaves as desired by you now.

Regards,
Vessy
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Chart (HTML5)
Asked by
Teena
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Axel
Top achievements
Rank 1
Danail Vasilev
Telerik team
Jeeva
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or