Os nomes das categorias. O gráfico criará uma categoria para cada array de dados (series.data).

• Exemplo: categories = ["Exemplo #1", "Exemplo #2"];

O nome do campo da categoria. Deve ser utilizado junto ao remote-data.

Na descrição do atributo remote-data, tem o exemplo de sua funcionalidade. Funciona semelhante ao series.field porém relacionado a categoria.

Função a ser disparada quando alguma série for clicada. Receberá por parâmetro o evento com dados da série clicada e etc.

• Exemplo:

this.onClick = function (e) {
// faz alguma coisa
}

Função a ser executada quando posicionar o mouse sobre as series do gráfico. Receberá por parâmetro o evento com dados da série e etc.

• Exemplo:

this.onHover = function (e) {
// faz alguma coisa
}

Neste atributo deve ser passado a URL que retorna os dados a serem utilizados pelo gráfico em formato JSON.

Neste exemplo utilizaremos a seguinte URL: http://localhost:3000/rest/directive/chart/getData/ e a mesma retornará os seguintes conteúdos:

[{"ano":"2000","papel":100,"produzido":200},{"ano":"2001","papel":250,"produzido":280}]

<totvs-chart
 	   type-chart="column"
 	   remote-data="http://localhost:3000/rest/directive/chart/getData/"
 	   series="[{ name: "Papel",
 		   	      field: "papel",
                  color: "#1E90FF"
                }, 
                { name: "Produzido",
                  field: "produzido",
                  color: "#87CEFA"
        }]"
       categoryField="ano">
</totvs-chart>

Resultado:

Configuração das séries do gráfico. Cada configuração da série deve ser um objeto. Por exemplo: series = [{name: "Exemplo #1", data: [3, 5]}, {name: "Exemplo #2", data: [5, 8]}]

series.color: String | Function - A cor base da série. pode ser utilizado o nome da cor "green", cores hexadecimais "#a0b0c0" ou em rgb "rgb(128, 0, 255)", também é possível através de função, onde será avaliando cada ponto. Caso não atender a condição, retornar undefined, assumirá a cor padrão da serie do Kendo UI.

• Exemplo: series = [{data: [4, 6, 8], color: function(point) { if (point.value > 1) { return "red"; } }]

series.data:Array - É o array de dados das séries. Pode ser definido como:

• Array de Objetos - Cada ponto está ligado ao campo especificado através da opção series.field, exemplo: series = [ {field: "valor", data: [{valor: 5}] }]
  
  • Pie, Donut e Funnel series precisam ser informados da seguinte forma:

 series = [{
	data: [{category: "Exemplo #1", value: 150, color: "#1E90FF"}, 
			{category: "Exemplo #2", value: 300, color: "#87CEFA"}]
}]

• Array de Números - Suportado quando o series.type ou type-chart for definido como "area", "bar", "column", "line" or "waterfall".
• Array de Array de Números - Suportado quando o series.type ou type-chart for definido como "bubble", "rangeBar", "scatter", "scatterLine", or polar series.
  
  • Bubble series precisam de um array com três valores - Valor x, valor y e tamanho do valor. [1, 1, 10]
  • Scatter e scatter line series precisam de array com dois valores - Valor x e Valor y. [1, 2]
    
  • Bullet series precisam que seja definido o valor corrente e o alvo. [3, 6]
    

series.labels:Object - Configuração das labels das séries do gráfico.

O gráfico mostrará a label da série caso a propriedade series.labels.visable for definida como true.

• visible:Boolean - Se definida como true o gráfico mostrará as labels das séries. Por padrão as labels das séries não são mostradas.
• template:String | Function - Retorna a label das séries customizadas.
  • Os campos que podem ser usados no template são:
    • category - O nome da categoria. Disponível para area, bar, column, bubble, donut, line, pie e waterfall series.
    • dataItem - O dado original usado na construção do ponto.
    • percentagem - O dado representado como porcentagem. Disponível apenas em donut e pie.
    • series - A série de dados.
    • value - O valor do ponto.

 this.series = [{
      name: "Série #1",
      color: "#87CEFA",
      data: [4, 2.8, 8],
      labels: {
               visible: true,
               template: "Valor: #: value #%"
            }
}];

Resultado:

series.field:String - Nome do campo que contém o valor das séries, deve ser utilizado junto ao remote-data.

Na descrição do atributo remote-data, tem o exemplo de sua funcionalidade.

series.name:String - O nome da série do gráfico, o qual estará visível na legenda do gráfico.

• Exemplo: series = [{name: "Série #1", data: [2, 5]}, {name: "Série #2", data: [4, 8]}]

series.type:String - Tipo da série, que na verdade é o gráfico a ser utilizado. Observação: Quando não atribuído algum valor, o padrão será o type-chart.

• Gráficos disponíveis: "area", "bar", "bubble", "bullet", "column", "donut", "funnel", "horizontalWaterfall", "line", "pie", "polarArea", "polarLine" "polarScatter", "radarArea", "radarColumn", "radarLine", "rangeBar", "rangeColumn", "scatter", "scatterLine", "verticalArea", "verticalBullet", "verticalLine", "waterfall".
• Exemplo: series = [{type: "bar"}].

Neste atributo você deve passar uma função que esteja esperando receber um objeto, que irá conter duas funções, responsáveis por exportar em PDF e em PNG.

// HTML - Utilizando a diretiva totvs-chart.
<totvs-chart
       title="Gráfico exemplo"
       type-chart="area"
       series="controller.series"
       categories="controller.categories"
       set-export="controller.setFnExport">
</totvs-chart>
 
// JS - Definindo-a no seu controller.
var self = this;
	....
self.setFnExport = function (obj) {
	self.exportToPdf = obj.pdf;
	self.exportToPng = obj.png;
}
// A partir deste momento os métodos exportToPdf e exportToPng podem ser utilizados para fazer a exportação para PDF, PNG ou ambos.

Gráfico a ser utilizado.

Tipos de gráficos disponíveis, são eles:

• "area";
• "bar";
• "bubble";
• "bullet";
• "column";
• "donut";
• "funnel";
• "horizontalWaterfall";
• "line";
• "pie";
• "polarArea";
• "polarLine";
• "polarScatter";
• "radarArea";
• "radarColumn";
• "radarLine";
• "rangeBar";
• "rangeColumn";
• "scatter";
• "scatterLine";
• "verticalArea";
• "verticalBullet";
• "verticalLine";
• "waterfall".

Também é possível definir o tipo do gráfico na propriedade series, caso definido nas séries o mesmo sobrescreverá o type-chart.

Retorna a label das séries customizadas.

 Os campos que podem ser usados no template são:

• • category - O nome da categoria. Disponível para area, bar, column, bubble, donut, line, pie e waterfall series.
  • dataItem - O dado original usado na construção do ponto.
  • percentagem - O dado representado como porcentagem. Disponível apenas em donut e pie.
  • series - A série de dados.
  • value - O valor do ponto.

Para utilizar os campos no template, os mesmos devem iniciar com #= ou #: e serem encerrados com #. exemplo a seguir:

t-label-template="Valor: #= value #"