Related
I try to bind a click event on symbol in a svg.
When a element spinns in the symbol, the click event is not fired, stops/pauses the animation, the click event fires.
How can i fix this, that the click events get fired every time i click on it, regardless if the animations run or not.
.as-console-wrapper{
display: none!important;
}
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Schematic</title>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
<!--<script src="assets/js/vue.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.common.dev.min.js"></script>
<script>
const color = {
blue: "#007bff",
indigo: "#6610f2",
purple: "#6f42c1",
pink: "#e83e8c",
red: "#dc3545",
orange: "#fd7e14",
yellow: "#ffc107",
green: "#28a745",
teal: "#20c997",
cyan: "#17a2b8",
white: "#fff",
gray: "#6c757d",
"gray-dark": "#343a40",
primary: "#007bff",
secondary: "#6c757d",
success: "#28a745",
info: "#17a2b8",
warning: "#ffc107",
danger: "#dc3545",
light: "#f8f9fa",
dark: "#343a40"
};
let baseColor = {
background: "#000",
"fill-opacity": 0.5,
stroke: color.white,
"stroke-width": 1,
"stroke-opacity": 0.5
};
let pipeColor = {
fill: color.blue,
opacity: 1
};
let pumpColor = {
fill: color.gray,
"fill-opacity": 0.8
}
document.addEventListener("DOMContentLoaded", () => {
// parent drawing
let draw = SVG().addTo('#schematic').size("100%", 500);
let pumpGroup = draw.symbol();
pumpGroup.click(function () {
alert("Pump clicked!");
});
let height = 50;
let radius = 30;
let chase = pumpGroup.rect(80, height).attr(baseColor).move(0, 0); // 520, 370
let motor1 = pumpGroup.circle(radius).attr(pumpColor).move(45, (height / 2) - radius / 2); // 525, 380
let motor2 = pumpGroup.circle(radius).attr(pumpColor).move(5, (height / 2) - radius / 2); // 565, 380
let fan1 = pumpGroup.image("https://cdn0.iconfinder.com/data/icons/screw/512/fan-ventilator-propeller-rotor-motion-512.png").scale(0.05).move(940, 240); //.animate().rotate(360, 256 + 940, 256 + 240).loop();
let fan2 = pumpGroup.image("https://cdn0.iconfinder.com/data/icons/screw/512/fan-ventilator-propeller-rotor-motion-512.png").scale(0.05).move(140, 240);
//
// 1 = slave, 2 = master
let fant1Runner = fan1.animate(1500).ease("-").rotate(360, 256 + 940, 256 + 240).loop().timeline().pause();
let fant2Runner = fan2.animate(1500).ease("-").rotate(360, 256 + 140, 256 + 240).loop().timeline().pause();
setInterval(() => {
fant2Runner.play();
fant1Runner.play();
setTimeout(() => {
fant2Runner.pause();
fant1Runner.pause();
}, 2500)
}, 5000);
draw.use(pumpGroup).move(10, 10).click(() => {
alert("Clicked on pump!");
});
});
</script>
</head>
<body>
<div id="app">
<div id="schematic"></div>
</div>
</body>
</html>
For demsonstation i create a minimal snippet.
The fans start spinning after 5sec, run then for 2.5 sec and stops.
As written above, when the fans spin, no click fires.
Thanks for any advise.
I have this code:
this.posFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-5.7,43.5])),
name: 'pos'
});
var posStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [10, 10],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
src: 'car.svg'
})
});
this.posFeature.setStyle(posStyle);
this.markerPosSource = new ol.source.Vector({features: [this.posFeature]});
this.layerPos = new ol.layer.Vector({source: this.markerPosSource});
map.addLayer(this.layerPos);
I would like to rotate the icon with an animation (in its rotation). Is it possible? If not, how to rotate without animation?
Thanks in advance!
To smoothly animate a rotation calculate the required rotation based on elapsed time each time the map rendered, e.g. for a complete rotation every 10 seconds:
<!DOCTYPE html>
<html>
<head>
<title>Icon Symbolizer</title>
<link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
<style>
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([0, 0]),
name: 'Null Island',
population: 4000,
rainfall: 500
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'https://openlayers.org/en/v6.4.3/examples/data/icon.png'
})
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var map = new ol.Map({
layers: [vectorLayer],
target: document.getElementById('map'),
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
var startTime = new Date().getTime();
map.on('rendercomplete', function(e) {
var elapsedTime = e.frameState.time - startTime;
var rotation = elapsedTime / 10000 * Math.PI;
iconStyle.getImage().setRotation(rotation);
iconFeature.changed();
});
</script>
</body>
</html>
To rotate it use rotation (NB use radians not degrees)
var posStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [10, 10],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
src: 'car.svg',
rotation: Math.PI/2
})
});
I started developing from an example that shows to integrate three.js + greensock.
Link: http://www.kadrmasconcepts.com/blog/2012/05/29/greensock-three-js/
I am trying to put canvas used by three.js + greensock to a div inside my page designed. But canvas always gets appended to bottom of screen. I tried to do getelementbyid and access my div object but did not work.
Current:
https://www.dropbox.com/s/kowowsjvdnwkl0f/bart.png?dl=0
As current implementation shows canvas is below blue panel but want it to be inside red panel (div).
Can someone help me fix it. I am attaching my code below...Thank you very much in advance!
php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horse Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Jason Kadrmas" />
<!-- Bootstrap Core CSS -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Timeline CSS -->
<link href="css/timeline.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="bower_components/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- jQuery -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="bower_components/raphael/raphael-min.js"></script>
<script src="bower_components/morrisjs/morris.min.js"></script>
<script src="js/morris-data.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/sb-admin-2.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='css/simple.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/lib/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="js/lib/easing/EasePack.min.js"></script>
<script type="text/javascript" src="js/lib/TimelineLite.min.js"></script>
<script type="text/javascript" src="js/lib/TweenLite.min.js"></script>
<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>-->
<script type="text/javascript" src="js/lib/Three.js"></script>
<script type="text/javascript" src="js/ThreeScene.js"></script>
</head>
<body>
<div class="wrapper">
<!-- <div class="navbar-inner">
<div class="container">
<span class="btn-navheader">Timeline Demo - Horse</span>
Reset
Pause
Start
</div>
</div>-->
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-brand">Balloon Task v1.0</a>
</div>
<!-- /.navbar-header -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6 text-left">
<div class="">Balloon Number</div>
</div>
<div class="col-xs-6 text-right">
<div class="huge">1/30</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-9 col-md-18">
<div class="panel panel-red">
<div class="panel-heading">
<div class="row">
<div id="taskcanvas" class="canvas">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row bottom-container">
<div class="col-md-12">
<span>Timeline Demo - Horse</span>
Reset
Pause
Start
</div>
</div>
</div>
</div>
<!-- /#wrapper -->
<script language="javascript" type="text/javascript">
var width = 500,
height = 500,
camera,
scene,
renderer,
SHADOW_MAP_WIDTH = 2048,
SHADOW_MAP_HEIGHT = 2048,
dominoGeometry,
dominoMaterial,
dominoPos = -180,
tweens = [],
type = 0,
d = 8,
basicScene,
tl = new TimelineLite({onComplete: complete});
init();
function init() {
basicScene = new THREE.BasicScene({width: width, height: height});
TweenLite.ticker.addEventListener("tick", render);
initObjects();
}
// Horse morph variables.
var horse;
var paused = true;
var theta = 0;
var duration = 2100;
var keyframes = 15, interpolation = duration / keyframes;
var lastKeyframe = 0, currentKeyframe = 0;
function render() {
basicScene.renderer.render(basicScene.scene, basicScene.camera);
if (horse && !paused) {
// Alternate morph targets
var time = Date.now() % duration;
var keyframe = Math.floor(time / interpolation);
if (keyframe != currentKeyframe) {
horse.morphTargetInfluences[ lastKeyframe ] = 0;
horse.morphTargetInfluences[ currentKeyframe ] = 1;
horse.morphTargetInfluences[ keyframe ] = 0;
lastKeyframe = currentKeyframe;
currentKeyframe = keyframe;
}
horse.morphTargetInfluences[ keyframe ] = (time % interpolation) / interpolation;
horse.morphTargetInfluences[ lastKeyframe ] = 1 - horse.morphTargetInfluences[ keyframe ];
}
}
function initObjects() {
dominoGeometry = new THREE.CubeGeometry(100, 100, 100, 1, 1, 1);
dominoMaterial = new THREE.MeshPhongMaterial();
dominoMaterial.color = new THREE.Color().setRGB(1, 1, 1);
dominoMaterial.ambient = new THREE.Color().setRGB(0.0196078431372549, 0.0196078431372549, 0.0196078431372549);
dominoMaterial.specular = new THREE.Color().setRGB(0.06666666666666667, 0.06666666666666667, 0.06666666666666667);
var light = new THREE.DirectionalLight();
light.intensity = 0.7;
light.castShadow = true;
light.position.set(-320, 350, 100);
basicScene.add(light);
// Floor
var geometry = new THREE.PlaneGeometry(1800, 800, 3, 3);
var material = new THREE.MeshPhongMaterial({color: 0xffffff, wireframe: false});
material.ambient = new THREE.Color().setRGB(0.0196078431372549, 0.0196078431372549, 0.0196078431372549);
material.specular = new THREE.Color().setRGB(0.06666666666666667, 0.06666666666666667, 0.06666666666666667);
var mesh = new THREE.Mesh(geometry, material);
mesh.receiveShadow = true;
mesh.position.set(0, -50, 0);
basicScene.add(mesh);
initDominoes();
initHorse();
}
function initDominoes() {
var mesh, i;
for (i = 0; i < 4; i++) {
mesh = new THREE.Mesh(dominoGeometry, dominoMaterial);
mesh.position.set(dominoPos, 0, 0);
mesh.rotationAutoUpdate = false;
mesh.castShadow = true;
mesh.receiveShadow = false;
mesh.scale.set(0.1, 1, 0.4);
basicScene.add(mesh);
dominoPos += 50;
tweens.push(TweenLite.to(mesh.rotation, 2, {y: Math.PI * 2, ease: Bounce.easeOut, delay: d * 0.1 + i * 0.2}));
}
}
function initHorse() {
var loader = new THREE.JSONLoader(true);
loader.load("models/horse.js", function (geometry) {
horse = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({color: 0x0aa8a5, morphTargets: true}));
horse.scale.set(0.75, 0.75, 0.75);
horse.position.set(-600, -50, 0);
horse.rotation.y = Math.PI / 2;
basicScene.add(horse);
// Click handlers
$('.start').on('click', start).show();
$('.pause').on('click', pause).show();
$('.reset').on('click', complete).show();
// Horse
tweens.push(TweenLite.to(horse.position, d, {x: 900}));
tweens.push(TweenLite.to(horse.position, d * 0.1, {y: 150, delay: d * 0.07, ease: Sine.easeOut}));
tweens.push(TweenLite.to(horse.position, d * 0.12, {y: -50, delay: d * 0.18, ease: Sine.easeIn}));
tl.insertMultiple(tweens);
tl.pause();
});
}
function pause() {
paused = true;
tl.pause();
}
function start() {
paused = false;
tl.play();
}
function complete() {
pause();
tl.progress(0);
}
</script>
</body>
</html>
JS:
THREE.BasicScene = function( args ) {
var container = document.getElementById( "taskcanvas" );
var _this = this;
this.width = args.width;
this.height = args.height;
// Setup scene, camera, and renderer
this.scene = new THREE.Scene();
this.camera = initCamera( this.scene );
this.renderer = initRenderer();
container.appendChild( this.renderer.domElement );
container = document.body.appendChild( container );
container.appendChild( this.renderer.domElement );
function initCamera( scene ) {
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 380;
camera.aspect = _this.width / _this.height;
camera.updateProjectionMatrix();
scene.add( camera );
return camera;
}
function initRenderer() {
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( _this.width, _this.height );
renderer.shadowCameraNear = 3;
renderer.shadowCameraFar = _this.camera.far;
renderer.shadowCameraFov = 50;
renderer.shadowMapBias = 0.0039;
renderer.shadowMapDarkness = 0.3;
renderer.shadowMapWidth = SHADOW_MAP_WIDTH;
renderer.shadowMapHeight = SHADOW_MAP_HEIGHT;
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
return renderer;
}
};
THREE.BasicScene.prototype = {
add: function( obj ) {
this.scene.add( obj );
}
};
CSS:
canvas {
background-image: -webkit-linear-gradient(top, #cee4ff, #fff3e1);
background-image: linear-gradient(to bottom, #cee4ff, #fff3e1);
background-image: -moz-linear-gradient(top, #cee4ff, #fff3e1); //FF3.6+
background-image: -ms-linear-gradient(top, #cee4ff, #fff3e1); //IE10
background-image: -o-linear-gradient(top, #cee4ff, #fff3e1); //Opera 11.10+
}
You might have moved container out by accident
container = document.body.appendChild( container );
container.appendChild( this.renderer.domElement );
Will cause the container to be on body, which will show up at the bottom.
#Vinay had the right answer, you can give the renderer constructor a canvas so you can make your own canvas in the container, then pass that canvas directly to the renderer.
I tried the code:
paper.rect(100, 100, 300,300).animate({transform :"t0,0r120t-0,0"}, 2000, "bounce");
in the stie http://raphaeljs.com/playground.html
And it workes greate, but in my code I cant get the object to rotate on place. Please help? The one I want to rotate is the var blueRect.
Tis is my code:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>SVG/VLM</title>
<link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<style>
#artboard{
width: 240px;
height: 150px;
}
</style>
<script src="raphael.js"></script>
<script type="text/javascript">
var paper;
var blueRect;
var redRect;
var rightButton;
var stopButton;
var xEnd;
function init(){
paper = Raphael("artboard");
// Bakgrunden
var background = paper.rect( 0, 0, "100%", "90px", 0 );
background.attr({fill: "#f3f3ff", "stroke-width": 1, "stroke": "#000"});
// Blåa rektangeln
blueRect = paper.rect( 35, 20, "50px", "50px", 0);
blueRect.attr({fill: "#aaaaff", "stroke-width": 3, "stroke": "#000"});
// Röda rektangeln
redRect = paper.rect( 150, 20, "50px", "50px", 0);
redRect.attr({fill: "#ffaaaa", "stroke-width": 3, "stroke": "#000"});
//Knapparna
rightButton = paper.rect(5, 100, "50px", "22px", 0);
rightButton.attr("fill", "#ff0000");
leftButton = paper.rect(65, 100, "50px", "22px", 0);
leftButton.attr("fill", "#00ff00");
sidewaysButton = paper.rect(125, 100, "50px", "22px", 0);
sidewaysButton.attr("fill", "#0000ff");
stopButton = paper.rect(185, 100, "50px", "22px", 0);
stopButton.attr("fill", "#000");
xEnd = 150;
// Kör funktionen sideways()
go();
};
function go(){
rightButton.click(
function rotateRight(){
blueRect.animate({transform:"t0,0r120t-0,0"}, 2000, "bounce");
});
sidewaysButton.click(
function sine(){
if( xEnd == 150 )
xEnd = 50;
else
xEnd = 150;
redRect.animate( {x: xEnd}, // Attributet som ska animeras följt av till vilket värde den ska animeras
1000, // Tiden
"sine", // Ease funktion
function (){ sine(); } // Anropar sig själv igen för att upprepa funktionen.
);
});
stopButton.click(
function stop(){
redRect.stop();
});
}
</script>
</head>
<body onload="init()">
<div id="artboard"></div>
</body>
</html>
And I'm sorry about all the Swedish comments, hope that dosen't matter for you to understand my code.
In this particular case you would need to get it to rotate around its center by specifying the centre points, so the transform would look like...
blueRect.animate({transform:"r120,60,45"}, 2000, "bounce")
If its variable where it will be, you could get the centre point from getBBox()
jsfiddle
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.
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 :-(