how to use the Dojo code in Enyo..?

Question

I'm a new developer in Enyo(TouchPad). I would like to develop an app consisting some charts in it. so I'm trying to use Dojo framework libraries in Enyo.

Can anyone please help me in how to include the dojo code my application. I'm posting my code, please have a look.

INDEX.HTML :

<!doctype html>
<html>
<head>
<title>Canvas Demo</title>
<script src="../../../../1.0/framework/enyo.js" type="text/javascript"></script>
<script src="lib/widget/Chart2D.js" type="text/javascript"> </SCRIPT>
<script src="lib/chart2D.js" type="text/javascript"> </SCRIPT>
<script src="lib/tom.js" type="text/javascript"> </SCRIPT>
</head>
<body>
<script type="text/javascript">
enyo.create({kind: "CanvasDemo"}).renderInto(document.body);
</script>
</body>
</html>

.Js file ::

enyo.kind({
name: "CanvasDemo", 
kind: enyo.Control,
nodeTag: "canvas",
domAttributes: { 
    width:"300px", 
    height:"300px", 
    style: "border: 2px solid #000;"
},
// After the canvas is rendered
rendered: function() {

  // I want to place the dojo code here to display a chart in the canvas.

  }
   });

DOJO CODE ::

dojo.require('dojox.charting.Chart2D');
dojo.require('dojox.charting.widget.Chart2D');
dojo.require('dojox.charting.themes.Tom');

/* JSON information */
var json = {
    January: [12999,14487,19803,15965,17290],
    February: [14487,12999,15965,17290,19803],
    March: [15965,17290,19803,12999,14487]
};

/* build pie chart data */
var chartData = [];
dojo.forEach(json['January'],function(item,i) {
    chartData.push({ x: i, y: json['January'][i] });
});

/* resources are ready... */
dojo.ready(function() {

    var chart2 = new dojox.charting.Chart2D('chart2').
                    setTheme(dojox.charting.themes.Tom).
                    addPlot('default', {type: 'Pie', radius: 70, fontColor: 'black'}).
                    addSeries('Visits', chartData).
                    render();
    var anim = new dojox.charting.action2d.MoveSlice(chart2, 'default');
    chart2.render();

});

Please help me in how to modify the dojo code ,so that it can work in the enyo..

Thanks in Advance.

Regards, Harry.

index.html :

<!doctype html>
 <html>
 <head>
<title>dojo</title>
<script src="C:\WebOs\Development\enyo\1.0\framework\enyo.js" type="text/javascript"></script>
<script type="text/javascript" src="C:\Users\pangulur\Downloads\dojo-release-1.6.1-src\dojo-release-1.6.1-src\dojo\dojo.js"></script>
 /head>
 <body>
<script type="text/javascript">
new enyo.Canon.graphs2().renderInto(document.body);
</script>
</body>
</html>

Source/Charts1.js :

 enyo.kind({
name: "enyo.Canon.graphs2",
kind: enyo.Control,
components: [
    {kind: "PageHeader", content: "bargraph"},
    //{style: "padding: 10px", content: "Note: In the browser, you can press ctrl-~ to display the app menu."},
    {kind: "Button", caption: "display graph", onclick: "displayGraph", flex: 1},
    ],
      displayGraph: function() {

 dojo.require('dojox.charting.Chart2D');
    dojo.require('dojox.charting.widget.Chart2D');
    dojo.require('dojox.charting.themes.PlotKit.green');

    /* JSON information */
    var json = {
        January: [12999,14487,19803,15965,17290],
        February: [14487,12999,15965,17290,19803],
        March: [15965,17290,19803,12999,14487]
    };

    /* build pie chart data */
    var chartData = [];
    dojo.forEach(json['January'],function(item,i) {
        chartData.push({ x: i, y: json['January'][i] });
    });

    /* resources are ready... */
    dojo.ready(function() {

        //create / swap data
        var barData = [];
        dojo.forEach(chartData,function(item) { barData.push({ x: item['y'], y: item['x'] }); });
        var chart1 = new dojox.charting.Chart2D('chart1').
                        setTheme(dojox.charting.themes.PlotKit.green).
                        addAxis('x', { fixUpper: 'major', includeZero: false, min:0, max:6 }).
                        addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major' }).
                        addPlot('default', {type: 'Columns', gap:5 }).
                        addSeries('Visits For February', chartData, {});
        var anim4b = new dojox.charting.action2d.Tooltip(chart1, 'default');
        var anim4c = new dojox.charting.action2d.Shake(chart1,'default');
        chart1.render();
      //  var legend4 = new dojox.charting.widget.Legend({ chart: chart1 }, 'legend3');

    });



}
});

Here I'm not sure about how to call the dojo code in enyo.

and

depends.js :

 enyo.depends(

"source/charts1.js",
"lib/Chart2D.js",
"lib/widget/Chart2D.js",
"lib/blue.js",
"lib/dojo.js"   
 );

Now I'm getting the following errors :

error: Uncaught ReferenceError: dojo is not defined, Chart2D.js:1
  [20110818-09:33:13.136736] error: Uncaught ReferenceError: dojo is not defined,    widget/Chart2D.js:1
 [20110818-09:33:13.138227] error: Uncaught ReferenceError: dojo is not defined, blue.js:1
 [20110818-09:33:13.150707] error: Uncaught TypeError: Cannot read property 'graphs2' of undefined, index.html:10

It is working fine when I use it as a .HTML file with the same code in browser.

Chart.html :

<html>
<head>

<title>dojo</title>

<script type="text/javascript" src="C:\Users\pangulur\Downloads\dojo-release-1.6.1- src\dojo-release-1.6.1-src\dojo\dojo.js"></script>


</head>
<body>

<div id="chart1" style="width:260px;height:200px;"></div>
<script>
dojo.require('dojox.charting.Chart2D');
dojo.require('dojox.charting.widget.Chart2D');
dojo.require('dojox.charting.themes.PlotKit.green');

/* JSON information */
var json = {
    January: [12999,14487,19803,15965,17290],
    February: [14487,12999,15965,17290,19803],
    March: [15965,17290,19803,12999,14487]
};

/* build pie chart data */
var chartData = [];
dojo.forEach(json['January'],function(item,i) {
    chartData.push({ x: i, y: json['January'][i] });
});

/* resources are ready... */
dojo.ready(function() {

    //create / swap data
    var barData = [];
    dojo.forEach(chartData,function(item) { barData.push({ x: item['y'], y: item['x'] }); });
    var chart1 = new dojox.charting.Chart2D('chart1').
                    setTheme(dojox.charting.themes.PlotKit.green).
                    addAxis('x', { fixUpper: 'major', includeZero: false, min:0, max:6 }).
                    addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major' }).
                    addPlot('default', {type: 'Columns', gap:5 }).
                    addSeries('Visits For February', chartData, {});
    var anim4b = new dojox.charting.action2d.Tooltip(chart1, 'default');
    var anim4c = new dojox.charting.action2d.Shake(chart1,'default');
    chart1.render();
    var legend4 = new dojox.charting.widget.Legend({ chart: chart1 }, 'legend3');

});
</script>


</body>
</html>

Please help me in working with this in Enyo. Thanking You.

Kind Regards, Harry.

Diego Freniche · Answer 1 · 2011-08-20T07:55:42.887

I don't think you have to modify the Dojo code. In Enyo, you have to tell the framework where it has to look for included JS files. Yo do so editing the depends.js file.

The index.html:

 <!doctype html>
 <html>
 <head>
 <title>Canvas Demo</title>
 <script src="../../../../1.0/framework/enyo.js" type="text/javascript"></script>
 </head> 
 <body>
 <script type="text/javascript">
  new enyo.Canon.graphs2().renderInto(document.body);
 </script>
 </body>
 </html>

and depends.js:

 enyo.depends(
    "lib/dojo/dojo.js" ,

    "source/charts1.js"
     );

You'll have to copy everything Dojo needs to work (dojo, dojox, dijit) into lib, and check enyo paths.

I get a Dojo error when creating the new Chart2D object, and I'm not a Dojo expert to fix this. It's in the line:

  var chart1 = new dojox.charting.Chart2D("simplechart");

I've modified your code:

enyo.kind({
name: "enyo.Canon.graphs2",
kind: enyo.Control,
components: [
{kind: "PageHeader", content: "bargraph"},
//{style: "padding: 10px", content: "Note: In the browser, you can press ctrl-~ to display the app menu."},
{kind: "Button", caption: "display graph", onclick: "displayGraph", flex: 1},
],
  displayGraph: function() {

dojo.require('dojox.charting.Chart2D');
dojo.require('dojox.charting.widget.Chart2D');
dojo.require('dojox.charting.themes.PlotKit.green');

/* JSON information */
var json = {
    January: [12999,14487,19803,15965,17290],
    February: [14487,12999,15965,17290,19803],
    March: [15965,17290,19803,12999,14487]
};

/* build pie chart data */
var chartData = [];
dojo.forEach(json['January'],function(item,i) {
    chartData.push({ x: i, y: json['January'][i] });
});

/* resources are ready... */
dojo.ready(function() {

    //create / swap data
    var barData = [];
    dojo.forEach(chartData,function(item) { barData.push({ x: item['y'], y: item['x'] }); });
    var chart1 = new dojox.charting.Chart2D("simplechart");  // HERE IS THE PROBLEM
    chart1.setTheme(dojox.charting.themes.PlotKit.green);
                    chart1.addAxis('x', { fixUpper: 'major', includeZero: false, min:0, max:6 });
                    chart1.addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major' });
                    chart1.addPlot('default', {type: 'Columns', gap:5 });
                    chart1.addSeries('Visits For February', chartData, {});
    var anim4b = new dojox.charting.action2d.Tooltip(chart1, 'default');
    var anim4c = new dojox.charting.action2d.Shake(chart1,'default');
    chart1.render();
  //  var legend4 = new dojox.charting.widget.Legend({ chart: chart1 }, 'legend3');

});

} });

The object doesn't get instantiated. Got null pointer :-(

Hi, Thanks for the response. I haven't done this in depends before. Now I tried this. but still I haven't get dojo executed. I,m reposting my code below please have a look. Thanks. — harry, Aug 18 '11 at 09:05

how to use the Dojo code in Enyo..?

1 Answers1