nv.addGraph(function() {
chart = nv.models.historicalBarChart();
chart.x(function(d, i) { return d.x });
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return
// themselves, not the parent chart, so need to chain separately
chart.xAxis
.tickFormat(d3.format(',.1f'))
.axisLabel("Time")
chart.yAxis
.axisLabel('Random Number')
.tickFormat(d3.format(',.4f'));
chart
.showXAxis(true)
.showYAxis(true)
.rightAlignYAxis(true)
.margin({ right: 90 });
d3.select('#chart svg')
.datum(data)
.transition()
.duration(1)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
callback: function (graph) {
nv.utils.windowResize(function () {
setChartSize(trafficGraph);
trafficGraph.data
.transition().duration(0)
.call(graph);
});
},
callback: function (graph) {
nv.utils.windowResize(function () {
setChartSize(creditGraph);
creditGraph.data
.transition().duration(0)
.call(graph);
});
loadTrafficData(document.getElementById("select-days"));
},
callback: function (graph) {
nv.utils.windowResize(function () {
let parent = $('.trend-pane');
let width = parent.width();
let height = parent.height();
graph.width(width).height(height);
d3.select('.trend-chart svg')
.attr('width', width)
.attr('height', height)
.transition().duration(0)
.call(graph);
});
}
nv.addGraph(function() {
var chart = nv.models.multiBarChart().height(dim.height).width(dim.width);
var data = rankGraphData(newVal);
chart.yAxis.tickFormat(d3.format(',.3g'));
chart.stacked(attrs.stacked);
chart.reduceXTicks(false);
chart.staggerLabels(true);
svg.datum(data)
.transition().duration(100).call(chart);
nv.utils.windowResize(chart.update);
});
/**
* Creates a chart model and render it
*/
renderChart() {
let dispatcher;
// We try to reuse the current chart instance. If not possible then lets instantiate again
this.chart = (this.chart && !this.rendering) ? this.chart : nv.models[this.props.type]();
if(isCallable(this.props.renderStart))
this.props.renderStart(this.chart, RENDER_START);
this.parsedProps = bindFunctions(this.props, this.props.context);
this.chart.x && this.chart.x(getValueFunction(this.parsedProps.x, 'x'));
this.chart.y && this.chart.y(getValueFunction(this.parsedProps.y, 'y'));
this.props.margin && this.chart.margin(this.options(MARGIN, pick).margin || propsByPrefix('margin', this.props) || {});
// Configure componentes recursively
this.configureComponents(this.chart, this.options(SETTINGS.concat(CONTAINER_STYLE), without));
// hook for configuring the chart
!this.props.configure || this.props.configure(this.chart);
// Render chart using d3
this.selection = d3.select(this.refs.svg)
.datum(this.props.datum)
.call(this.chart);
// Update the chart if the window size change.
// Save resizeHandle to remove the resize listener later.
if(!this.resizeHandler)
this.resizeHandler = nv.utils.windowResize(this.chart.update);
// PieCharts and lineCharts are an special case. Their dispacher is the pie component inside the chart.
// There are some charts do not feature the renderEnd event
switch(this.props.type) {
case 'pieChart':
dispatcher = this.chart.pie.dispatch;
break
case 'lineChart':
dispatcher = this.chart.lines.dispatch;
break
default:
dispatcher = this.chart.dispatch;
}
dispatcher.renderEnd && dispatcher.on('renderEnd', this.renderEnd.bind(this));
this.rendering = true;
return this.chart;
}
nv.addGraph(function () {
var chart = _this.createChart();
var chartRegionSelector = '[name="' + _this.name + '"] [data-region=chart]';
$(chartRegionSelector).html('<svg style="height:' + _this.options.height + '"></svg>');
function formatAxis(axisName, axisType) {
var axis = _this.widgetModel.get(axisType)[0];
if (chart[axisName] && axis) {
chart[axisName].showMaxMin(false);
var dimension;
if(_.contains(['rows', 'cols'], axisType)) {
var dimensionName = axis.dimension.field;
dimension = _this.cube.dimension(dimensionName);
} else if(axisType === 'measures') {
var measureName = axis;
dimension = _this.cube.measure(measureName);
dimension.type = 'number';
}
chart[axisName].axisLabel(dimension.name);
if(axisType === 'measures') {
chart[axisName].tickFormat(_this._formatterFactory(dimension.type, dimension.format));
}
}
}
if(_.contains(['bar', 'line', 'area', 'row'], _this.widgetModel.get('widgetType'))){
formatAxis('yAxis', 'measures');
} else {
formatAxis('yAxis', 'rows');
}
if(!_.contains(['row'], _this.widgetModel.get('widgetType'))){
formatAxis('xAxis', 'cols');
}
d3.select(chartRegionSelector + ' svg')
.datum(values)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
nvd3.addGraph(() => {
this.chart = nvd3.models.bulletChart()
//this.chart.width(width - margin.right - margin.left)
this.chart.height(height - margin.top - margin.bottom)
this.chart.margin(margin)
this.chart.tooltip.enabled(this.props.tips)
this.chart.color(color)
let svg = d3.select(this.refs.svg)
.datum(this.props.chart)
.transition()
.duration(300)
.call(this.chart)
nvd3.utils.windowResize(this.chart.update)
return this.chart
})
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);
});
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;
});
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;
});
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
})