I am new to google api and i had doubts in google visualization table.
My question is there any possible way to hide a particular column in visualization datatable.
Here is my code:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
var cssClass = {rowNumberCell: 'rowNumberCellClass'};
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Place');
data.addRows(4);
data.setCell(0, 0, 'John');
data.setCell(1, 0, 'Sam');
data.setCell(2, 0, 'Andreson');
data.setCell(3, 0, 'Cody');
data.setCell(0, 1, 'Stockholm');
data.setCell(1, 1, 'Dubai');
data.setCell(2, 1, 'India');
data.setCell(3, 1, 'Australia');
visualization = new google.visualization.Table(document.getElementById('tableContainer'));
visualization.draw(data, {
allowHtml: true,
showRowNumber: true,
cssClassNames: cssClass
}
);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="tableContainer"></div>
</body>
</html>
In the above code , I used 'view' option as follows :
visualization.draw(data, {
allowHtml: true,
showRowNumber: true,
cssClassNames: cssClass,
view: {columns: [0]}
});
It is not working.
Any help would be appreciated ! Thanks in Advance !!
Use a DataView-instance as data and set the columns via setColumns:
var cssClass = {rowNumberCell: 'rowNumberCellClass'};
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Place');
data.addRows(4);
data.setCell(0, 0, 'John');
data.setCell(1, 0, 'Sam');
data.setCell(2, 0, 'Andreson');
data.setCell(3, 0, 'Cody');
data.setCell(0, 1, 'Stockholm');
data.setCell(1, 1, 'Dubai');
data.setCell(2, 1, 'India');
data.setCell(3, 1, 'Australia');
var view = new google.visualization.DataView(data);
view.setColumns([0]);//only use the first column
var visualization = new google.visualization.Table(document.getElementById('tableContainer'));
visualization.draw(view, {
allowHtml: true,
showRowNumber: true,
cssClassNames: cssClass
}
);
}
google.setOnLoadCallback(drawVisualization);
<div id="tableContainer"></div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
Related
I am having difficulties to get google charts to work in ASP.NET Core MVC. When using the example from google it works fine (Source: https://developers.google.com/chart/interactive/docs/gallery/columnchart):
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 800px; height: 500px;"></div>
</body>
</html>
My problem is that my data has different lengths in columns, thus sticking to the example above I have sometimes ['Year', 'Sales'] or ['Year', 'Sales', 'Expenses'] and I am trying to make this plot dynamic.
I am using Viewbag to pass around my data, thus I have made available my model with:
#{
dataModel.ChartPlotData = ViewBag.ChartPlotData as ChartPlotData
}
I have defined a class holding my data:
public class ChartPlotData
{
public List<List<object>> Data;
public ChartPlotData() { Data = new List<List<object>>(); }
}
The data is filled via:
private ChartPlotData MockData()
{
var retVal = new ChartPlotData();
var line = new List<object>();
line.Add("Time");
line.Add("Test");
retVal.Data.Add(line);
line = new List<object>();
line.Add("0:05");
line.Add(0);
retVal.Data.Add(line);
line = new List<object>();
line.Add("0:10");
line.Add(1);
retVal.Data.Add(line);
return retVal;
}
Now I was trying to change the part in the plot data as:
var data = google.visualization.arrayToDataTable( #dataModel.ChartPlotData.Data )
It did not work. Next, I extended my class as:
public object[][] DataArray
{
get
{
var tmpLst = new List<object[]>();
foreach (var lstObj in Data)
{
tmpLst.Add(lstObj.ToArray());
}
return tmpLst.ToArray();
}
}
Still no luck. I tried various other things by instantiating the data as
var data = new google.visualization.DataTable();
then tried adding columns and setting cells like
// Add columns
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
// Add empty rows
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));
data.setCell(3, 0, 'Frank');
but somehow I can not get it to work. Any help would be highly appreciated.
Edit:
I tried this:
var data = google.visualization.arrayToDataTable([
#for (var i = 0; i < 1; i++)
{
<text> ['Time','Test'],['00:00',0],['00:05',1] </text>
}
]);
It works. But when I replace it with a string containing the list, it stops working:
var data = google.visualization.arrayToDataTable([
#for (var i = 0; i < 1; i++)
{
<text> #dataModel.dataAsString </text>
}
]);
I can now narrow it down to the following problem. This works fine:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(
#for (var i = 0; i < 1; i++)
{
<text> [['Time', 'Test'], ['0:00', 0], ['0:05', 1]] </text>
}
);
var options = {
chart: {
title: 'Title',
subtitle: 'Some subtitle'
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 800px; height: 500px;"></div>
</body>
</html>
If I define a variable within my datamodel that includes exactly this string and replace
var data = google.visualization.arrayToDataTable(
#for (var i = 0; i < 1; i++)
{
<text> #dataModel.MyDataAsString </text>
}
);
it stops working.
I solved the problem. First, I created a field in html like
<p id="demo"></p>
Then in the java script one can use this to get the representation of the data:
var tmpData = google.visualization.arrayToDataTable([['Time', 'Test',], ['0:00', 1], ['0:05', 0.5]]);
document.getElementById("demo").innerHTML = tmpData.toJSON();
I then created a data class in C# that can generate this structure:
{"cols":[{"label":"Time","type":"string"},{"label":"Test","type":"number"}],"rows":[{"c":[{"v":"0:00"},{"v":1}]},{"c":[{"v":"0:05"},{"v":0.5}]}]}
Setting the value of the field using a variable
<p id="field">#StringRepresentation</p>
and then:
tmpJason = document.getElementById("field").innerHTML;
var data = new google.visualization.DataTable(tmpJason);
I'm working on a map using Google Charts.
When someone clicks on a region every region change opacity while the clicked one keeps the original color.
It's exactly like this but for regions:
https://developers.google.com/chart/interactive/docs/gallery/columnchart#creating-material-column-charts
Do you guys know where to begin ? I can retrieve the current item selected, it's easy... but now I have to retrieve every item but the selected one and change the color of them.
Thanks in advance.
using the colorAxis config option,
assign a higher number to the selected region
reset the remaining regions back to zero
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['England', 0],
['Wales', 0],
['Scotland', 0],
['Ireland', 0],
]);
var options = {
colorAxis: {
minValue: 0,
colors: ['#FFEBEE', '#B71C1C']
},
region: 'GB',
resolution: 'provinces'
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', function () {
for (var i = 0; i < data.getNumberOfRows(); i++) {
if (i === chart.getSelection()[0].row) {
data.setValue(i, 1, 100);
} else {
data.setValue(i, 1, 0);
}
}
chart.draw(data, options);
});
chart.draw(data, options);
},
packages:['geochart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
I am new to google map. I need an help to implement pagination for the table content inside infowindow while clicking marker.
Here is my code :
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages': ['table']});
var map;
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
var mapInfos = [];
var infoWindowView = new google.maps.InfoWindow;
function initialize()
{
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom:5,
center: new google.maps.LatLng(49.072086992455475,-5.05078125),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker=new google.maps.Marker({
position: myCenter
});
marker.setMap(map);
function mapInfoTable(container)
{
this.tableContainer = container;
var me = this;
var cssClass = {rowNumberCell: 'rowNumberCellClass'};
this.dT = new google.visualization.DataTable();
this.dT.addColumn("string", "Name");
this.dT.addColumn("string", "City");
this.populateTable = function()
{
this.dT.addRows([
['A1' ,'C1'],
['A2' ,'C2'],
['A3' ,'C3'],
['A4' ,'C4'],
['A5' ,'C5'],
['A6' ,'C6'],
['A7' ,'C7'],
['A8' ,'C8']
]);
this.draw();
}
this.table = new google.visualization.Table(document.getElementById(this.tableContainer));
this.draw = function()
{
this.table.draw(this.dT, {allowHtml: true, showRowNumber: true, cssClassNames: cssClass, page: 'enable', pageSize : 4, pagingSymbols: {prev: 'Previous',next: 'Next'}});
}
}
google.maps.event.addListener(marker, 'click', function(e) {
var InfoTab = new mapInfoTable('TableInfo');
InfoTab.populateTable(mapInfos);
var content = document.getElementById("TableInfo").innerHTML;
infoWindowView.setContent(content);
infoWindowView.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="mapCanvas" style="width:800px;height:500px"></div>
<div id="TableInfo" style="position:fixed;"></div>
</body>
</html>
Please let me know where the problem lies.
You need to wait for the 'domready' event on the infowindow before populating the table.
proof of concept fiddle
code snippet:
google.load('visualization', '1', {
'packages': ['table']
});
var map;
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
var mapInfos = [];
var infoWindowView = new google.maps.InfoWindow;
function initialize() {
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 5,
center: new google.maps.LatLng(49.072086992455475, -5.05078125),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myCenter
});
marker.setMap(map);
function mapInfoTable(container) {
this.tableContainer = container;
var me = this;
var cssClass = {
rowNumberCell: 'rowNumberCellClass'
};
this.dT = new google.visualization.DataTable();
this.dT.addColumn("string", "Name");
this.dT.addColumn("string", "City");
this.populateTable = function() {
this.dT.addRows([
['A1', 'C1'],
['A2', 'C2'],
['A3', 'C3'],
['A4', 'C4'],
['A5', 'C5'],
['A6', 'C6'],
['A7', 'C7'],
['A8', 'C8']
]);
this.draw();
}
this.table = new google.visualization.Table(document.getElementById(this.tableContainer));
this.draw = function() {
this.table.draw(this.dT, {
allowHtml: true,
showRowNumber: true,
cssClassNames: cssClass,
page: 'enable',
pageSize: 4,
pagingSymbols: {
prev: 'Previous',
next: 'Next'
}
});
}
}
google.maps.event.addListener(marker, 'click', function(e) {
var dTableInfo = document.createElement("div");
dTableInfo.id = "dTableInfo";
google.maps.event.addListener(infoWindowView, 'domready', function() {
var InfoTab = new mapInfoTable('dTableInfo');
InfoTab.populateTable(mapInfos);
});
infoWindowView.setContent(dTableInfo);
infoWindowView.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#mapCanvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="mapCanvas"></div>
I want a circle to act like a heart does, a pulsing animation. So the circle first scales to 75%, then to 100%. I want to make this an infinite loop.
Code:
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var Easing = require('famous/transitions/Easing');
var mainContext = Engine.createContext();
var surface = new Surface({
size: [180, 180],
properties: {
backgroundColor: 'grey',
borderRadius: '50%'
}
});
var stateModifier = new StateModifier();
stateModifier.setTransform(
Transform.scale(0.7, 0.7, 1),
{ duration : 1050 }
);
stateModifier.setTransform(
Transform.scale(1, 1, 1),
{ duration : 450 }
);
mainContext.add(stateModifier).add(surface);
Anyone knows how to implement this?
Use the callback and wrap the setTransform in a function to have each callback call each other when they finish.
Example running snippet
define('main', function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var Easing = require('famous/transitions/Easing');
var mainContext = Engine.createContext();
var surface = new Surface({
size: [180, 180],
properties: {
backgroundColor: 'grey',
borderRadius: '50%'
}
});
var stateModifier = new StateModifier();
function min() {
stateModifier.setTransform(
Transform.scale(0.7, 0.7, 1), {
duration: 1050
},
max
);
}
function max() {
stateModifier.setTransform(
Transform.scale(1, 1, 1), {
duration: 450
},
min
);
}
mainContext.add(stateModifier).add(surface);
surface.on('deploy', function() {
min();
});
});
require(['main']);
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />
<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>
Using famous with meteor and famous-views but at it's core this is really a famous question —
How can I get the position of a Draggable modifier after the on end event and until it stops moving?
Eg. while it's bouncing into a given position what is it's position vector? How can I put this into a session var etc. or pipe it somewhere else?
Pure Famo.us Solution: Use the update and end events on a Draggable.
draggable.on('update', function (e) {
var pos = e.position;
// Use the updating position here
});
draggable.on('end', function (e) {
var pos = e.position;
// Use the final position here
});
As you can see from the snippet below, these two events will allow you to track the drag position. As you drag the surface, the other surface is transitioned to follow using the position of the Draggable.
Updated: returns to origin transform on drag end
define('main', function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var Modifier = require('famous/core/Modifier');
var StateModifier = require('famous/modifiers/StateModifier');
var Draggable = require('famous/modifiers/Draggable');
var TransitionableTransform = require('famous/transitions/TransitionableTransform');
var mainContext = Engine.createContext();
var transTransform = new TransitionableTransform();
transTransform.set(Transform.translate(100, 0, 0));
var surface = new Surface({
size: [300, 100],
properties: {
backgroundColor: 'rgba(255,0,0,0.1)',
cursor: 'pointer'
}
});
var dragSurface = new Surface({
content: 'Drag Me',
size: [100, 100],
properties: {
backgroundColor: 'rgba(0,0,0,0.1)',
cursor: 'pointer'
}
});
var modifier = new Modifier({
origin: [0, 0],
align: [0, 0],
transform: transTransform
});
var draggable = new Draggable();
draggable.subscribe(dragSurface);
var content = 'Not Draggable';
surface.setContent(content);
mainContext.add(modifier).add(surface);
mainContext.add(draggable).add(dragSurface);
draggable.on('update', function (e) {
var pos = e.position;
surface.setContent('Draggable Position is '+pos);
transTransform.set(Transform.translate(pos[0]+100, pos[1], 0));
});
draggable.on('end', function (e) {
var pos = e.position;
surface.setContent('Draggable End Position is '+pos);
transTransform.setTranslate([100, 0, 0],{duration: 300});
this.setPosition([0,0],{duration: 300});
});
});
// Start Main App
require(['main']);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />
<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>
Updated: A more loosely coupled example.
Emit an event object to an EventHandler to be able to listen for the custom event and use the object to apply your outside transition.
define('main', function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var Modifier = require('famous/core/Modifier');
var StateModifier = require('famous/modifiers/StateModifier');
var Draggable = require('famous/modifiers/Draggable');
var TransitionableTransform = require('famous/transitions/TransitionableTransform');
var mainContext = Engine.createContext();
var transTransform = new TransitionableTransform();
transTransform.set(Transform.translate(100, 0, 0));
var surface = new Surface({
size: [300, 100],
properties: {
backgroundColor: 'rgba(255,0,0,0.1)',
cursor: 'pointer'
}
});
var dragSurface = new Surface({
content: 'Drag Me',
size: [100, 100],
properties: {
backgroundColor: 'rgba(0,0,0,0.1)',
cursor: 'pointer'
}
});
var modifier = new Modifier({
origin: [0, 0],
align: [0, 0],
transform: transTransform
});
var draggable = new Draggable();
draggable.subscribe(dragSurface);
//draggable.pipe(surface._eventOutput);
surface._eventOutput.subscribe(draggable);
surface.setContent('Not Draggable');
surface.on('updated', function(e) {
var pos = e.position;
this.setContent('Draggable Position is ' + pos);
transTransform.set(Transform.translate(pos[0] + 100, pos[1], 0));
});
surface.on('ended', function(e) {
var pos = e.position;
this.setContent('Draggable End Position is ' + e.ending);
transTransform.setTranslate([pos[0] + 100, pos[1], 0], {
duration: e.duration
});
});
mainContext.add(modifier).add(surface);
mainContext.add(draggable).add(dragSurface);
draggable.on('update', function(e) {
this.eventOutput.emit('updated', {
position: e.position
});
});
draggable.on('end', function(e) {
var finalPos = [0, 0];
var duration = 300
this.eventOutput.emit('ended', { position: finalPos, ending: e.position, duration: duration });
this.setPosition(finalPos, { duration: duration });
});
});
// Start Main App
require(['main']);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />
<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>
New: Using the Draggable as a transform reference
define('main', function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var Modifier = require('famous/core/Modifier');
var StateModifier = require('famous/modifiers/StateModifier');
var Draggable = require('famous/modifiers/Draggable');
var TransitionableTransform = require('famous/transitions/TransitionableTransform');
var mainContext = Engine.createContext();
var transTransform = new TransitionableTransform();
transTransform.set(Transform.translate(100, 0, 0));
var surface = new Surface({
size: [300, 100],
properties: {
backgroundColor: 'rgba(255,0,0,0.1)',
cursor: 'pointer'
}
});
var dragSurface = new Surface({
content: 'Drag Me',
size: [100, 100],
properties: {
backgroundColor: 'rgba(0,0,0,0.1)',
cursor: 'pointer'
}
});
var draggable = new Draggable();
var modifier = new Modifier({
origin: [0, 0],
align: [0, 0],
transform: getTransform
});
function getTransform() {
var pos = draggable.getPosition();
surface.setContent('Draggable Position is ' + pos); //needs performance enhancement
transTransform.setTranslate([pos[0]+100,pos[1],0]);
return transTransform.get();
}
draggable.subscribe(dragSurface);
surface.setContent('Not Draggable');
mainContext.add(modifier).add(surface);
mainContext.add(draggable).add(dragSurface);
draggable.on('update', function(e) {
});
draggable.on('end', function(e) {
var finalPos = [0, 0];
var duration = 300
this.setPosition(finalPos, {
duration: duration
});
});
});
// Start Main App
require(['main']);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />
<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>
New: Using the Draggable as a transform reference with events
define('main', function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var Modifier = require('famous/core/Modifier');
var StateModifier = require('famous/modifiers/StateModifier');
var Draggable = require('famous/modifiers/Draggable');
var TransitionableTransform = require('famous/transitions/TransitionableTransform');
var mainContext = Engine.createContext();
var transTransform = new TransitionableTransform();
transTransform.set(Transform.translate(100, 0, 0));
var surface = new Surface({
size: [300, 100],
properties: {
backgroundColor: 'rgba(255,0,0,0.1)',
cursor: 'pointer'
}
});
var dragSurface = new Surface({
content: 'Drag Me',
size: [100, 100],
properties: {
backgroundColor: 'rgba(0,0,0,0.1)',
cursor: 'pointer'
}
});
var draggable = new Draggable();
var modifier = new Modifier({
origin: [0, 0],
align: [0, 0],
transform: transTransform
});
function getTransform() {
var pos = draggable.getPosition();
surface.setContent('Draggable Position is ' + pos);
transTransform.setTranslate([pos[0] + 100, pos[1], 0]);
return transTransform.get();
}
draggable.subscribe(dragSurface);
surface._eventOutput.subscribe(draggable.eventOutput);
surface.on('updating', function(e) {
var pos = e.position;
surface.setContent('Draggable Position is ' + pos);
transTransform.setTranslate([pos[0] + 100, pos[1], 0]);
});
surface.on('startedEnd', function(e) {
modifier.transformFrom(getTransform);
});
surface.on('endedEnd', function(e) {
modifier.transformFrom(transTransform);
});
surface.setContent('Not Draggable');
mainContext.add(modifier).add(surface);
mainContext.add(draggable).add(dragSurface);
draggable.on('update', function(e) {
this.eventOutput.emit('updating', {
position: e.position
});
});
draggable.on('end', function(e) {
var finalPos = [0, 0];
var duration = 2000
this.eventOutput.emit('startedEnd', {
position: e.position,
finalPos: finalPos
});
this.setPosition(finalPos, {
duration: duration
}, function() {
this.eventOutput.emit('endedEnd', {
position: this.position
});
}.bind(this));
});
});
// Start Main App
require(['main']);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />
<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>