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
scottskiblackscottskiblack 

Dashboard S-Control

What versions of Dojo does SFDC support? 
Is there a way to use the graphs (bar charts, stacked, etc) that Salesforce reporting already uses?
I am looking for the lightest way to create a dashboard with an s-control using Dojo or SFDC API...

cheenathcheenath
Dojo 0.4.1.

You can use the chat widget from dojo in sfdc.
scottskiblackscottskiblack
I am using the following script to include dojo for access to its functionality.
        <script type="text/javascript" src="/js/dojo/0.3.1/dojo.js"></script>

As well as using the charting require from dojo and so on.
    dojo.require("dojo.widget.Tooltip");

I am using the Ajax ToolKit but it keeps utilizing Dojo 3.1 which I didn't think covered Charts yet?  Only 4.1 and above, but I may be wrong.  What versions of Dojo does SFDC support, can I just change the numbers in the src to the later version? ----->  <script type="text/javascript" src="/js/dojo/0.4.1/dojo.js"></script>
scottskiblackscottskiblack

I tried to use the 3.1 version of DOJO in SFDC. but I get the following error on a simple chart example.

                             FATAL: Could not load 'dojo.collections.Store'; last tried '__package__.js'

When I try to use 4.1 nothing happens at all.

Just in case I am missing something or going about it wrong the code is below.

<html>
<!--
Generated by AJAX tools
Date : Tue May 29 2007 08:36:32 GMT-0500 (Central Daylight Time)
Template : simple.html by manoj@cheenath.com
SControl : dojo_chart
-->
<head>
<script src="/soap/ajax/8.0/connection.js"></script>
<script src="/js/dojo/0.4.1/dojo.js"></script>
<script src="/soap/ajax/8.0/apex.js"></script>

<script type="text/javascript">
//Include the required dojo libraries/namespaces
dojo.require("dojo.collections.Store");
dojo.require("dojo.charting.Chart");
dojo.require('dojo.json');
</script>

<script type="text/javascript">
dojo.addOnLoad(function() {
// define the graph
var exampleData =
[
{ time: 10, count: 7382 },
{ time: 20, count: 1852 },
{ time: 35, count: 2397 },
{ time: 50, count: 1442 },
{ time: 55, count: 1854 }
];

var store = new dojo.collections.Store();
store.setData(exampleData);

var timeSeries = new dojo.charting.Series({
dataSource: store,
bindings: { x: "time", y: "count" },
label: "Example Series"
});

// next axis definitions to specify data display range, data source, tick labels
// Define the x-axis
var xAxis = new dojo.charting.Axis();

//Set the upper and lower data range values
xAxis.range = { lower: exampleData[0].time, upper: exampleData[exampleData.length-1].time };

xAxis.origin = "max";
xAxis.showTicks = true;
xAxis.label = "Example chart";

//Setup the x tick marks on the chart
xAxis.labels = [
{ label: 'First', value: 20 },
{ label: 'Second', value: 25 },
{ label: 'Third', value: 35 },
{ label: 'Fourth', value: 50 },
{ label: 'Fifth', value: 55 }
];
//Define the y-axis
var yAxis = new dojo.charting.Axis();
yAxis.range = { lower: 0, upper: 5000 };
yAxis.showLines = true;
yAxis.showTicks = true;
yAxis.label = "Time Taken";
 
//Setup the y tick marks on the chart
yAxis.labels = [
{ label: "0s", value: 0 },
{ label: "1s", value: 1000 },
{ label: "2s", value: 2000 },
{ label: "3s", value: 3000 },
{ label: "4s", value: 4000 },
{ label: "5s", value: 5000 }
];
// define how to plot by assign series with a plotter to render
var chartPlot = new dojo.charting.Plot(xAxis, yAxis);
chartPlot.addSeries({
data: timeSeries,
plotter: dojo.charting.Plotters.CurvedArea
});

// this needs to be rendered into a specific area, so define PlotArea and add plot
var chartPlotArea = new dojo.charting.PlotArea();
chartPlotArea.size = { width: 380, height: 170 };
chartPlotArea.padding = { top: 20, right: 20, bottom: 30, left: 50 };
//Add the plot to the area
chartPlotArea.plots.push(chartPlot);

// finally create chart and add the plotarea. THE CHART ALSO NEEDS a container element, which
// one assigns to the chart.node
var chart = new dojo.charting.Chart(null, "Example chart", "This is the example chart description");
//Add the plot area at an offset of 10 pixels from the top left
chart.addPlotArea({ x: 10, y: 10, plotArea: chartPlotArea });
//Setup the chart to be added to the DOM on load
dojo.addOnLoad(function()
{
chart.node = dojo.byId("GraphContainerArea");
chart.render();
});
}

</script>

</head>
<body>
Body of the scontrol here
</body>
</html>
scottskiblackscottskiblack
Sorry I took out the first  dojo function to add on page load cause it is being called at the end of the script anyhow.
 
Sorry for that mistake, but I am still receiving the same errors?
 
 
Has anyone used Dojo Charts successfully in SFDC? 
 
Thanks for your help and input! :)
cheenathcheenath
Yes, I have DOJO chart work in sfdc. I will attach a sample here:

Code:
<html>
<!--
Generated by AJAX tools
Date     :  Fri Apr 20 2007 17:06:17 GMT-0700 (Pacific Daylight Time)
Template :  simple.html by manoj@cheenath.com
SControl   :  A_graph
 -->
<head>
<script src="/soap/ajax/9.0/connection.js"></script>
<script src="/js/dojo/0.4.1/dojo.js"></script> 
<script src="/soap/ajax/9.0/apex.js"></script> 

  <title>Dojo Charting Engine, general tests</title>
<script>
   dojo.require("dojo.collections.Store");
   dojo.require("dojo.charting.Chart");
   dojo.require('dojo.json');

   dojo.addOnLoad(update);


    var json = [
     { x: 0, y: 110},
     { x: 10, y: 24},
     { x: 45, y: 54}
    ];

                        function display(){
/*
var json = [
     { x: 0, y: 110, size:20, x2:20, high:110, low: 80, open:90, close:96 },
     { x: 10, y: 24, size:4, x2: 25, high:56, low: 43, open:43, close:54 },
     { x: 15, y:63, size:32, x2: 30, high: 100, low: 40, open:56, close: 96 },
     { x: 25, y: 5, size:13, x2: 35, high: 40, low: 36, open:40, close:36 },
     { x: 40, y: 98, size:7, x2: 40, high: 86, low: 66, open: 80, close: 70 },
     { x: 45, y: 54, size:18, x2: 45, high: 50, low: 0, open: 42, close: 4 }
    ];
*/


    var store = new dojo.collections.Store();
    store.setData(json);
 
    // define the chart.
    var s1 = new dojo.charting.Series({
     dataSource:store,
     bindings:{ x:"x", y:"y" /*, size:"size"*/ },
     label:"The Main Series"
    });

    // keep going.
    var xA = new dojo.charting.Axis();
    xA.range={upper:130, lower:0};
    xA.origin="max";
    xA.showTicks = true;
    xA.label = "Iteration";
    xA.labels = [ 0, 20, 40, 60, 80, 100 ];
 
    var yA = new dojo.charting.Axis();
    yA.range={upper:180,lower:0};
    yA.showLines = true;
    yA.showTicks = true;
    yA.labels = [ {label:"min", value:0 }, { label:"35",value:35 }, { label:"max", value:120 } ];
    yA.label = "Response Time in MS"
 
    var p = new dojo.charting.Plot(xA, yA);
    p.addSeries({ data:s1, plotter: dojo.charting.Plotters.CurvedLine });
    var pA = new dojo.charting.Plot(xA, yA);
    pA.renderType = dojo.charting.RenderPlotSeries.Grouped;
 
    var pa = new dojo.charting.PlotArea();
    pa.size={width:700,height:500};
    pa.padding={top:20, right:20, bottom:30, left:50 };
    pa.plots.push(p);
    //pa.plots.push(pA);

    // auto assign colors, and increase the step (since we've only 2 series)
    s1.color = pa.nextColor();
    //s2.color = pa.nextColor();
    //s3.color = pa.nextColor();
    //s4.color = pa.nextColor();
    //s5.color = pa.nextColor();

   
    var chart = new dojo.charting.Chart(null, "Test chart", "This is a potential description");
    chart.addPlotArea({ x:50,y:50, plotArea:pa });
    //chart.addPlotArea({ x:50,y:250, plotArea:pa2 });
   
    chart.node = dojo.byId("chartTest1");
    chart.render();
   };

var xval = 10;
var yval = 10;

function update() {
  json.push({ x: xval, y: yval});
xval += 10;
yval += 10;
display();
  if (xval <300) {
    setTimeout(update, 200);
  }
}

  </script>
  <style>
   #chartTest1 {
    margin:12px;
    width:800px;
    height:700px;
    background-color:#dedeed;
    border:1px solid #999;
   }
  </style>
 </head>
 <body>
  <div id="chartTest1"></div>
 </body>
</html>

 
scottskiblackscottskiblack
thanks for the example!