angular-nvd3 test

by sberube

HTML

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <title>AngularJS NVD3 Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.9/dist/angular-nvd3.js"></script>
  </head>

  <body ng-controller="myController">
    <style>
      .forecast-series {
        fill: white;
        stroke: grey;
        stroke-width: 2px;
      }

    </style>

    <div style="height:600px">
      <nvd3 options="options" data="data"></nvd3>
    </div>

    <script>
      angular.module('myApp', ['nvd3'])
        .controller('myController', function($scope) {
          $scope.options = {
            chart: {
              type: 'multiBarChart',
              stacked: true,
              margin: {
                top: 20,
                right: 20,
                bottom: 20,
                left: 100
              },
              showControls: false,
              clipEdge: true,
              duration: 500,
              useVoronoi: false,
              useInteractiveGuideline: true,
              tooltip: {
                chartContainer: '#_1686844661245'
              },
              interactiveLayer: {
                tooltip: {}
              },
              legend: {
                vers: 'furious'
              },
              legendPosition: 'bottom',
              dispatch: {},
              xAxis: {
                showMaxMin: true,
                tickFormat: function(d) {
                  return formatDate(d);
                }

              },
              yAxis: {
                showMaxMin: true,
                axisLabelDistance: 10
              }
            }
         ...