Connecting WCF service as data source for HTML chart

[Tom]

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.

[Danail Vasilev]

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