function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ShashwatShashwat 

How to create customised graphs using VF ???

Hey !!!

Can anyone help me out solving this problem....

customised graphs, charts etc using VF ???
dchasmandchasman
We do not currently have any charting components (we do plan to release some in the future) but you can create your own custom components to generate charts (lack of binary content generation support is a challenge for this right now). I have had excellent success generating charts client side using open source libraries like http://www.liquidx.net/plotkit/ that are trivial to wrap in a custom visualforce component (create a static resource that contains the plotkit library files and have your component (built using other components like <apex:repeat> to iterate over you data set) generate javascript into a <script> that uses the plotkit api to build the chart in the browser...

I'll try to post a basic sample here soon.

BTW if you have the funds www.ejschart.com looks pretty amazing and adding into Visualforce using a custom component would follow the same steps aoutlined above.



Message Edited by dchasman on 04-16-2008 07:21 PM
ShashwatShashwat
Hey !!!

Thanks Doug for your resourcefull reply, but my problem still retains.

Can u clarify one more thing ??

Can we use XHTML and CSS style sheet to generate graphs, bar graphs, pie charts with VF for salesforce object or component???
And if yes then how can it be done to generate such graphs at runtime ?? I mean thes graphs being dynamic rathe than being static and predefined ??


Thanks and Regards

Shashwat Verma
Persistent SysPersistent Sys
Hi Doug Chasman,

We are trying make use of plotkit in a VF page which includes relevant .js files of plotkit as static resources. But the call to PLotKit.SweetCanvasRenderer seems to fail.

Can you pl post some basic sample on what you tried? Thanks.
dchasmandchasman
FYI I am a much bigger fan of the commercial EJSChart product - well worth the cost.

W.r.t. PlotKit I suspect that you have made the common error to attempt to create individual static resources for each js file /or you forgot to also include the required dependency on the MochiKit library. oine of the very important functions of the Static Resource feature is to maintain the integrity of libraries inside of a ZIP, Jar, or GZIP file. Most javascript libraries have relative references from js/css/image etc to another and when you blow them apart this relationship is lost. Static Resources basically function like a file system within a file when you use zips - this was a major issue with using Documents for this kind of thing and overcoming this was a key design goal for VF.

Basically you either need to create a static resource for the plotkit zip and the mochikit zip as is and then you reference into them or if you want to lighten these up a bit (this is what I do) you can unzip each locally and create new zips (again 1 for each library) that contain just the lib files themselves (not all the doc/examples). See below for my example.


Message Edited by dchasman on 07-02-2008 09:53 AM
Persistent SysPersistent Sys

Hi Doug,

 

Appreciate your quick reply. Now we included both mochikit as well as plotkit as separate archives. I tried the same example in a dev org but it seems to break after the alert("C canvas="+canvas); call. We are using plotkit 0.9.1 and mochikit 1.3.1 version.

 

Code:
<apex:page >
        <apex:includeScript value="{!URLFOR($Resource.mochikit_1_3_1_zip,'/MochiKit-1.3.1/lib/MochiKit/MochiKit.js')}"/>
        <apex:includeScript value="{!URLFOR($Resource.plotkit_0_9_1_zip,'/plotkit-0.9.1/PlotKit/Base.js')}"/>
        <apex:includeScript value="{!URLFOR($Resource.plotkit_0_9_1_zip,'/plotkit-0.9.1/PlotKit/Layout.js')}"/>
        <apex:includeScript value="{!URLFOR($Resource.plotkit_0_9_1_zip,'/plotkit-0.9.1/PlotKit/Canvas.js')}"/>        
        <apex:includeScript value="{!URLFOR($Resource.plotkit_0_9_1_zip,'/plotkit-0.9.1/PlotKit/SweetCanvas.js')}"/>
        <div><canvas id="graph" height="300" width="300">Graph</canvas></div>
        
        <script type="text/javascript">
            function drawGraph(){
                alert("In drawGraph");
                var layout = new PlotKit.Layout("bar", {});
                alert("drawGraph layout="+layout);
                layout.addDataset("sqrt", [[0, 0], [1, 1], [2, 1.414], [3, 1.73], [4, 2]]);
                alert("A");
                layout.evaluate();
                alert("B");
                //var canvas = document.getElementById("{!$Component.barchart}");
                var canvas = MochiKit.DOM.getElement("graph");
                alert("C canvas="+canvas);
                var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {});
                alert("D");
                plotter.render();
                alert("E");
            }
            MochiKit.DOM.addLoadEvent(drawGraph);
        </script>

</apex:page>


 
Can we get your contact number so that we can discuss? This is real urgent and based on its success we need to make a GO-NOGO call.

Thanks.
Persistent SysPersistent Sys
Good news!
Resolved. The page wasn't getting refreshed. Upon relaoding it worked.

Thanks for all the help.
abhi17abhi17

Hi Doug

 

I tried using EJS chart on a html page and it works well, but when i am uploading the scripts and images provided by EJS to 'Static Resources' and trying to call the same from Visual force page, it gives me a JS error saying:

Message: Syntax error
Line: 15
Char: 1
Code: 0
URI: https://c.ap1.visual.force.com/resource/1299672253000/EJSChart_JS

 

Message: Object expected
Line: 98
Char: 3
Code: 0
URI: https://c.ap1.visual.force.com/apex/TestChart?core.apexpages.devmode.url=1

 

Kindly help me in resolving this issue.

 

Thanks in advance

Abhishek