Develop Reference

how to erase negative ticks from NVD3 line chart

I tried to erase negative ticks from my NVD3 line chart (with data includes 0 only)
but It seems impossible what I wanted to do...
I want to set the line bottom when I throw data what includes 0 only.
Is there another way? or just I had a mistake?
code:
nv.addGraph(function() {
//DATA.B includes only 0 data, the value must be "data>0"
data = DATA.A,DATA.B;
var chart = nv.models.linePlusBarChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
.x(function(d,i) { return i })
.y(function(d,i) { return d[1] });
chart.xAxis.tickFormat(function(d) {
var dx = data[0].values[d] && data[0].values[d][0] || 0;
return d3.time.format('%Y-%m-%d')(new Date(dx))
});
chart.y1Axis
.tickFormat(d3.format(',f'))
.tickSize(0,6);
chart.y2Axis
.tickFormat(function(d) { return d3.format(',f')(d) + '%' });
chart.bars.forceY([0]);
d3.select($node).datum(data).transition().duration(0).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
thanks

DC.js bar chart x-axis labels not aligned with bars

Used DC.js to create stacked bar chart with ordinal x-axis.
Versions used:
DC.js version 1.7.5
crossfilter.js version 1.3.12
D3.js version 3.5.17
The problem is that the chart's x-axis labels are not aligned with bars. They are actually shifted two ticks to right so last two labels have no bars above them.
Edit to remove - Also can't select the right most bar to filter data eg hover over bar doesn't show selector to click and activate cross filter. - it was just two chart margins overlapping blocking cursor.
Here is screenshot of chart indicating problems.
The x-axis is ordinal set using .xUnits(dc.units.ordinal)
I used a renderlet to change x-axis label orientation so they are vertical. If I remove renderlet it doesn't change the problems above.
Here is my chart div and javascript code.
<div id="month-chart"></div>
<script type="text/javascript">
d3.csv("merged_hostname.csv", function(data) {
var parseDate = d3.time.format("%Y-%m-%d").parse;
data.forEach(function(d) {
d.date = parseDate(d.date);
d.sessions = +d.sessions;
d.ad_requests = +d.ad_requests;
d.bounceRate = +d.bounceRate;
d.clicks = +d.clicks;
d.earnings = +d.earnings;
d.newUsers = +d.newUsers;
d.sessionDuration = +d.sessionDuration;
d.sessionsPerUser = +d.sessionsPerUser;
d.twitterSessions = +d.twitterSessions;
d.users = +d.users;
});
var ndx = crossfilter(data);
var yyyymmDim = ndx.dimension(function(d) { return d["yyyymm"]; });
var PPCCByYYYYMM = yyyymmDim.group().reduceSum(function(d) {
if (d.PPCC === "PPCC") {
return +d.sessions;
}else{
return 0;
}
});
var otherByYYYYMM = yyyymmDim.group().reduceSum(function(d) {
if (d.PPCC === "Other") {
return +d.sessions;
}else{
return 0;
}
});
monthChart = dc.barChart("#month-chart");
monthChart
.height(200)
.width(500)
.margins({top: 10, right: 10, bottom: 50, left: 40})
.dimension(yyyymmDim)
.group(PPCCByYYYYMM)
.stack(otherByYYYYMM)
.transitionDuration(500)
.brushOn(true)
.elasticY(true)
.yAxisLabel('sessions')
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
.renderlet(function (chart) {
chart.selectAll("g.x text")
.attr('dx', '-30')
.attr('transform', "rotate(-90)");
});
dc.renderAll();
});
</script>
Any ideas what can causes these issues and how to resolve?

You can move the left position with this:
.attr('transform', "translate(-20,0) rotate(-90)");
Change 20 if its necessary

show row chart after clicking a other chart (dc.js)

I have two row charts and need to show the 2nd chart after i clicked (selectetd one) on the first row chart. how can i make it?
I can't add a js fiddle, because i'm getting my data from a database.
var TestCaseRow = dc.rowChart("#TestCaserowchart");
var TestCaseDim = perfData.dimension(function (d) {
return d.TestCase;
});
var clickGroup = TestCaseDim.group().reduceCount(function (d) {
return d.x;
});
var filtered_groupTestCase = remove_empty_bins(clickGroup);
TestCaseRow
.width(1100)
.height(filtered_groupTestCase.all().length*18)
.margins({ top: 5, left: 10, right: 10, bottom: 20 })
.dimension(TestCaseDim)
.group(filtered_groupTestCase)
.elasticX(true);
//my other row chart
var testscriptRow = dc.rowChart("#testscriptrowchart");
var testscriptDim = perfData.dimension(function (d) {
return d.TestScript;
});
var ClickTestscriptGroup = testscriptDim.group().reduceCount(function (d) {
return d.x;
});
var filtered_groupTestScript = remove_empty_bins(ClickTestscriptGroup);
testscriptRow
.width(1100)
.height(filtered_groupTestScript.all().length*40)
.margins({ top: 5, left: 10, right: 10, bottom: 20 })
.dimension(testscriptDim)
.group(filtered_groupTestScript)
.elasticX(true);

Register an event-handler on the first chart with .on('filtered', function(chart, filter){...}). Within that function, check if the 2nd chart is displayed and if it is not, do whatever you need to do to display it.

nvd3 multiple charts sharing the same data

I am trying to build 2 vertical charts sharing the same data. So I created a refreshPrimary(top) and refreshStackedArea(bottom) that can be called to refresh the graphs depending on options the user selects.
The problem I am having it that when I invoke both refreshPrimary and refreshStackedArea the top graph does not show.if I only do refreshPrimary it display it's graph ok. Below are the refresh functions, the HTML and chart drawing functions.
Refresh function :
// Add refresh function to lm_pareto context
function refreshPrimary() {
//
function refreshGraph() {
console.log("DEBUG JS lm_pareto.refreshGraph entered");
d3.selectAll("#lm_pareto svg > *").remove();
d3.select('#lm_pareto svg')
.datum(lm_pareto.dataPrimary)
.call(chart);
//Update the chart when window resizes.
nv.utils.windowResize(function() { chart.update() });
return chart;
}
nv.addGraph(refreshGraph);
}
function refreshStackedArea() {
function refreshGraph_SArea() {
d3.selectAll("#lm_stackedArea svg > *").remove();
d3.select('#lm_stackedArea svg')
.datum(lm_pareto.dataStackedArea)
.call(chart); //Finally, render the chart!
//Update the chart when window resizes.
nv.utils.windowResize(function() { chart.update() });
return chart;
}
nv.addGraph(refreshGraph_SArea);
}
HTML DIV's
<div id="lm_pareto" class="lm_graph" style="border: 2px solid blue"></div>
<div id="lm_stackedArea" class="lm_graph" style="border: 2px solid blue"></div>
TOP CHART
var chart;
nv.addGraph(function () {
chart = nv.models.stackedLineChart()
.options({
reduceXTicks: false
})
.margin(margin)
// Get normalised data for chart
chart.lines1.forceY(0);
chart.lines2.forceY(0);
svg = d3.select("#lm_pareto")
.append("svg");
// chart is a temp object of nv.addGraph... not able to pass back.
return chart;
});
BOTTOM CHART
var margin = {
top: 50,
right: 50,
bottom: 50,
left: 70
};
var chart;
nv.addGraph(function() {
chart = nv.models.stackedAreaChart()
.margin(margin)
.x(function(d) { return d[0] })
.y(function(d, x) { return d[1]; })
.useInteractiveGuideline(true)
.rightAlignYAxis(false) //y-axis to the right side.
// .transitionDuration(500)
.showControls(false)
.clipEdge(true)
.color(lm_pareto.ColorList);
chart.yAxis
.tickFormat(d3.format(',.2f'));
svg = d3.select("#lm_stackedArea")
.append("svg")
// OLD WAY
//svg.datum(lm_pareto.dataStackedArea)
// .call(chart);
//
//nv.utils.windowResize(chart.update);
return chart;

nvd3 lineplusBarChart add values from javascript

I have this code to produce a lineplusBarChart
HTML
<div id="chart1" class='with-3d-shadow with-transitions'>
<svg> </svg>
</div>
Scripts
<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/models/linePlusBarChart.js"></script>
<script>
var time="1134345600000";
var quantity="12332212"
var testdata = [
{
"key" : "Quantity" ,
"bar": true,
"values" : [ [ 1136005200000 , 1271000.0] ]
}
].map(function(series) {
series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
return series;
});
testdata[0].values.push([time, quantity]);//NOT SHOWING THE BAR
var chart;
nv.addGraph(function() {
chart = nv.models.linePlusBarChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
.x(function(d,i) { return i })
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(function(d) {
var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
return dx ? d3.time.format('%x')(new Date(dx)) : '';
})
.showMaxMin(false);
chart.y1Axis
.tickFormat(d3.format(',f'));
chart.y2Axis
.tickFormat(function(d) { return '$' + d3.format(',.2f')(d) });
chart.bars.forceY([0]).padData(false);
//chart.lines.forceY([0]);
d3.select('#chart1 svg')
.datum(testdata)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});
</script>
Now i want to add some variables to the graph from javascript. Let say i have two variables var time="1134345600000" and var quantity="12332212". i want some how to push these two variables into var testdata.values.
Is there an possible way?
DEMO (js code after line 23240)

In your particular case, you need to push the data like this:
testdata[0].values.push({x: +time, y: +quantity});
Demo here.