canvas & charts

17
HTML - CANVAS Crtanje grafova Nove tehnologije u razvoju društva, © 2014

Upload: neven-palcec

Post on 15-May-2015

133 views

Category:

Software


3 download

Tags:

DESCRIPTION

In this presentation we have explain how easy is to draw charts in canvas using just a few lines of javascript. We have present to types of chart line and polar and for drawing this charts we have used two commands: lineTo & ARC We have also present how to draw real time charts using SignalR technology. We have mange show the charts by adding just few lines of code…

TRANSCRIPT

Page 1: Canvas & Charts

HTML - CANVASCrtanje grafova

Nove tehnologije u razvoju društva, © 2014

Page 2: Canvas & Charts

2

LITERATURAHTML Canvas Cookbook

Preko 80 Canvas primjera Eric Rowell Publish by Packt Publishing Ltd. (Nov 2011)

HTML5 Canvas – Native Interactivity and Animation for the Web Steve Fulton and Jeff Fulton Publis by O’Reilly Media Inc. (May 2011)

Safari HTML5 Canvas Guide Apples Developers 2013-09-18 | Copyright © 2013 Apple Inc. All Rights Reserved.

27.4.2014.

Page 3: Canvas & Charts

3

UVOD HTML objekt

The <canvas> tag is new in HTML5. APPLE > 2004 ; Standard > 2005 Javascript CSS Raster based

Podržava video, audio, crtanje objekata igre, transformacije, animacije

…allows dynamic, scriptable rendering of 2D shapes and bitmap images…27.4.2014.

Compatibilityhttp://caniuse.com/canvas

Page 4: Canvas & Charts

4

IMPLEMENTACIJA<!DOCTYPE html><html><head> <script> window.onload = function () { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // crtanje… }; </script></head><body> <canvas id="myCanvas" width="578" height="200"> This text is displayed if your browser does not support HTML5 Canvas! </canvas></body></html>

27.4.2014.

Page 5: Canvas & Charts

5

CRTANJE LINIJE window.onload = function(){ // get the canvas DOM element by its ID var canvas = document.getElementById("myCanvas"); // declare a 2-d context using the getContext() method of the // canvas object var context = canvas.getContext("2d");

// set the line width to 10 pixels context.lineWidth = 10; // set the line color to blue context.strokeStyle = "blue"; // position the drawing cursor context.moveTo(50, canvas.height - 50); // draw the line context.lineTo(canvas.width - 50, 50); // make the line visible with the stroke color context.stroke(); };

27.4.2014.

Page 6: Canvas & Charts

6

PRIMJERI http://www.mrspeaker.net/dev/parcycle/

http://bomomo.com/

http://hakim.se/experiments/html5/magnetic/02/

http://kennethjorgensen.com/blog/2014/canvas-trees/

http://www.relfind.com/game/magician.html

http://hakim.se/experiments/html5/origami/

http://hakim.se/experiments/html5/wave/03/

http://hakim.se/experiments/html5/trail/03/

http://peterned.home.xs4all.nl/3d/

https://developer.mozilla.org/en-US/demos/detail/zen-photon-garden/launch

http://codepen.io/suffick/pen/KrAwx

http://www.freeriderhd.com/t/1010-contest-entry

http://www.jqueryrain.com/?usKWk5aQ27.4.2014.

Page 8: Canvas & Charts

8

CHART.JS http://www.chartjs.org/

//Get the context of the canvas element we want to select var ctx = document.getElementById("myChart").getContext("2d"); var myNewChart = new Chart(ctx).PolarArea(data);

27.4.2014.

Page 9: Canvas & Charts

9

PODACI

var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { fillColor: "rgba(220,220,220,0.5)",

strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", data: [65, 59, 90, 81, 56, 55, 40] }, { fillColor: "rgba(151,187,205,0.5)",

strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", data: [28, 48, 40, 19, 96, 27, 100] } ] }

27.4.2014.

Page 10: Canvas & Charts

10

CRTANJE GRAFA

27.4.2014.

Page 11: Canvas & Charts

11

CRTANJE GRAFAfunction CreatePieChart(c, data) {

//dohvat objekata var ctx = c.getContext("2d");

var lastend = 0; //zadnja vrijednost var myTotal = 0; //ukupna vrijednost podataka

var data = [200, 60, 15, 90]; //dodavanje vrijdnosti var myColor = ['red', 'green', 'blue', 'gray']; //uz vrijednosti, ide i boja

//čistimo radnu površinu ctx.clearRect(0, 0, c.width, c.height);

for (var e = 0; e < data.length; e++) { myTotal += data[e]; //zbrajamo ukupnu vrijednost }

for (var i = 0; i < data.length; i++) { ctx.fillStyle = myColor[i]; //uzimamo boju ctx.beginPath(); //početak crtanja ctx.moveTo(c.width / 2, c.height / 2); //pozicioniramo se na početak ctx.arc(c.width / 2, c.height / 2, c.height / 2, lastend, lastend + (2 * Math.PI * (data[i] / myTotal)), false); ctx.lineTo(c.width / 2, c.height / 2); //crtamo liniju prema centru ctx.fill(); //punimo se bojom lastend += Math.PI * 2 * (data[i] / myTotal); //pamtimo zadnju poziciju }}

27.4.2014.

Page 12: Canvas & Charts

12

ARC NAREDBA

27.4.2014.

Parametar Opis parametra

x The x-coordinate of the center of the circle

y The y-coordinate of the center of the circle

r The radius of the circle

sAngle The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)

eAngle The ending angle, in radians

counterclockwise

Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.

Page 13: Canvas & Charts

13

REAL TIME Prikupiti podatke

Više izvora Jedna HTML stranica No refresh!!!

Prikazati na grafu Promjene… Prezentacija

27.4.2014.

Page 14: Canvas & Charts

14

SIGNALR & SMOOTHE CHARTS

27.4.2014.

SignalRreal-time web functionality

http://smoothiecharts.org/http://signalr.net

Page 15: Canvas & Charts

15

DEMO

27.4.2014.

http://bit.ly/1fq7OpRhttp://is.gd/v7p8MX

Page 16: Canvas & Charts

16

ZAKLJUČAK Budućnost

Nove stvari Frameworci Aplikacije Prezentacije Poslovni sustavi ….

Jednostavnost & Fleksibilnost Javascript Odlične performanse

27.4.2014.

No matter what platform or tools you use, the HTML5 revolution will soon change the way you build web applications, if it hasn't already.

Page 17: Canvas & Charts

17

PITANJA?

27.4.2014.

Neven Palč[email protected]

Boris Ćorković[email protected]