Salesforce Fusioncharts Not Displaying Anything

[venky409]

Hi,

I am trying to generate one chart with salesforce using fusioncharts.

I have comeup with the below controller and vf pgae.

When i click on save button, nothing is displayed

 

Controller:

public class clsFusionCharts{

 

 

public String getjsstring(){

 

List<Account> acc = new List<Account>([select id,name from Account limit 5]);

 

String JSONString = JSON.serialize(acc);

system.debug('JSONString' +JSONString );

return JSONString;

}

 

 

}

 

Vfpage:

 

<apex:page Controller="clsFusionCharts" >

<apex:includeScript value="{!$Resource.FusionCharts}"/>

<apex:includeScript value="{!$Resource.FusionChartsExportComponent}"/>

<apex:includeScript value="{!$Resource.jquerymini}"/>

<apex:includeScript value="{!$Resource.HighCharts}"/>

<div id="FC_canvas"></div>

<script type="text/javascript">

 

 

function check(){

 

var js = '{!jsstring}';

var myChart = new FusionCharts("{!$Resource.bar2d}" , "myChartId", "500", "250", "0", "0");

myChart.setData('{ "chart" : {}, "data" : [ js ] }');

myChart.render("FC_canvas");

 

}

</script>

 

<apex:form>

<apex:commandButton onclick="check()" value="Save" id="theButton"/>

</apex:form>

</apex:page>

 

any help wil lbe highly appreciated.

 

Thanks,

venkat

Edited April 5, 2012 by venky409

[Guest Rishi Choudhari]

Hi,

 

1. Use the SF data and create the charts in their own application or on some other website.

For this, they will have to query the SF database using any of the connectors provided here. http://wiki.developerforce.com/index.php/Integration

As you can see, there are a lot of platforms / languages supported. So for example, if the guy is using PHP, then he can simply use the PHP integration toolkit.

The user will have to get an security key from SF. It can be found from here - Name > My Profile > Personal Information > Reset my Security Token. Doing so will send a security token to the person's email. Now this token will have to be appended to the password while using any of the toolkits. For example: it should be "passwordsecuritytoken" both in 1 single string.

Also, a WSDL file needs to be downloaded and put in the same directory. This file can get gotten from Name > Setup > Develop > API.

Detailed tutorials and guides are provided with each different toolkit. This much setup will allow them to query the SF database. But sometimes, the details of the database are not known to this particular developer, so he can use the ForceExplorer AIR app to view the database schema and try out queries from its interface. After this, its just a matter of using the same queries in the toolkit and getting the database response. Then generating the XML / JSON is up to the developer. This XML can be passed on to our charts.

2. Create our charts within the SF, by using the VisualForce method.

Let us assume the user knows how to create a VisualForce page, and knows how to get into Developer Mode. (My Personal Information > Edit > Check the checkbox "Developer Mode"). Once the page is created with the blank "Hello World" text, it means that the page is ready. In the editor the user can type valid APEX code and see the results. Now, the main issue here is to reference the JS and SWF files. The best way to do this is to create Static Resources through Name > Setup > Develop > Static Resources. Here, the user can upload the FusionCharts.js, Highcharts.js, jQuery Min.js, and whatever chart SWF files are needed.

Back to the VF page in developer mode, write this -

<apex:page> <apex:includeScript value="{!$Resource.FC_JQ_MIN}"/> ------- the minified jquery file <apex:includeScript value="{!$Resource.FC_HC}"/> ---------- the highcharts file <apex:includeScript value="{!$Resource.FC}"/> --------- the fusioncharts.js file
<div id="FC_canvas"></div>
<script>
a = new FusionCharts("{!$Resource.FC_SWF}","myChartId","400","300","0" ,"1")
a.setJSONData('{ "chart" : {}, "data" : [ { "label" : "test", "value" : "50" },{ "label" : "test", "value" : "30" } ] }')
a.render("FC_canvas")
</script>
</apex:page>

 

So this is the process to create a simple chart using hardcoded data. Of course this data can be either in XML / JSON.

Now, to get dynamic charts which are connected to the SF database, the user would have to write a class in Java. Actually the terminology here would be "write an APEX class" (Name > Setup > Develop > APEX Classes). This custom class would query the database (as it is done according to the SOQL syntax). Querying the database, parsing through the results, and forming an XML / JSON string would all happen within this class. And it would return the XML / JSON string.

In the editor of the VF page,

<apex:page standardController="APEXclassThatIWroteAbove">
<apex:includeScript value="{!$Resource.FC_JQ_MIN}"/> ------- the minified jquery file <apex:includeScript value="{!$Resource.FC_HC}"/> ---------- the highcharts file <apex:includeScript value="{!$Resource.FC}"/> --------- the fusioncharts.js file
<div id="FC_canvas"></div>...

 

The first line "includes" the class that was written. Now it is just a matter of creating the chart as above in the <script> tags and referencing the XML / JSON string returned from the class.

[venky409]

Hi,

By using the example, I have created below code but nothing is getting displayed,

 

 

<apex:page>

<apex:includeScript value="{!$Resource.jquerymini}"/>

<apex:includeScript value="{!$Resource.FusionChartsHigh}"/>

<apex:includeScript value="{!$Resource.FusionCharts}"/>

<div id="FC_canvas"></div>

<script>

a = new FusionCharts("{!$Resource.column3d}","myChartId","400","300","0"

,"1")

a.setJSONData('{ "chart" : {}, "data" : [ { "label" : "test", "value" : "50" },{ "label" : "test", "value" : "30" } ] }')

a.render("FC_canvas")

</script>

</apex:page>

 

Are you aware of any issue.

 

Thanks,

Venkat

[Guest Sumedh]

Hi,

 

We are working on this issue.

 

We will update you on this, as we come up with the solution.

 

 

Hi,

By using the example, I have created below code but nothing is getting displayed,

 

 

<apex:page>

<apex:includeScript value="{!$Resource.jquerymini}"/>

<apex:includeScript value="{!$Resource.FusionChartsHigh}"/>

<apex:includeScript value="{!$Resource.FusionCharts}"/>

<div id="FC_canvas"></div>

<script>

a = new FusionCharts("{!$Resource.column3d}","myChartId","400","300","0"

,"1")

a.setJSONData('{ "chart" : {}, "data" : [ { "label" : "test", "value" : "50" },{ "label" : "test", "value" : "30" } ] }')

a.render("FC_canvas")

</script>

</apex:page>

 

Are you aware of any issue.

 

Thanks,

Venkat