[WIP] Add dual-axis line chart to viz (#1782)

* Add dual-axis line chart to viz
 - Add a new viz using two y axis for multi-chart in nvd3
 - Option to set metric and axis format for two y axis

* Resolve conflicts

* Fixed x axis and resized thumbnail

* Added example to __init__.py

* Change get_df to match with format
This commit is contained in:
vera-liu
2017-01-06 10:30:27 -08:00
committed by GitHub
parent 119b0c55e9
commit c3edc6e24b
9 changed files with 206 additions and 10 deletions

View File

@@ -126,6 +126,11 @@ function nvd3Vis(slice) {
.staggerLabels(false);
break;
case 'dual_line':
chart = nv.models.multiChart();
chart.interpolate('linear');
break;
case 'bar':
chart = nv.models.multiBarChart()
.showControls(fd.show_controls)
@@ -309,7 +314,7 @@ function nvd3Vis(slice) {
chart.yAxis.tickFormat(d3.format('.3s'));
}
if (fd.y_axis_format) {
if (fd.y_axis_format && chart.yAxis) {
chart.yAxis.tickFormat(d3.format(fd.y_axis_format));
if (chart.y2Axis !== undefined) {
chart.y2Axis.tickFormat(d3.format(fd.y_axis_format));
@@ -347,7 +352,12 @@ function nvd3Vis(slice) {
if (svg.empty()) {
svg = d3.select(slice.selector).append('svg');
}
if (vizType === 'dual_line') {
chart.yAxis1.tickFormat(d3.format(fd.y_axis_format));
chart.yAxis2.tickFormat(d3.format(fd.y_axis_2_format));
chart.showLegend(true);
chart.margin({ right: 50 });
}
svg
.datum(payload.data)
.transition().duration(500)