Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Multi chart bar align2 #2156

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Multi chart bar align2 #2156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c002d21
multiChart Bar position fix by anantagrawal #619
Apr 23, 2018
91b5b03
example file per SashaKolda
Apr 23, 2018
5177e19
make multiChart example refer to branch
Apr 23, 2018
2b544af
Fix bad Merge on differenceChart.js. from: e6e89b3dc2b26b8b787f6954…
Apr 24, 2018
300c842
Merge branch 'Fix_bad_merge' into multiChart_Bar_Align2
Apr 24, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
176 changes: 151 additions & 25 deletions examples/multiChart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@
<script src="../build/nv.d3.js"></script>
<script src="lib/stream_layers.js"></script>


<script src="../src/models/multiBar.js"> </script>
<!-- testing multibar changes -->


<style>
text {
font: 12px sans-serif;
Expand All @@ -20,6 +25,31 @@
height: 100%;
width: 100%;
}

.tick > line:not(.zero){
opacity: 0 !important;
}

.nvd3.multiChart .axis .nv-axis line {
stroke: none;
fill: none;
}

.nv-y1 {
opacity: 0!important;
}

/*.nv-point {*/
/*background-image: url("https://images.scholastic.co.uk/assets/a/bf/f1/499838.jpg");*/
/*background-position: center;*/
/*background-repeat: no-repeat;*/
/*background-size: contain;*/
/*}*/

/*.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {*/
/*fill-opacity: 1 !important;*/
/*}*/

</style>
</head>
<body class='with-3d-shadow with-transitions'>
Expand All @@ -30,48 +60,144 @@

<script>

var testdata = stream_layers(9,10+Math.random()*100,.1).map(function(data, i) {
var testdata = stream_layers(2,10,.1).map(function(data, i) {
return {
key: 'Stream' + i,
values: data.map(function(a){a.y = a.y * (i <= 1 ? -1 : 1); return a})
key: 'Graph' + i,
values: data.map(function(a){a.y = a.y; return a})
};
});

testdata[0].type = "area";

// bar1
testdata[0].type = "bar";
testdata[0].yAxis = 1;
testdata[1].type = "area";

// lines1
testdata[1].type = "line";
testdata[1].yAxis = 1;
testdata[2].type = "line";
testdata[2].yAxis = 1;
testdata[3].type = "line";
testdata[3].yAxis = 2;
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;
// testdata[2].type = "line";
// testdata[2].yAxis = 1;
// testdata[3].type = "line";
// testdata[3].yAxis = 2;
// 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()
.margin({top: 30, right: 60, bottom: 50, left: 70})
.color(d3.scale.category10().range());
.margin({top: 50, right: 60, bottom: 50, left: 70})
.color(function(chart) {

if (chart.type == "line") {
return "#d3d3d3";
} else if (chart.type == "bar") {
return "#5E4A82";
}

chart.xAxis.tickFormat(d3.format(',f'));
return "#00FF00";
});

// .color(d3.scale.category10().range());

// chart.xAxis.tickFormat(d3.format(',f'));
chart.xAxis.tickFormat(function(d) { return d3.time.format('%b %d')(new Date(d)); })
chart.yAxis1.tickFormat(d3.format(',.1f'));
chart.yAxis2.tickFormat(d3.format(',.1f'));

chart.lines1.clipRadius(function (d) {
return 20;
});

chart.bars1.fillOpacity(1.0); // puna boja
// chart.bars2.barColor(["#FF0000","#00FF00","#0000FF"]);

// chart.lines1.pointSize(1120);
// chart.scatters1.pointSize(1120);

d3.select('#chart1 svg')
.datum(testdata)
.transition().duration(500).call(chart);
.transition().each("end", stylizeChart).duration(500).call(chart);

function stylizeChart() {
d3.selectAll('rect').attr('rx', 5);
d3.selectAll('rect').attr('ry', 5);

d3.selectAll('path.nv-line').attr('stroke-dasharray', "5,5");

d3.select('#chart1 svg').append("defs")
.append('pattern')
.attr('id', 'locked2')
.attr('patternUnits', 'objectBoundingBox')
.attr('x', 0)
.attr('y', 0)
.attr('width', 38)
.attr('height', 38)
.append("image")
.attr("xlink:href", "https://images.scholastic.co.uk/assets/a/bf/f1/499838.jpg")
.attr('width', 38)
.attr('height', 38);


var barsArray = d3.selectAll('rect.nv-bar');
d3.selectAll('path.nv-point').each(function(d,i) {
// console.log(this);
// console.log(d);
// console.log(i);
if (testdata[0].values[i].y >= testdata[1].values[i].y){
// value is equal or greater than goal value
// d3.select(this).attr('fill', "url(#locked2)");


var star = {
size: {
width: 38,
height: 38
},
x: 0,
y: 0,
transform: "",
barOffset: 25
};


var currentBar = d3.select(barsArray[0][i]);

console.log("bar height: " + currentBar.attr("height"));

star.x = currentBar.attr("x");
star.y = currentBar.attr("y") - star.size.height - star.barOffset;
star.transform = currentBar.attr("transform");
console.log(currentBar);


d3.select(currentBar[0][0].parentNode).append('rect')
.attr('width', star.size.width)
.attr('height', star.size.height)
.attr('x', star.x)
.attr('y', star.y)
.attr('transform', star.transform)
.attr('fill', "url(#locked2)");


} else {
d3.select(this).style('opacity', 0);
}
});
}

nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) });


return chart;
});


</script>
</body>
</html>
</html>
21 changes: 18 additions & 3 deletions src/models/multiBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,15 @@ nv.models.multiBar = function() {
.attr('y', function(d,i,j) { return y0(stacked && !data[j].nonStackable ? d.y0 : 0) || 0 })
.attr('height', 0)
.attr('width', function(d,i,j) { return x.rangeBand() / (stacked && !data[j].nonStackable ? 1 : data.length) })
.attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',0)'; })
//.attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',0)'; })
.attr('transform', function(d,i) {
var w = (x.rangeBand() / (stacked && !data[j].nonStackable ? 1 : data.length));
var sectionWidth = availableWidth/(bars.enter()[0].length - 1);
if(bars.enter().length == 2)
return 'translate(' + ((i-1)*w + i*w + (i*(sectionWidth - 2*w))) + ',0)';
else
return 'translate(' + ((i-0.5)*w + i*(sectionWidth - w)) + ',0)';
})
;
bars
.style('fill', function(d,i,j){ return color(d, j, i); })
Expand Down Expand Up @@ -280,8 +288,15 @@ nv.models.multiBar = function() {
});
bars
.attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive'})
.attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',0)'; })

//.attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',0)'; })
.attr('transform', function(d,i) {
var w = (x.rangeBand() / (stacked && !data[j].nonStackable ? 1 : data.length));
var sectionWidth = availableWidth/(bars.enter()[0].length - 1);
if(bars.enter().length == 2)
return 'translate(' + ((i-1)*w + i*w + (i*(sectionWidth - 2*w))) + ',0)';
else
return 'translate(' + ((i-0.5)*w + i*(sectionWidth - w)) + ',0)';
})
if (barColor) {
if (!disabled) disabled = data.map(function() { return true });
bars
Expand Down
29 changes: 0 additions & 29 deletions test/mocha/differenceChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,35 +217,6 @@
describe('Processing Data', function () {
it('should does not process data if series toggled off', function () {
builder.model.showPredictedLine(false);
<<<<<<< HEAD
var expectedData = [{
key: 'Predicted Data minus Actual Data (Predicted > Actual)',
type: 'area',
values: [{ x: 123, y0: 10, y1: 15 }, { x: 124, y0: 20, y1: 25 }],
yAxis: 1,
color: 'rgba(44,160,44,.9)',
processed: true,
noHighlightSeries: true
},
{
key: 'Predicted Data minus Actual Data (Predicted < Actual)',
type: 'area',
values: [{ x: 123, y0: 10, y1: 10 }, { x: 124, y0: 20, y1: 20 }],
yAxis: 1,
color: 'rgba(234,39,40,.9)',
processed: true,
noHighlightSeries: true
},
{
key: 'Actual Data',
type: 'line',
values: [{ x: 123, y: 10 }, { x: 124, y: 20 }],
yAxis: 1,
color: '#666666',
processed: true,
strokeWidth: 1
}];
=======
var expectedData = [
{
key: 'Predicted Data minus Actual Data (Predicted > Actual)',
Expand Down