Skip to content

Commit

Permalink
Feature: add scatters to multiChart model
Browse files Browse the repository at this point in the history
  • Loading branch information
@ehjay
ehjay committed May 24, 2015
1 parent fd411a0 commit 73bb8f7
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 5 deletions.
14 changes: 9 additions & 5 deletions examples/multiChart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@

<script>

var testdata = stream_layers(7,10+Math.random()*100,.1).map(function(data, i) {
var testdata = stream_layers(9,10+Math.random()*100,.1).map(function(data, i) {
return {
key: 'Stream' + i,
values: data.map(function(a){a.y = a.y * (i <= 1 ? -1 : 1); return a})
Expand All @@ -45,12 +45,16 @@
testdata[2].yAxis = 1;
testdata[3].type = "line";
testdata[3].yAxis = 2;
testdata[4].type = "bar";
testdata[4].yAxis = 2;
testdata[5].type = "bar";
testdata[4].type = "scatter";
testdata[4].yAxis = 1;
testdata[5].type = "scatter";
testdata[5].yAxis = 2;
testdata[6].type = "bar";
testdata[6].yAxis = 2;
testdata[7].type = "bar";
testdata[7].yAxis = 2;
testdata[8].type = "bar";
testdata[8].yAxis = 2;

nv.addGraph(function() {
var chart = nv.models.multiChart()
Expand All @@ -70,4 +74,4 @@

</script>
</body>
</html>
</html>
56 changes: 56 additions & 0 deletions src/models/multiChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ nv.models.multiChart = function() {
lines1 = nv.models.line().yScale(yScale1),
lines2 = nv.models.line().yScale(yScale2),

scatters1 = nv.models.scatter().yScale(yScale1),
scatters2 = nv.models.scatter().yScale(yScale2),

bars1 = nv.models.multiBar().stacked(false).yScale(yScale1),
bars2 = nv.models.multiBar().stacked(false).yScale(yScale2),

Expand Down Expand Up @@ -58,6 +61,8 @@ nv.models.multiChart = function() {

var dataLines1 = data.filter(function(d) {return d.type == 'line' && d.yAxis == 1});
var dataLines2 = data.filter(function(d) {return d.type == 'line' && d.yAxis == 2});
var dataScatters1 = data.filter(function(d) {return d.type == 'scatter' && d.yAxis == 1});
var dataScatters2 = data.filter(function(d) {return d.type == 'scatter' && d.yAxis == 2});
var dataBars1 = data.filter(function(d) {return d.type == 'bar' && d.yAxis == 1});
var dataBars2 = data.filter(function(d) {return d.type == 'bar' && d.yAxis == 2});
var dataStack1 = data.filter(function(d) {return d.type == 'area' && d.yAxis == 1});
Expand Down Expand Up @@ -96,6 +101,8 @@ nv.models.multiChart = function() {
gEnter.append('g').attr('class', 'nv-y2 nv-axis');
gEnter.append('g').attr('class', 'lines1Wrap');
gEnter.append('g').attr('class', 'lines2Wrap');
gEnter.append('g').attr('class', 'scatters1Wrap');
gEnter.append('g').attr('class', 'scatters2Wrap');
gEnter.append('g').attr('class', 'bars1Wrap');
gEnter.append('g').attr('class', 'bars2Wrap');
gEnter.append('g').attr('class', 'stack1Wrap');
Expand Down Expand Up @@ -142,6 +149,14 @@ nv.models.multiChart = function() {
.height(availableHeight)
.interpolate(interpolate)
.color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'line'}));
scatters1
.width(availableWidth)
.height(availableHeight)
.color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 1 && data[i].type == 'scatter'}));
scatters2
.width(availableWidth)
.height(availableHeight)
.color(color_array.filter(function(d,i) { return !data[i].disabled && data[i].yAxis == 2 && data[i].type == 'scatter'}));
bars1
.width(availableWidth)
.height(availableHeight)
Expand All @@ -163,12 +178,16 @@ nv.models.multiChart = function() {

var lines1Wrap = g.select('.lines1Wrap')
.datum(dataLines1.filter(function(d){return !d.disabled}));
var scatters1Wrap = g.select('.scatters1Wrap')
.datum(dataScatters1.filter(function(d){return !d.disabled}));
var bars1Wrap = g.select('.bars1Wrap')
.datum(dataBars1.filter(function(d){return !d.disabled}));
var stack1Wrap = g.select('.stack1Wrap')
.datum(dataStack1.filter(function(d){return !d.disabled}));
var lines2Wrap = g.select('.lines2Wrap')
.datum(dataLines2.filter(function(d){return !d.disabled}));
var scatters2Wrap = g.select('.scatters2Wrap')
.datum(dataScatters2.filter(function(d){return !d.disabled}));
var bars2Wrap = g.select('.bars2Wrap')
.datum(dataBars2.filter(function(d){return !d.disabled}));
var stack2Wrap = g.select('.stack2Wrap')
Expand All @@ -188,10 +207,12 @@ nv.models.multiChart = function() {
.range([0, availableHeight]);

lines1.yDomain(yScale1.domain());
scatters1.yDomain(yScale1.domain());
bars1.yDomain(yScale1.domain());
stack1.yDomain(yScale1.domain());

lines2.yDomain(yScale2.domain());
scatters2.yDomain(yScale2.domain());
bars2.yDomain(yScale2.domain());
stack2.yDomain(yScale2.domain());

Expand All @@ -204,6 +225,9 @@ nv.models.multiChart = function() {
if(dataLines1.length){d3.transition(lines1Wrap).call(lines1);}
if(dataLines2.length){d3.transition(lines2Wrap).call(lines2);}

if(dataScatters1.length){d3.transition(scatters1Wrap).call(scatters1);}
if(dataScatters2.length){d3.transition(scatters2Wrap).call(scatters2);}

xAxis
._ticks( nv.utils.calcTicksX(availableWidth/100, data) )
.tickSize(-availableHeight, 0);
Expand Down Expand Up @@ -261,6 +285,23 @@ nv.models.multiChart = function() {
.hidden(false);
}

function mouseover_scatter(evt) {
var yaxis = data[evt.seriesIndex].yAxis === 2 ? yAxis2 : yAxis1;
evt.value = evt.point.x;
evt.series = {
value: evt.point.y,
color: evt.point.color
};
tooltip
.duration(100)
.valueFormatter(function(d, i) {
return yaxis.tickFormat()(d, i);
})
.data(evt)
.position(evt.pos)
.hidden(false);
}

function mouseover_stack(evt) {
var yaxis = data[evt.seriesIndex].yAxis === 2 ? yAxis2 : yAxis1;
evt.point['x'] = stack1.x()(evt.point);
Expand Down Expand Up @@ -301,6 +342,15 @@ nv.models.multiChart = function() {
tooltip.hidden(true)
});

scatters1.dispatch.on('elementMouseover.tooltip', mouseover_scatter);
scatters2.dispatch.on('elementMouseover.tooltip', mouseover_scatter);
scatters1.dispatch.on('elementMouseout.tooltip', function(evt) {
tooltip.hidden(true)
});
scatters2.dispatch.on('elementMouseout.tooltip', function(evt) {
tooltip.hidden(true)
});

stack1.dispatch.on('elementMouseover.tooltip', mouseover_stack);
stack2.dispatch.on('elementMouseover.tooltip', mouseover_stack);
stack1.dispatch.on('elementMouseout.tooltip', function(evt) {
Expand Down Expand Up @@ -338,6 +388,8 @@ nv.models.multiChart = function() {
chart.dispatch = dispatch;
chart.lines1 = lines1;
chart.lines2 = lines2;
chart.scatters1 = scatters1;
chart.scatters2 = scatters2;
chart.bars1 = bars1;
chart.bars2 = bars2;
chart.stack1 = stack1;
Expand Down Expand Up @@ -385,6 +437,8 @@ nv.models.multiChart = function() {
getX = _;
lines1.x(_);
lines2.x(_);
scatters1.x(_);
scatters2.x(_);
bars1.x(_);
bars2.x(_);
stack1.x(_);
Expand All @@ -394,6 +448,8 @@ nv.models.multiChart = function() {
getY = _;
lines1.y(_);
lines2.y(_);
scatters1.y(_);
scatters2.y(_);
stack1.y(_);
stack2.y(_);
bars1.y(_);
Expand Down

0 comments on commit 73bb8f7

Please sign in to comment.