Fusioncharts & Visualforce

[prakash chaudhary]

Please tell me how to connect fusion charts with visualforce ?

Is it necessary to use MySQL or MSACeess database while using Fusioncharts in JSP & Can we do it by using XML ?

[FusionCharts Support]

Hi,

 

If you have a connector to your visualforce data through which you can query data and if you can build FusionCharts acceptable data format (XML/JSON), you can use the data from your visualfoce data and render chart. You do not need to use MySQL or other, in that case.

[prakash chaudhary]

Connector ???

Can u explain me, wht exactly type of connector is required ?

Please explain your views fully & tell me more about Connector ?

Hi,

 

If you have a connector to your visualforce data through which you can query data and if you can build FusionCharts acceptable data format (XML/JSON), you can use the data from your visualfoce data and render chart. You do not need to use MySQL or other, in that case.

[Sanjukta]

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.

 

Hope this helps.