Apex Code Development You need to sign in to do that
Don't have an account?
Yash Problem while generating a graph on visual force page using plotkit.
Hi,
The following html code is working fine.
<html>
<head>
<script type="text/javascript" src="E:/Study/plot-kit/plotkit-0.9.1/MochiKit/MochiKit.js"></script>
<script type="text/javascript" src="E:/Study/plot-kit/plotkit-0.9.1/PlotKit/Base.js"></script>
<script type="text/javascript" src="E:/Study/plot-kit/plotkit-0.9.1/PlotKit/Layout.js"></script>
<script type="text/javascript" src="E:/Study/plot-kit/plotkit-0.9.1/PlotKit/Canvas.js"></script>
<script type="text/javascript" src="E:/Study/plot-kit/plotkit-0.9.1/PlotKit/excanvas.js"></script>
<script type="text/javascript" src="E:/Study/plot-kit/plotkit-0.9.1/PlotKit/EasyPlot.js"></script>
<script type="text/javascript" src="E:/Study/plot-kit/plotkit-0.9.1/PlotKit/SweetCanvas.js"></script>
<script language="Javascript">
function drawGraph() {
var layout = new PlotKit.Layout("bar", {});
alert("drawGraph");
layout.addDataset("sqrt", [[0, 0], [1, 1], [2, 1.414], [3, 1.73], [4, 2]]);
alert("A");
layout.evaluate();
alert("B");
var canvas = MochiKit.DOM.getElement("graph");
alert("C");
var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {});
alert("D");
plotter.render();
alert("E");
}
function generateGraph(){
drawGraph();
MochiKit.DOM.addLoadEvent(drawGraph);
}
</script>
</head>
<body onload="drawGraph();">
<form name="demoForm">
<div class="demo" id="canvaspie" width="600" height="200">a</div>
<div class="demo" id="canvasline" width="600" height="200">b</div>
<div class="demo" id="canvasbar" width="600" height="200">c</div>
<div><canvas id="graph" height="400" width="300"></canvas></div>
<input type="submit" onclick="javascript:generateGraph();"/>
</form>
</body>
</html>
Following is the code snippet of visual force page which is not generating the bar chart as of above code.
<apex:page >
<apex:form >
<apex:includeScript value="{!$Resource.MochiKit_js}"/>
<apex:includeScript value="{!$Resource.PlotKit_Base_js}"/>
<apex:includeScript value="{!$Resource.PlotKit_Canvas_js}"/>
<apex:includeScript value="{!$Resource.PlotKit_EasyPlot_js}"/>
<apex:includeScript value="{!$Resource.PlotKit_excanvas_js}"/>
<apex:includeScript value="{!$Resource.PlotKit_Layout_js}"/>
<apex:includeScript value="{!$Resource.PlotKit_SweetCanvas_js}"/>
<html>
<head>
<script language="Javascript">
function 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 = MochiKit.DOM.getElement("graph");
alert("C canvas="+canvas);
var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {});
alert("D");
plotter.render();
alert("E");
}
function generateGraph(){
drawGraph();
MochiKit.DOM.addLoadEvent(drawGraph);
}
</script>
</head>
<body onload="drawGraph();">
<form name="demoForm">
<div><canvas id="graph" height="400" width="300"></canvas></div>
<input type="submit" onclick="javascript:generateGraph();"/>
</form>
</body>
</html>
</apex:form>
</apex:page>
1. It is not calling drawGraph() function at the time of loading the form.
2. It is not able to call the following line
new PlotKit.SweetCanvasRenderer(canvas, layout, {});
I have included the SweetCanvas.js file.
Please tell me the where i m making mistake.