kinetic data demo

by pixeline

HTML

<div id="container"></div>

JavaScript

var mydata=[{nom:'the artist',duree:120,oscar:5},{nom:'la chute',duree:110,oscar:3} ];

mydata =[{nom:'the artist',minute_x:14,minute_y:100,restriction_x:98,restriction_y:499,color:'blue'}, {nom:'ze chute',minute_x:98,minute_y:23,restriction_x:76,restriction_y:419,color:'red'}];

var stage = new Kinetic.Stage({
        container: 'container',
        width: 800,
        height: 600
      });
var layer = new Kinetic.Layer();

for(i=0;i<mydata.length;i++){
    var film = mydata[i];
    var filmLine = new Kinetic.Line({
        points: [film.minute_x, film.minute_y, film.restriction_x, film.restriction_y],
        stroke: film.color,
        strokeWidth: 2,
        lineCap: 'round',
        lineJoin: 'round'
      });
    layer.add(filmLine);
}
stage.add(layer);