Sign in to follow this  
rahul_advanced

Problem In Chart Generating Using Service

Recommended Posts

I created a rest web service in C#.Net using wcf which return chart script and i am calling that service on my html page under the javascript and whatever response i am getting that i assign into div but it is not generating any chart.

It simply Shows Chart as string. I don't know what is wrong? But i know whatever string returned by wcf service that is correct because when i put directly that string under any div tag it render chart. Below i give some code so you come to know what i am trying to do. I see some examples of fusion chart with ASP/C#.Net but i don't want to use that methods where we have to create asp literals and assign chart on that.

 

My requirement is:-

 

1) call Service which internally calling FusionCharts.RenderChart("../StackedColumn3D.swf", "", chartData, "myChart6", "350", "350", false, false) function which is available in FusionCharts.dll.

So i created function like below and my service calling this function and returning data that is returned by this method.

 

public void GetChart()

{

return FusionCharts.RenderChart("../StackedColumn3D.swf", "", chartData, "myChart6", "350", "350", false, false) ;

}

2) I am calling this function in html page using javascript like

 

function getChartFromService{

 

var xmlhttp = new XMLHttpRequest();

 

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp = new XMLHttpRequest();

}

else {// code for IE6, IE5

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

 

xmlhttp.open("POST", "api/reportGraph/3.xml?start=1&limit=2&height=300&width=300", false);

 

//Pass data as form in request

var dataToSend = "some data";

xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xmlhttp.send(dataToSend);

 

//Get respons

var response = xmlhttp.responseText;

 

//genrate chart

document.getElementById("div1").innerHTML=response;

 

}

 

3) I created a simple html file MyChart.html :- code of body part of html

<body>

 

<table>

<tr>

<td>

<input type="button" value="Generate Chart" onclick="getChartFromService ()" />

</td>

</tr>

<tr>

<td>

<div id ="div1">

 

</div>

</td>

</tr>

</table>

</body>

 

so when i run the html page and click on Genrate chart button i get Chart as string on my page. No chat is loading , plz help me.

 

i am just paste the response of my service , in case u need.

 

 

<!-- Using ASP.NET FusionCharts v3.2.2.1 Wrapper and JavaScript rendering --><!-- START Script Block for Chart myChart6 -->

<div id='myChart6Div' >

Chart.

</div>

<script type="text/javascript">

if (FusionCharts && FusionCharts("myChart6") ) FusionCharts("myChart6").dispose();

var chart_myChart6 = new FusionCharts({"debugMode" : "0", "swfUrl" : "../StackedColumn3D.swf", "renderAt" : "myChart6Div", "width" : "350", "wMode" : "opaque", "dataFormat" : "xml", "id" : "myChart6", "lang" : "EN", "scaleMode" : "noScale", "registerWithJS" : "1", "height" : "350","dataSource" : "<chart caption='TopLinksClicked'><categories><category label='Day1' /><category label='Day1' /></categories><dataset seriesName='TotalClicks'><set value='17' /><set value='2' /></dataset><dataset seriesName='SitePageId'><set value='31' /><set value='31' /></dataset></chart>"}).render();</script>

<!-- END Script Block for Chart myChart6 -->

Share this post


Link to post
Share on other sites
Guest Sumedh

Hi Rahul,

 

Please check for following points:

 

 

> If You've copied FusionCharts.js, jquery.min.js, FusionCharts.HC.js and FusionCharts.HC.Charts.js in the right folder? Keep all the files in same folder.

 

> Also check if you have provided correct path for FusionCharts.js in your aspx code or not?

 

> Also, check for chart SWF file path

 

Path should be specified as a relative path.

 

Share this post


Link to post
Share on other sites

Hello Sumedh.............

 

I check all .js files and .swf files path, all are correct and my service also return correct data, because if i copy the response of my service and directly put it under the <div></div> tag , it render the chart.

Share this post


Link to post
Share on other sites
Guest Sumedh

Hey Rahul,

 

The response variable should return following javascript code:

 

 


<script type="text/javascript">
if (FusionCharts && FusionCharts("myChart6") ) FusionCharts("myChart6").dispose();
var chart_myChart6 = new FusionCharts({"debugMode" : "0", "swfUrl" : "../StackedColumn3D.swf", "renderAt" : "myChart6Div", "width" : "350", "wMode" : "opaque", "dataFormat" : "xml", "id" : "myChart6", "lang" : "EN", "scaleMode" : "noScale", "registerWithJS" : "1", "height" : "350","dataSource" : "<chart caption='TopLinksClicked'><categories><category label='Day1' /><category label='Day1' /></categories><dataset seriesName='TotalClicks'><set value='17' /><set value='2' /></dataset><dataset seriesName='SitePageId'><set value='31' /><set value='31' /></dataset></chart>"}).render();</script>

 

And the div id that you have mentioned in getElementById statement should be same for rendering the chart.

 

Ref. Code:

document.getElementById("div1").innerHTML=response;

"renderAt" : "div1"

 

Hope this helps!

Share this post


Link to post
Share on other sites

Thanks for reply Sumedh

 

I am getting same java script from server side but that script already contain <div> tag.........

 

this the script that i am getting

 

<!-- Using ASP.NET FusionCharts v3.2.2.1 Wrapper and JavaScript rendering --><!-- START Script Block for Chart myChart6 -->

<div id='myChart6Div' >

Chart.

</div>

<script type="text/javascript">

if (FusionCharts && FusionCharts("myChart6") ) FusionCharts("myChart6").dispose();

var chart_myChart6 = new FusionCharts({"debugMode" : "0", "swfUrl" : "../ext-4.0.0/charts2/StackedColumn3D.swf", "renderAt" : "myChart6Div", "width" : "350", "wMode" : "opaque", "dataFormat" : "xml", "id" : "myChart6", "lang" : "EN", "scaleMode" : "noScale", "registerWithJS" : "1", "height" : "350","dataSource" : "<chart caption='TopLinksClicked'><categories><category label='Day1' /><category label='Day1' /></categories><dataset seriesName='TotalClicks'><set value='17' /><set value='2' /></dataset><dataset seriesName='SitePageId'><set value='31' /><set value='31' /></dataset></chart>"}).render();</script>

<!-- END Script Block for Chart myChart6 -->

Edited by rahul_advanced

Share this post


Link to post
Share on other sites
Guest Sumedh

Hi Rahul,

 

Response variable should contain only javascript script block, for this you will have to modify your code at your end.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this