apache_cordova

Apache Cordova, removendo os 300ms de delay entre o toque e o click

Desenvolver apps Híbridas sem a ajuda de um framework que mitigue todas as particularidades nas plataformas é um caso de dependência de várias técnicas, se você está nesse campo à um bom tempo, sabe que essa tarefa as vezes depende muito de bibliotecas e pequenos scripts em Javascript para fazer funcionar de uma forma nativa.

Um dos problemas enfrentados é o famoso Delay dos 300ms, esse problema afeta tanto apps híbridas como as feitas em Titanium, Cordova, etc, como os “site-apps” nos navegadores.

Quando eu começei a criar um aplicativo chamado Gui Brasil em Cordova(Phonegap na época), 2012. Apresentava esse problema, dando uma aparência de lentidão e quebrado, coisa que tirava toda a experiência de se criar algo ao estilo nativo. Na época eu resolvi com algumas técnicas relacionadas a CSS, melhorou, mais não tanto quanto essa solução que vocês vão ver abaixo.

O FastClick resolve esse problema, especialmente relacionado ao errinho do web-kit em dispositivos que tenham navegadores que usam ele como base, assim como o Webkit(WebView) do Apache Cordova.

Antes de chamar qualquer biblioteca no Cordova, você deve esperar o evento “deviceReady”

Inclua o FastClick na dependência do seu projeto.

<script type='application/javascript' src='/path/to/fastclick.js'></script>

E em seguida inclua essa linha abaixo:

window.addEventListener('load', function() {
    FastClick.attach(document.body);
}, false);

E como em um passe de mágica, sem precisar melhorar nada na performance, seu App já ganha de cara uns 10% até 20% de melhoria na responsividade do toque para a execução.

intel-android

Ferramentas Intel para desenvolvedores Android e Windows Phone

A Intel acaba de lançar o Intel INDE, uma ferramenta estratégica ao seu atual SDK e compilador para Android.

O Intel INDE não compila apenas para o Android, compila também para o Windows Phone. A estratégia por trás do INDE é cada vez mais clara que a Intel está querendo abocanhar uma parte desse mercado já que possui mais de duas dúzias de dispositivos Android e Windows usando seus processadores.

Baixem e confira aqui.

density

Lista completa de dispositivos móveis, tamanhos e densidades

Quando o assunto é criar para dispositivos móveis você acaba sempre procurando qual é o tamanho da tela, resolução, densidade e basicamente isso torna qualquer app um desafio de concretizar, especialmente falando-se nos dias atuais.

Eu comentei, antes e aqui no Blog sobre esse aspecto, só que com tantos lançamentos a cada MWC, fica dificil acompanhar tudo, foi ai que alguém teve a brilhante idéia de ir agregando isso a uma lista no Wikipedia.

Boom! Não precisa fazer mais nada, esse post serve para qualquer um que encara esse problema diário em suas apps móveis, especialmente quem usa Cross-compliadores como PhoneGap(Cordova), Titanium, etc.

Só entrar e procurar no Wikipedia para qual dispositivo você procura. http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

nodejs-1024x768

Atualizando o NodeJS no Linux

Eu tinha instalado o NodeJS pela primeira vez quando ainda era na versão 0.04+, bem antiga por sinal e cheia de bugs de segurança, na época precisei para criar uma API simples para demonstração de um cliente e hoje precisei novamente.

Só que hoje, existem N frameworks para fazer API Restful de forma fácil, precisava usar uns módulos novos,só que alguns requerem no mínimo a versão 0.8+, então o jeito foi atualizar.

Para utilizar você deve estar logado como super user no Linux. E executar os seguintes comandos:

sudo npm cache clean -f
sudo npm install -g n
sudo n 0.X.XX a versão que você quer instalar
sudo n stable

Voilá, você tem a última versão do NodeJS e NPM instalados, podendo instalar qualquer pacote que você queria em seu servidor.

Funcionaria perfeito, se fosse em um mundo perfeito, só que em meu caso, dancei com alguns erros bizarros de SSL_CERT, o que fiz foi desabilitar o SSL e forçar ele a usar normal, depois você pode habilitar se quiser.
npm config set strict-ssl false
npm install npm -g

Pronto, ai só repetir os mesmos comandos acima e já funciona. Acho que até a última linha não havia necessidade de ser repetida, embora eu tenha repetido só para garantir que está funcionando perfeitamente.

Moto-360-Android-Wear

Android Wear, guia inicial para desenvolvedor

Ontem o Google surpreendeu todo mundo com um SDK específico para wearables que são dispositivos pareados com seus aparelhos com Android, basicamente o Google Wear é um Google Now, só que em seu pulso e evita assim você fica toda hora com aquela mania de tirar e colocar o celular do bolso para ver notificações ou compromissos.

Não é novidade nenhuma em termos técnicos, A própria Samsung já tinha um SDK para o Galaxy Gear e uma série de aplicativos especificos para conectar com os seus aparelhos.

A diferença do SDK da Samsung para o seu Gear e o Google Wear é que será um SDK bem abrangente, não vai ficar só funcionando apenas com Samsung Galaxys e Samsung Galaxy Gear, você pode comprar qualquer smartphone com Android e o Motorola Wear ou LG Wear que são os dois modelos lançados justamente com o Google Wear e parear ambos e boom! Você tem eles perfeitamente casados, fico imaginando aqui quantos Google Wear Xing Lings vão aparecer depois dessa novidade, já que smartphones Xing Lings estão com os dias contados no Brasil.

Pois bem, me inscrevi no Preview do SDK e ganhei acesso ao SDK, para encurtar um pouco o post e fazer valer cada imagem, que por sí só valem mais do que mil palavras, eu gravei um rápido video no Youtube como será esse workflow de desenvolvedores usando o SDK do Google Wear.

O código fonte está disponível no GitHub.

DSC1894

Mobile World Congress 2014

O maior evento sobre tecnologia móvel no mundo. Literalmente todas as empresas de telecom que você pensar tem um booth(stand) aqui em Barcelona. Basicamente já se foram 2 dias e eu nem cheguei perto de ver tudo que a feira tem a oferecer.
Vai basicamente da empresa que fornece antena até startups de apps móveis, de tudo tem um pouco, igual como encontrado na feira de Caruaru, só que voltado para um só negócio.

Eu cheguei com a idéia de que era mais um daqueles eventos que você comprava um ticket, via alguns exibitores e suas soluções e voltava para casa com a sensação de que só presta mesmo aquele evento que você pega só o resumo.

Caracteristicamente é um evento voltado para negócios, um acaba fornecendo soluções para o outro e pelo que vi tem muita empresa que já é velha de guerra aqui no evento. E acaba sendo um hub para encontrar outros amigos e concorrentes na área.

Marcas mais comentadas

Sem dúvida a Samsung, Nokia, Alcatel, Sony, LG foram as que mais receberam holofotes nos dois primeiros dias de evento.

Samsung
Samsung lançou o Galaxy S5, Galaxy Gear e o Galaxy Gear Fit. Copiou o leitor biométrico da Apple e basicamente mostrou que vendeu 200 Milhões de Galaxys pelo mundo, apesar de não bater em vendas com a Apple. O que marcou foi que pela primeira vez ela não falou apenas em aspectos técnicos do aparelho e sim na questão da emoção de ter um Galaxy, bem humano por sinal.

Nokia

Fez um bocado de barulho e é a marca que mais patrocinou o evento, existe uma logo da Nokia em quase todo lugar que você olha. Lançou 4 novos aparelhos focando mercados emergentes como nós Brasil, Russia, India, China à preços acessíveis iguais como a Motorola fez com o Moto G pelo mundo.

A nova plataforma Nokia X, é o primeiro aparelho da Nokia com o Android, existe no App Planet um ambiente voltado para Startups e App Devs onde você pode portar seu Android App para o Nokia X com facilidade.

A interface é muito parecida com o Windows Phone, embora só a parte do Launcher do Android, o resto é basicamente Android, basicamente eles fizeram um fork do Android e removeram o que não queriam. Tem um Review muito bom, tem mais detalhes. Em suma a Microsoft sempre faz planos para várias gerações não só para a próxima década. É um mix de Android e Windows e ir educando o pessoal para ambas as plataformas.

Sony

Tem tablets novos Phablets e dois novos modelos de smartphones, eu fiquei cético com a Sony, por não fazer hardware que preste, o que não lhe dá dinheiro ela basicamente mata o produto, como é o caso da linha Sony Vaio. Ela surpreendeu todo mundo com essa notícia e falou que ia focar-se em mobilidade, de fato ela falou à verdade, tem muita coisa nova e o movimento que ela quer fazer é andar junto com release oficiais do Android ou Windows Phone.

Alcatel

Francês também sabe fazer smartphones, ela já tinha feito alguns com Firefox OS e agora está apostando também com novos dispositivos Android (Onetouch). Ela acerta no preço, já que o mais caro segundo o exibidor vai custar no máximo US$200,00

O App Planet para quem é desenvolvedor é uma maneira excelente de conhecer novas pessoas, compartilhar conhecimento e especialmente trocar cartões de visitas. Se você vier para cá, venha com no mínimo um mil, os meus 100 já foram todos em um único dia.

A internet do evento é horrível, muita gente subindo video de reviews de aparelhos e conectadas em redes sociais deixaram a internet à desejar. Acho que isso é mal de evento e acontece basicamente com todos que já fui.

Vim com uma idéia fixa de apresentar uma solução enterprise para dispositivos móveis e descobri que ninguém ainda havia pensado nisso e volto para casa com a sacola cheia de cartões de visitas e várias promessas para receber e ser cumprida.

É um evento para você colocar em sua agenda, o que pesa mesmo é o Euro e com a Espanha em crise e um evento desse porte a economia ao local aproveita-se da oportunidade para cair matando no turista, salve o Rio de Janeiro que não é o único a explorar seus turistas.

Tenho ainda 2 dias de evento e muita coisa para visitar. Até breve.

dropbox-logo

Como economizar dinheiro com backups em serviços Clouds

É justo afirmar que o preço do espaço em Gb caiu exponencialmente em todos os serviços de Cloud Servers pelo mundo, o problema é que esses valores são voláteis a questão do Dólar. Se você faz parte de uma startup esse custo acaba ficando caro, além da taxa cambial existe o IOF que subiu absurdamente de 0.38% para 6.38% em operações no exterior.

E isso meus amigos é um balde de água fria em seus planos, justamente é onde entra o jeitinho Brasileiro, você pode economizar uns US$20 até US$2mil dolares só com isso, tudo depende de como você quer fazer.

Eu sou usuário constante dos serviços de Cloud da Amazon e Linode e quando se tem banco de dados de terceiros para salvar o backup diário, isso acaba sendo uma bola de neve, é fácil gerar e usar as operações de I/O e até mesmo banda acaba ficando praticamente grátis.

Meus gastos só com isso eram exatos US$90.00 ~ US$95.00 mês, já que os backups eram feitos na Amazon o custo ficou caro, especialmente guarda-los no S3. Então aqui vai minha dica.

No caso da Amazon Web Services (AWS)

Não usem o S3 e nem tampouco o EBS para guardar seus dados, pagar para quê, quando você pode ter isso de graça.

Eu tenho 6 bancos de dados que são feitos backups diários, uma média de 4Gb por backup, isso me dá 24Gb de espaço para guardar diários.

Façamos a conta básica.
6DB x 4Gb x 30 dias = 720Gb de dados mensal.

Na Amazon esse custo sai mensal US$88.24 ou US$88.24 * (cotação do dolar ) + 6.38% = R$225,28/mensal

Em uma operação de pequena escala como essa é um custo até rasoável, em 1 ano por exemplo gastariamos aprox. R$2.703,36

Fora o fato de ter uma micro ou small instância para fazer esse serviço, rodariamos um volume EBS e tempo para uso, pode fazer o shutdown da instancia depois que completar, mesmo assim duraria algumas horas, esse calculo eu deixo por fora.

Agora vamos ao Linode

Uma péssima notícia, você vai gastar uma grana, por que o serviço de backups é terrível, além de caro por sinal. Então o jeito é você lançar um linode de 4Gb que custa US$80.00/mensal.

Impraticável se fizermos o cáculo.

US$80.00 * (cotação do Dólar) + 6.38% = R$204,24/mês e R$2450,88/ano.

Embora seja a metade da capacidade do AWS, você morreria com uma grana alta só para o backup do banco, fora arquivos.

O jeitinho Brasileiro.

Existem 3 maneiras de economizar isso:

  • Salvando isso no escritório, que é pouco prático.
  • Comprar serviços Brasileiros de Cloud :(
  • Usar outros serviços de Cloud para tal

Eu optei pelo jeitinho, acabei optando pelo Dropbox Pro que custa só US$9.99/mês. Ele vem com uns 110Gb de espaço.

US$9.99 * (cotação do Dólar) + 6.38% (IOF) = R$25,50 reais/mês e R$306,00 reais/ano.

Somando alguns gastos com instâncias e volumes EBS montados só para o backup à um custo adicional de R$79,00/mês, meu custo final com essa alternativa ficou em R$104,50/mês e R$1.254,00/ano.

Eu tentei usar o Google Drive, só que sempre dava erro na sincronização, já que ele não aceita requisição de dados via TLS, não sei o por que, acho que foi algum erro em meu script e acabei não tendo sorte.

Eu usei o Dropbox Python SDK, mais rápido para executar a tarefa e também por integrar melhor com o terminal do linux.

Eu já uso o Dropbox para manter o código atualizado sempre, só que dessa vez assumi alguns riscos e o uso é desaconselhável em grande escala. Use por usa conta e risco.

2014

11111011110 começou

Hora de tomar aquele café quente e começar a programar, tem muito trabalho pela frente até o final do mês e boa parte ainda está por vir.

Desejo a todos os meus compatriotas desenvolvedores um excelente ano de desafios, prazer em escrever código e muitas felicidades nesse ano.

Zebra-l

O que eu fiz em 2013 e o que você fez?

De acordo com o calendário gregoriano, o ano de 2013 chegou ao fim. Foi um excelente ano, especialmente no quesito aprendizagem.

Aprendi várias coisas, eu tentei o máximo que pude esse ano colocar em prática o que eu assisti na palestra do Matt no TED. Aprenda algo novo em 30 dias.

O Resumo de meu aprendizado foi:

  • Aprendi Javascript à um nível de consciência semelhante ao Actionscript, essa parte foi fácil, já que é bem semelhante ao Actionscript, a parte mais complicada foi faze-lo funcionar semelhante em vários navegadores. No blog você pode ver alguns scripts escritos e outros exemplos que coloquei na conta do GitHub. Até tentei escreve meu próprio framework.
  • Aprendi a bloquear e proteger de DDoS.
  • Aprendi a programar em Python, eu escrevi até um crawler para comparar preços com o BlackFriday Brasileiro, embora eu já sabia que maior parte das oferas eram ofensivas ao consumidor, já que 72.6% dos preços oferecidos já haviam sido dado 45 dias antes. :( Eu teria confiança em escrever um aplicativo para um cliente no futuro.
  • Aprendi ASP.NET/C# com Razor template, finalmente eu entrei no mundo .Net através do ASP.net, juntamente com C#, não posso dizer que estou craque, o C# tem muita coisa semelhante a sintaxe do Actionscript, embora seja um pouco diferente no quesito de funcionamento, especialmente no que se trata de coleção de dados, alocamento de memória e seus diferentes tipos de variáveis e classes, isso pode ser um grande desafio para quem está aprendendo do zero. Digamos que o que eu consegui aprender em 30 dias me fez participar de um evento de desenvolvedores da Nokia para o lançamento do 1020, isso é assunto para outro tópico.
  • Melhorei meu Bahasha Indonesia, agora consigo falar pronomes, verbos e frases curtas, já fazem 2 anos que fui lá e espero voltar em breve com maior dominio da língua, eu tenho um excelente professor e amigo, me ajudou bastante quando estava estudando.
  • Arrisquei no espanhol, é vergonhoso ter vizinhos que falam espanhol e ter que ir na Argentina e falar Inglês, então agora eu tenho um portunhol digno de ser entendido para quem tem paciência em me ouvir. Ouvir para mim é mais fácil entendo uns 70% do que falam e contextualizo na frase para entender todo o propósito da fala. Tenho uma prima que é mestre em Espanhol e vez ou outra tiro o sarro dela falando em espanhol para praticar o idioma.
  • Falando um pouco fora do contexto de tecnologia, aprendi Marcenaria, durante 30 dias eu queria aprender algo, então entrei no Youtube e comecei a fuçar os canais relacionados, e aqui estão os canais que eu mais assisti durante 30 dias.

    O Arteirinho merece menção honrosa, já que não fiz nada relacionado a artesanato, eu peguei algumas dicas de como serrar com qualidade usando a serra tico tico.

  • Aprendi a usar o Premiere Pro da Adobe, editar videos agora ficou mais fácil do que usar o Windows Movie Maker, eu fiz até um video bacana do Campus Party Recife. Nada que seja do estilo Hollywood, mais dá para o gasto.
  • Registrei 1 patente ainda pendente
  • Conheci e fiz vários novos amigos no Rio de Janeiro onde passei 60 dias, nunca havia pensado em morar no Rio antes, foi um boa experiência.
  • Li 2 bons livros

Não é fácil manter esse ritmo quando você tem deveres, especialmente quando você tende a viajar mais do que ficar em casa nos finais de semana e aproveitar para aprender algo novo.

Palestrei no Campus Party Brasil, virei curador da área de desenvolvimento do Campus Party Recife, fui palestrar no Web Summit 2013 sobre a RIACycle, aprendi a palestrar em 4 minutos apenas, coisa que nunca tinha feito, é legal você falar um pouco de tudo resumidamente.

Fora isso achei tempo para blogar

Escrevi e publiquei mais de 60 artigos aqui no Blog, embora eu tenha dedicado menos tempo que em 2012, ainda saiu alguns artigos de qualidade e mantive a metade do público que tinha em comparação aos anos anteriores, sinal que tenho leitores assíduos.

Audience Overview - Google Analytics

Obrigado a todos os 15 mil visitantes, metade do que eu costumava ter, embora eu consegui aumentar o tempo de leitura de 1 minuto para 3 minutos e também melhorar a qualidade dos artigos.

Financeiramente

Foi o pior ano para o bolso, Ações me deixaram doidos perdi muito dinheiro esse ano com ações, acho que isso vem se arrastando desde 2012 com ainda o país em crise e o PT insistindo que não está, acho que isso é assunto para blog mais do ramo, mais no meu ponto de vista um país que vai bem na bolsa, vai bem na rua e no bolso. Muitos que conheço e investem na bolsa, desistiram do Brasil e foram se arriscar por ai à fora, já que a moratória daqui e o risco Brasil subiu perigosamente.

Meu portifolio desse ano consistia em:

Eu já vendi da BBRY, foi a que mais me deu prejuízo “acompanhado da então lascada Gafisa desde 2012″, eu apostei muito com o lançamento da plataforma 10, embora o mercado de consumidor não gostou muito do dispositivo. Sem cliente, sem preço.

Embora eu tenha mais perdido do que ganho com a desvalorização do Real sobre o Dolar, eu praticamente sai o ano zerado, entre e percas e ganhos eu perdi pouco comparado ao ano passado.

No fim, 2013 teve seus prós e contras como todos os anos, não me arrependo de nada e nem tampouco achei um ano ruim, poderia ser melhor, bem melhor. Mais nunca perca o bom ânimo. Seja sempre honesto, sempre respeite o próximo e tente algo novo a cada 30 dias.

Desejo à você um feliz Natal, um próspero ano novo e que você consiga ser uma pessoa boa, positiva e que contribua para seu país. No ano da copa faça um país descente de se viver mesmo tendo seus problemas, faça sua parte.

Aprenda a vibrar com suas derrotas, apertos, mal humor, eles tendem a nos ensinar alguma coisa que não estamos gostando. E a mudança começa dentro de você.

O que eu espero para 2014?

Sem planos, esse ano vou fazer diferente de todos os anos, no final dele eu te digo como foi.

flud-charts

Criando gráficos do zero com Canvas e Javascript

[quote style="1"]Acabei de refazer os fiddles, o Johannes Lochter trouxe o problema à tona onde não estava aparecendo Chrome e IE, era uma limitação do Fiddle e ajustei. Se alguém tiver problemas em não visualizar o conteúdo me avisem pelos comentários.[/quote]

A parte boa de vim do Flash/Flex é que em Javascript você tem toda a liberdade possível usando o canvas como instrumento de desenho, igual o Stage branco do flash e uma API semelhante para fazer formas geometricas, dignas de 8 anos atrás.

Apesar de ser um rascunho Canvas, é um elemento amplamente adotado no novo padrão HTML5, sem ele basicamente o HTML5 seria ainda HTML 4.1, ele é o máximo das novidades que eu coloco em pauta.

Definindo gráfico

[quote style="1"]Suponha que você precise mostrar esses resultados de forma mais convincente do que a tradicional forma em números. É ai onde entra o gráfico, ele representa o desenho daqueles números que você possui disponível, é uma forma de atalho para mostrar que A+B = C.[/quote]

Sem mais delongas, gráficos são excelentes, enche os olhos de qualquer pessoa que os vê. Eles não só representam uma forma geométrica, representam métricas de dados reais e isso reflete e muito na tomada de decisão que uma pessoa faz ao usa-los.

Nessa série de posts, eu vou comentar um pouco sobre os gráficos mais comuns e existentes no mercado criando-os em javascript com Canvas do HTML5 e CSS3.
Existem N bibliotecas para criar gráficos usando esse recurso, a idéia é você aprender o que está por trás dessas bibliotecas, quais técnicas, quais calculos de trigonometria você precisa ficar por dentro e assim, só assim você pode entender como gráficos são feitos.

Eu sempre quis fazer algo semelhante sem precisar usar bibliotecas de terceiros, quando você chega nesse grau de curiosidade só assim você consegue enxergar o campo todo e aperfeiçoar bibliotecas existentes, colaborar com projetos já existentes ou até mesmo criar as suas.

A lista de gráficos que vou comentar é essa:

  • Gráfico de Area
  • Gráfico de Barras
  • Gráfico de Colunas
  • Gráfico de Gauge
  • Gráfico de Linhas
  • Gráfico de Pizza

Embora esses não sejam os únicos gráficos existentes. Existe uma boa chance, 90% dos casos onde você vai se deparar com eles. Se você quer criar gráficos sem se preocupar em como fazê-los, pode parar de ler por aqui e adotar essas bibliotecas abaixo:

É biblioteca o bastante para fomentar qualquer um por gráfico, elas são excepcionais e faz o trabalho de maneira perfeita. Melhor ainda é aprender como gráficos são feitos.

O primeiro que decidi fazer nessa série é o gráfico de Gauge, mais conhecido como velocimetro, gauge de agulha. Bastante usado em automóveis, medição de stress, pressão e por ai vai.

gauges
Créditos da foto : http://500px.com/photo/4573670

Matemática por trás da medição

É trigonometria na sua mais pura forma, seno, coseno e tangente, para saber o angulo, arco você tem que usar ambos os calculos, embora possa parecer difícil, criar isso é ridicularmente simples, especialmente quando o Canvas do HTML já vem com o calculo pronto para você, basta você passar os valores necessários e pimba! Gráfico está feito.

Desenhando um arco simples

O interessante da API do canvas é justamente essa facilidade, não é o desenho de um arco perfeito, dá para o gasto para o propósito final que queremos.

A mesma lógica por trás do desenho do Gauge é o desenho do gráfico de pizza, tudo parte do principio do ponto atual, o angulo que começa o gráfico e onde ele termina para começar o próximo.

Vejamos como você pode mitigar isso da seguinte forma.

Desenhando um gráfico de Pizza ou Torta(pie) como dizem pelas gringas

Desenhando um gráfico de Barras

Outro gráfico bastante usado em dashboards é o gráfico de Barras, ele basicamente é um indicador de quando cresceu ou diminuiu determinado valor em um intervalo de tempo ou de número. Eu já comentei aqui como criar um desses usando puramente JQuery e CSS, dessa vez usando o elemento Canvas.

O único método é o rect (desenha um retangulo), bem conhecido pelos desenvolvedores de Actionscritpt 2.0.

Ou Até animado.

Desenhando um gráfico de Colunas

O mesmo gráfico só que com o eixo invertido, ao invés de incrementar apenas o eixo X, incremento o Y e ele vai sendo exponencialmente incrementado conforme a ordem que foi criada do dataProvider.

Desenhando um gráfico de Linha

É bastante comum usar o gráfico de linha, é basicamente um indicativo de onde você chegou e onde você etá, é o preferido do mercado de ações da bolsa. O gráfico de linha sempre é acompanhado do primeiro elemento e a única série que muda é a série vertical, os pontos horizontais de um gráfico de linhas sempre são baseados na constante (largura disponível / número de registros) vezes o valor de cada registro.

Já a posição Y que sempre está variando para que a linha mude “lineTo()”, seja constante, exemplo pegue o último valor registrado e começe daquele ponto, sempre é feita pela constante. ( altura disponível / valor máximo encontrado) vezes o valor que se tem nos dados.

A mesma lógica do gráfico de linhas pode ser aplicada ao gráfico de Area, afinal a diferença é que você pode mostrar uma área (path), acompanhando os pontos da linha.

Trigonometria é a essência dos gráficos, fique livre para fazer um fork, alterar e hackear, por exemplo implementar a exibição dos eixos X,Y, implementar o click em determinado item do Gráfico, criar um plugin para JQuery ou até mesmo para criar eles animados. Nesse ponto eu prefiro fazer os gráficos não usando imagem simples do Canvas, mais sim um elemento avançado como o SVG, fica muito mais fácil fazer tais interações e integrar com uma biblioteca de afinamento de efeito ‘easing’.

Até o próximo post.

Desenvolvimento de software para Web e Mobilidade