Usando C3 JS + SharePoint 2013

Galera, já tinha muito tempo que queria compartilhar com vocês uma solução usando SharePoint e C3.JS. Acho essa api sensacional é muito valido usarmos ela para geração de gráfico, além de ser totalmente free e muito fácil de usar.

Vamos criar uma WebPart, muita gente fala mas solução nesse formato de .wsp irão sumir, não se usa mais, mas agora temos outro conceito de reutilizar e bla..bla…bla… kkkkkk

Concordo com todos comentários a este respeito, mas atualmente uso muito .wsp, por questão de politica da área de gerenciamentos de projetos na companhia que atuo como arquiteto.

Mãos a obra, primeiramente uma observação, quando código JS roda antes da página do SharePoint terminar o load, precisamos garantir que o JS seja carregado antes de executar no DOM, então usei esta função.

  function onReady(selector, callback) {
        var intervalID = window.setInterval(function () {
            if (document.querySelector(selector) !== undefined) {
                window.clearInterval(intervalID);
                callback.call(this);
            }
        }, 500);
    }

 

Agora vamos criar um WebPart, presumo que todos já saibam criar um WP no VS, caso não podem olhar esse link https://msdn.microsoft.com/en-us/library/ee231546.aspx.

Vejam como ficou meu meu projeto.

Chart_Solution

Segundo passo vamos adicionas as referências:

Chart_Reference

Como exemplo criei uma lista chamada projetos, onde vou mostrar os projetos -> Mês x Horas.

blogLista

Legal, agora vou explicar como fiz para manipular as informação de forma dinâmica, ou seja, como o JS conversou com nosso código C# localizado no UserControl.

A imagem abaixo é o .ascx, nele coloquei o c3 js, mas para que os valores fosses atualizado usei HiddenField.

Vejam que usei o c3 dentro da função onReady, para nosso gráfico renderizar sem problemas :).

blogCode

A seguir o ascx.cs, criei um código bem sim, pode ficar tranquilo que vou disponibilizar o fonte, no final.

blogCode1

É simples assim mesmo, vejam o resultado que bacana:

c3Blog

Bar

blogChart

Line

É isso pessoal, este post criei meio rápido, se ficou alguma dúvida pode deixar no comentários que logo responderei.

PS.:Não me esqueci do fonte segue o link:

GSD.ChartWithC3_JS

About Gustavo Delfino

Analista / Desenvolvedor de Sistemas com especialização em aplicações Web e SharePoint. Trabalho com .NET e SharePoint desde 2008. Também com Dynamics CRM desde de a versão 4.0. Certificações : MCTS, MCSD, MCSA e MCDS.
This entry was posted in C3 JS, Chart SharePoint, SharePoint 2013, Visual Studio 2015, WebPart. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s