𝘛𝘦𝘤𝘩 𝘚𝘰𝘭𝘶𝘵𝘪𝘰𝘯 𝘏𝘶𝘣

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.

Segundo passo vamos adicionas as referências:

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

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 :).

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

É simples assim mesmo, vejam o resultado que bacana:

É 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