nv.addGraph(function() {
            var chart = nv.models.discreteBarChart()
                  .staggerLabels(false)
                  .showValues(true)
                  .staggerLabels(true)
                  .width(dim.width)
                  .tooltips(false)
                  .x(function(d) {
                    return d.label;
                  })
                  .y(function(d) {
                    return d.value;
                  });

            var data = (scope.parseFn && scope.parseFn(newVal)) || _.identity(newVal);
            svg.datum(data).transition().duration(100).call(chart);
            nv.utils.windowResize(chart.update);
          });
Ejemplo n.º 2
0
        nv.addGraph(function() {
         
          chart = nv.models.stackedAreaChart()
            .useInteractiveGuideline(true)
            .showControls(false)
            .x(function(d) {
              return d[0];
            })
            .y(function(d) {
              return d[1];
            })
            .color(keyColor)
            .duration(300);
         
          chart.stacked.style('stack');
         
          chart.xAxis.tickFormat(function(d) {
            return d3.time.format('%x')(new Date(d));
          });
          chart.yAxisTickFormat(d3.format('d'));
         
          d3.select(element[0])
            .data([scope.data])
            //.transition().duration(1000)
            .call(chart);
            /*.each('start', function() {
              setTimeout(function() {
                d3.selectAll('#chart1 *').each(function() {
                  if (this.__transition__)
                    this.__transition__.duration = 1;
                });
              }, 0);
            });*/
         
          nv.utils.windowResize(chart.update);
         
          return chart;

        });
Ejemplo n.º 3
0
      nv.addGraph(function() {
        var chart = nv.models.lineWithFocusChart().width(this.$el.width()).height(this.$el.height());

        // chart.transitionDuration(500);
        chart.xAxis
          .tickFormat(d3.format(',f'));
        chart.x2Axis
          .tickFormat(d3.format(',f'));

        chart.yAxis
          .tickFormat(d3.format(',.2f'));
        chart.y2Axis
          .tickFormat(d3.format(',.2f'));

        d3.select('#chart')
          .datum(this.data)
          .call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
      }.bind(this));
      nv.addGraph(() => {
        const chart = nv.models.stackedAreaChart()
          .x(R.head)
          .y(R.last)
          .clipEdge(true)
          .showControls(false)
          .useInteractiveGuideline(true)
          .color([
            '#61BD4F',
            '#0079BF',
            '#FFAB4A',
            '#FF80CE',
            '#F2D600',
            '#42548E',
            '#EB5A46',
            '#C377E0',
          ]);

        chart.xAxis
          .showMaxMin(false)
          .tickFormat((d) => d3.time.format('%d/%m/%y')(new Date(d)));

        chart.yAxis
          .tickFormat(d3.format(',.0f'));

        d3.select(selector)
          .datum(data)
          .transition()
          .duration(500)
          .call(chart);

        // Force tooltips to be removed after data refresh.
        // See: https://github.com/nvd3-community/nvd3/issues/100
        d3.selectAll(`${selector} + .nvtooltip`).remove();

        nv.utils.windowResize(chart.update);

        return chart;
      });
Ejemplo n.º 5
0
    nvd3.addGraph(() => {
      this.chart = nvd3.models.multiBarChart()
        .stacked(true)
        .showLegend(true)
        .showControls(false)
        .margin({"left":50,"right":10,"top":10,"bottom":20})
        .groupSpacing(0.05)
        .height(this.props.height)
        .clipEdge(true)
        //.rotateLabels(-45)

      this.chart.xAxis.tickFormat(d3.format(',f'))
      this.chart.yAxis.tickFormat(d3.format(',.1f'))

      d3.select(this.refs.svg)
        .datum(this.props.datum)
        .transition()
        .duration(1000)
        .call(this.chart)

      nvd3.utils.windowResize(this.chart.update)

      return this.chart
    })
  nv.addGraph(function () {
    var chart = nv.models.lineChart()
      .x(function (d) {
        if (d) {
          return d.label
        }
      })
      .y(function (d) {
        if (d) {
          return d.value
        }
      })
      .margin({top: 30, right: 10, bottom: 60, left: 100})
      .useInteractiveGuideline(true)
      .showYAxis(true)
      .showXAxis(true)
      .showLegend(inputOptions.showLegend)

    chart.legend.margin({top: 20, right: 0, bottom: 15, left: 0})

    chart.xAxis
      .axisLabel(inputOptions.xAxisLabel)

    if (inputOptions.yMax < 100) {
      chart.yAxis
        .tickFormat(d3.format(',.1f'))
    } else {
      chart.yAxis
        .tickFormat(d3.format(',.0d'))
    }

    chart.yAxis
        .axisLabel(config['y-title'])
        .axisLabelDistance(config['y-title-offset'])

    if (config.hasOwnProperty('x-tick-interval')) {
      const numValues = inputOptions.data[0].values.length
      const tickInterval = config['x-tick-interval']
      let tickValues = []
      switch (tickInterval) {
        case 'months':
          const numYears = Math.ceil(numValues / 12)

          tickValues = _.times(numYears, (index) => {
            return index * 12
          })
          break
        case 'quarters':
          const intervalCount = Math.ceil(numValues / 4)

          tickValues = _.times(intervalCount, (index) => {
            return index * 4
          })
          break
      }
      chart.xAxis.tickValues(tickValues)
    }

    chart.xAxis
        .axisLabel(config['x-title'])
        .axisLabelDistance(config['x-title-offset'])
        .showMaxMin(false)

    var yMin = 0
    var yMax = 100000

    if (config.hasOwnProperty(['y-min'])) {
      yMin = config['y-min']
    }

    if (config.hasOwnProperty('y-max')) {
      yMax = config['y-max']
    } else if (inputOptions.hasOwnProperty('yMax')) {
      yMax = inputOptions.yMax
    }

    if (config.hasOwnProperty('y-axis-tick-format')) {
      const yAxisTickFormat = config['y-axis-tick-format']
      switch (yAxisTickFormat) {
        case 'currency':
          chart.yAxis.tickFormat(function (d, index) {
            if (d) {
              return numeral(d).format('$0,0')
            }
          })
          break
        case 'percent':
          chart.yAxis.tickFormat(function (d, index) {
            if (d) {
              return d + '%'
            }
          })
          break
      }
    }

    chart.forceY([yMin, yMax])
    chart.yAxis.scale().domain([yMin, yMax])

    chart.xAxis.tickFormat(function (d, index) {
      if (d) {
        return inputOptions.xTickLabels[d]
      }
    })

    chart.xAxis.rotateLabels(-45)

    chart.lines.dispatch.on('elementClick', function (e) {
      inputOptions.chartEvents(inputOptions.xTickLabels[e[0].point.label], e[0].point.value)
      chart.lines.clearHighlights()
      chart.lines.highlightPoint(inputOptions.xTickLabels[e[0].point.label], e[0].point.value, true)
    })

    chart.interactiveLayer.dispatch.on('elementMousemove', function (e) {
      inputOptions.chartEvents(inputOptions.xTickLabels[e[0].point.label], e[0].point.value)
      chart.lines.clearHighlights()
      chart.lines.highlightPoint(inputOptions.xTickLabels[e[0].point.label], e[0].point.value, true)
    })

    chart.interactiveLayer.dispatch.on('elementMouseout', function (e) {
      chart.lines.clearHighlights()
    })

    var id = '#' + inputOptions.id

    d3.select(id + ' svg')
      .datum(inputOptions.data)
      .call(chart)

    var titleOffset = document.getElementById(inputOptions.id).offsetWidth / 2

    d3.selectAll('.nv-axisMax-y').remove()

    d3.select(id + ' svg').select('svg > text').remove()
    d3.select(id + ' svg')
      .append('text')
      .attr('x', titleOffset)
      .attr('y', 20)
      .attr('text-anchor', 'middle')
      .text(config['title'])

    nv.utils.windowResize(chart.update)

    return chart
  })