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

Connecting WCF service as data source for HTML chart

1 Answer 36 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Tom
Top achievements
Rank 1
Tom asked on 09 Oct 2014, 07:12 PM
I was having trouble implementing a WCF Service for getting HTML chart data on the client side based on the example in the Demo "HtmlChart - Client-side Binding".

The trouble spot was in the setServiceDataInChart function. The demo site source code is:

function setServiceDataInChart(sender, args)
{
     //Get the returned data
     var newData = args.get_content();
  
     //get a reference to the RadHtmlChart
     var chart = getChartReference();
  
     //Set the new datasource to the RadHtmlChart
     chart.set_dataSource(newData);
  
     //Repaint the RadHtmlChart
     chart.repaint();
  
     //Avoid raising the OnClientResponseEnded client-side event
     //avoid setting the received data as content for the RadXmlHttpPanel
     args.set_cancel(true);
  
     logEvent("<strong>Data from the WCF service:</strong>" + newData);
}


I got two different errors when the code got to "chart.repaint();"

First problem was that my WCF service was not serving data back until I changed the OperationContract WebInvoke BodyStyle to WebMessageBodyStyle.WrappedRequest. This caused the second problem, namely, the value of newData returned was now wrapped, so I had to specify

chart.set_dataSource(newData.d);

in the setServiceDataInChart function.

1 Answer, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 14 Oct 2014, 11:16 AM
Hi Tom,

The mentioned issue is not directly related to the RadHtmlChart but the way the data source is served from the WCF Service. As per the The Present and Future of Using JSON in WebForms blog post, in order to remove the wrapping of the data in the "d" object you should do the following:
  - Add the BodyStyle parameter and set it to WebMessageBodyStyle.Bare in the function that serves the data:
[OperationContract]
   [WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare)]
   public List<Person> GetPeople()
   {
       List<Person> myPeople = new List<Person>();
....
       return myPeople;
   }

   - Change the <enableWebScript /> tag in the endpointBehaviors of the service in the web.config file to webHttp:
<behaviors>
  <endpointBehaviors>
    <behavior name="JSONWebApp.SampleJSONServiceAspNetAjaxBehavior">
      <webHttp />
    </behavior>
  </endpointBehaviors>
</behaviors>

More details are available in the provided blog post.

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.

 
Tags
Chart (HTML5)
Asked by
Tom
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or