Os dados na forma de linhas e colunas são chatos, e é difícil derivar percepções nessa forma. Adicione gráficos interativos a ele, e você faz mais fácil para que todos façam o sentido dele. Você começa a ver padrões que eram impossíveis de detectar, olhando apenas dados brutos. Mas como você adiciona gráficos interativos a seu Web site?

Bem, isso é o que este tutorial vai lhe ensinar. Neste post vou guiá-lo através do processo de criação de gráficos interativos em um dos mais populares frameworks JavaScript – AngularJS . Estaremos implementando gráficos através do pacote de gráficos JavaScript do FusionCharts . E para tornar nosso trabalho mais fácil, faremos uso de seu plugin de gráficos AngularJS .

AngularJS torna muito fácil criar aplicativos web modernos (após a curva de aprendizado inicial, é claro!). E o plugin de gráficos AngularJS do FusionCharts nos permitirá criar gráficos interativos com apenas uma única diretiva.

Com a introdução fora do caminho, vamos começar com o tutorial! Você também pode verificar a demo primeiro.

VER DEMO

Eu dividi este tutorial em 4 etapas:

  1. Definir as dependências
  2. ng-fusionchartsMódulo de injeção
  3. Definir controlador para o aplicativo
  4. Render the FusionCharts ver mais

Etapa 1: Definir as dependências

Estes são os três arquivos JavaScript que precisamos incluir:

Veja como o seu HTML ficará depois desta etapa:

<head>
    <!-- AngularJS - Either include via CDN or download AngularJS and use local link -->
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
 
    <!-- FusionCharts Core Library JavaScript File-->
    <script type="text/javascript" src="path/to/fusioncharts.js"></script>
 
    <!-- FusionCharts AngularJS Plugin JavaScript File-->
    <script type="text/javascript" src="path/to/angular-fusioncharts.min.js"></script>
</head>

Etapa 2: ng-fusionchartsMódulo de Injeção

O próximo passo é incluir ng-fusionchartscomo uma dependência no nosso aplicativo. Abaixo está o código para conseguir isso:

var app = angular.module('DemoApp', ['ng-fusioncharts']);

Passo 3: Definir controlador para a aplicação

No controlador da aplicação, aumentamos o escopo do controlador com a definição de gráfico do Fusioncharts:

app.controller('DemoController', function($scope) {
    //chart definition
    $scope.dataSource =  '{"chart":
        {
            "caption":"Sales - 2014 v 2015",
            "numberPrefix":"$",
            "captionFontSize":"14",
            "subcaptionFontSize":"14",
            "baseFontColor":"#666666",
            "baseFont":"Helvetica Neue,Arial",
            "baseFontSize":"11",
            "subcaptionFontBold":"0",
            "canvasBgAlpha":"0",
            "showValues":"0",
            "paletteColors":"#10a9ea,#ebd00f",
            "bgColor":"#f6f6f6",
            "bgAlpha":"100",
            "showBorder":"0",
            "showShadow":"0",
            "showAlternateHGridColor":"0",
            "showXAxisLine":"1",
            "xAxisLineThickness":"1",
            "xAxisLineColor":"#cdcdcd",
            "xAxisNameFontColor":"#8d8d8d",
            "yAxisNameFontColor":"#8d8d8d",
            "canvasBgColor":"#ffffff",
            "lineThickness":"4",
            "anchorBgColor":"#ffffff",
            "legendBgColor":"#ffffff",
            "legendBgAlpha":"100",
            "legendBorderAlpha":"50",
            "legendBorderColor":"#888888",
            "divlineAlpha":"100",
            "divlineColor":"#999999",
            "divlineThickness":"1",
            "divLineIsDashed":"1",
            "divLineDashLen":"1",
            "divLineGapLen":"1",
            "toolTipColor":"#ffffff",
            "toolTipBorderColor":"#ffffff",
            "toolTipBorderThickness":"1",
            "toolTipBgColor":"#000000",
            "toolTipBgAlpha":"80",
            "toolTipBorderRadius":"4",
            "toolTipPadding":"10",
            "toolTipFontSize":"20",
            "anchorRadius":"5",
            "anchorBorderThickness":"3",
            "anchorTrackingRadius":"15",
            "showHoverEffect":"1"
        },
        "categories":[
        {
            "category":[
                {"label":"Jan"},
                {"label":"Feb"},
                {"label":"Mar"},
                {"label":"Apr"},
                {"label":"May"},
                {"label":"Jun"},
                {"label":"Jul"},
                {"label":"Aug"},
                {"label":"Sep"},
                {"label":"Oct"},
                {"label":"Nov"},
                {"label":"Dec"}
            ]
        }],
        "dataset":[
            {"seriesname":"Bakersfield Central",
            "data":[
            {"value":"12123"},
            {"value":"8233"},
            {"value":"25507"},
            {"value":"9110"},
            {"value":"13529"},
            {"value":"8803"},
            {"value":"19202"},
            {"value":"13500"},
            {"value":"16202"},
            {"value":"19200"},
            {"value":"9202"},
            {"value":"11366"}]
        },
            {"seriesname":"Los Angeles Topanga",
            "data":[
            {"value":"13400"},
            {"value":"9800"},
            {"value":"22800"},
            {"value":"12400"},
            {"value":"15800"},
            {"value":"9800"},
            {"value":"21800"},
            {"value":"9310"},
            {"value":"12362"},
            {"value":"17230"},
            {"value":"10202"},
            {"value":"12366"}]
        }
    ]}';
});

Etapa 4: Render o FusionCharts View

Agora adicione a seguinte marcação ao seu HTML para renderizar o FusionCharts:

<div ng-controller="DemoController">
    <fusioncharts id="mychartcontainer" chartid="mychart" width="650" height="400" type="msspline" dataFormat= 'json', dataSource="{{dataSource}}" config="{{chartoptions}}">
    </fusioncharts>
    <!-- dataSource is data used by FusionCharts to render the chart and is declared above using $scope -->
</div>

Se você tiver seguido acima etapas corretamente e não alterado em qualquer coisa, você deve ver um gráfico de trabalho como este: http://codepen.io/4two2/pen/MKGKVO

Tags