Call Json API on bar chart NVD3.js - javascript

I am trying to do an drill-down on bar graph using NVD3.js library. Chart has been made successfully. now I want to call an Json API by clicking on a particular bar so that new chart can be generated as per the parameter.
nv.addGraph(function() {
var chart = nv.models.discreteBarChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.showValues(true)
.duration(1000)
.showLegend(true)
;
d3.select('#chart1 svg')
.datum(data)
.transition().duration(500)
.call(chart);
chart.discretebar.dispatch.on("elementClick", function(e) {
alert("You've clicked " + e.data.label);
});
d3.select('#chart1 svg').datum(historicalBarChart).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
I get the alert with the label value of the bar on which i clicked. Now I want to call an Json API instead of alert.
Kindly help
Thanks


Refer to http://learnjsdata.com/read_data.html
d3.json("/data/employees.json", function(data) {
console.log(data[0]);
});

Related

Weird text behaviour in d3js after update function

In this Plunkr after you've updated the chart, the percentage that's displayed is completely wrong.
The displayed percentage before the update is however correct and I have no idea as to why this is .
Here's part of the code that isn't behaving as expected.
label.transition()
.duration(750)
.text(function(d) {
return textFormat(100/(d.data.total/d.data["apples" + CAT]))+'%'});
Any help is appreciated!

You only ever calculate d.total for category one. In your update function you need to rerun:
data.forEach(function(d) {
d.total = d3.sum(data, function(d) { return d3.sum([d["apples" + CAT]]); });
});

nvd3 chart only displaying after resize

I am having a problem where my chart will only render after a resize event has been called by the browser.
After the resize event it looks exactly how I want it to.
I am using d3.csv to load the data I suspect this may have something to do with it but I have no idea really.
I am using d3 3.5.6 and nvd3 1.8.1
I am locally serving with python -m SimpleHTTPServer
Here is the javascript that I am using to create the chart:
nv.addGraph(function () {
var chart = nv.models.lineChart()
.useInteractiveGuideline(true);
chart.duration(0)
.margin({
left: 100,
bottom: 100
})
.x(function (d) {
return d.financial_year
})
.y(function (d) {
return d.real_expenditure_millions
})
.forceY([0]);
chart.xAxis.axisLabel("Financial Year ");
chart.yAxis.axisLabel('Expenditure (millions)');
chart.showXAxis(true);
myData = getData();
d3.select(".chart")
.datum(myData)
.attr("id", function (d) { console.log(d); })
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
Here is my getData function which also serves to update a table on the page:
function getData() {
var myData = [];
d3.csv("data.csv", function (data) {
var table = d3.select("table");
var row = table.append("thead").append("tr")
row.append("th").text("financial year");
row.append("th").text("Real Expenditure (millions)");
table = table.append("tbody");
for (d in data) {
var year = data[d].financial_year;
var expenditure = data[d].real_expenditure_millions;
row = table.append("tr");
row.append("td").text(year);
row.append("td").text(expenditure);
myData.push({
financial_year: +(year.substr(0, 4)),
real_expenditure_millions: +expenditure
});
}
});
return [{
values: myData,
key: "Federal Government Dental Expenditure in NSW",
color: "#ff7f0e"
}];
}
data.csv looks like
financial_year,real_expenditure_millions
1997-98,60
1998-99,115
1999-00,144
2000-01,177
2001-02,182
2002-03,175
2003-04,169
2004-05,177
2005-06,183
2006-07,189
2007-08,280
2008-09,479
2009-10,578
2010-11,613
2011-12,660
The chart only displays after a window.dispatchEvent(new Event('resize')); in the browser console.

I ended up having to load the data by calling my get data function outside the nv.addGraph

how to add brush in nvd3 like d3

I am creating graph in nvd3 FIDDLE
I am done with graph and its working nicely but now I want to add brush in it like d3 see this example: http://bl.ocks.org/mbostock/1667367. but i searched every where, i found one solution i.e crossfilter but is it possible to use brush like d3 and nvd3 has any brush function ? please help me.
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.xAxis
.tickFormat(d3.format(',f'));
chart.yAxis
.tickFormat(d3.format(',.1f'));
chart.multibar.stacked(true); // default to stacked
chart.showControls(true); // don't show controls
d3.select('#chart svg')
.datum(test_data)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});

I wonder how can you add brush using crossfilter?
Any way here is the solution
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.xAxis
.tickFormat(d3.format(',f'));
chart.yAxis
.tickFormat(d3.format(',.1f'));
chart.multibar.stacked(true); // default to stacked
chart.showControls(true); // don't show controls
d3.select('#chart svg')
.datum(test_data)
.transition().duration(500).call(chart);
var brushC = d3.select('#chart svg g');
brushC.empty() ? brushC.append('g'): brushC.select('g')
.attr("class", "brush")
.call(d3.svg.brush()
.x(chart.xAxis.scale())
.on('brushend', onBrush)
.extent([0,0])
)
.selectAll('rect')
.attr('height',320 )//change according to you chart height
//i have hard coded it since it was a 'quick and dirty' fix
//you may try to get it from chart, if you can please update me.
;
}
nv.utils.windowResize(chart.update);
return chart;
});
onBrush Function
function onBrush() {
brushExtent = d3.event.target.extent();
console.log(brushExtent);
}
add CSS
rect.extent{
color:grey;
opacity:0.4;
}

nvd3 line chart not shown properly. (dots and shaded area)

So I am using nvd3 and I want to show 2 lines in one line chart. I know the code is alright as I am trying it on the live code of nvd3 and it works fine. I read in many places though that the code they use on the nvd3 live code is not the same as the api.
So the graph is shaded and has dots. However in the live code of nvd3 there are no dots and no shaded area.
Thus is my code :
nv.addGraph(function() {
var chart = nv.models.lineChart()
.useInteractiveGuideline(true)
.width(900)
.height(600)
.margin({
left: 75,
right: 50
})
.showLegend(true)
.showYAxis(true)
.showXAxis(true)
.width(800)
.height(900);
;
chart.xAxis
.tickFormat(d3.format(',r'))
;
chart.yAxis
.tickFormat(d3.format('.02f'))
;
//console.log(json);
d3.select('#Average_Life svg')
.datum([{"values":[{"x":0,"y":2042},{"x":173,"y":1922},{"x":347,"y":1873},{"x":526,"y":1907},
{"x":700,"y":1883},{"x":931,"y":1854},{"x":1058,"y":1710},{"x":1220,"y":1473},{"x":1399,"y":1792},
{"x":1584,"y":1869},{"x":1752,"y":2259},{"x":1983,"y":2288},{"x":2105,"y":2524},{"x":2284,"y":2770},
{"x":2469,"y":2857},{"x":2637,"y":2698},{"x":2811,"y":2760},{"x":3042,"y":2596},{"x":3169,"y":2500},
{"x":3331,"y":2408},{"x":3522,"y":2355},{"x":3690,"y":2500},{"x":3863,"y":2524},{"x":4095,"y":2447}],
"key":"dd","color":"#34418f"},{"values":[{"x":0,"y":3753},{"x":173,"y":3609},{"x":347,"y":3464},
{"x":526,"y":3315},{"x":700,"y":3170},{"x":931,"y":2977},{"x":1058,"y":2871},{"x":1220,"y":2736},
{"x":1399,"y":2587},{"x":1584,"y":2433},{"x":1752,"y":2293},{"x":1983,"y":2100},{"x":2105,"y":1999},
{"x":2284,"y":1849},{"x":2469,"y":1695},{"x":2637,"y":1555},{"x":2811,"y":1411},{"x":3042,"y":1218},
{"x":3169,"y":1112},{"x":3331,"y":977},{"x":3522,"y":818},{"x":3690,"y":678},{"x":3863,"y":534},
{"x":4095,"y":341}],"key":"ss","color":"#f9b800"}])
.transition().duration(500)
.call(chart);
//Update the chart when window resizes.
nv.utils.windowResize(function() {
chart.update()
});
return chart;
});
So I would like to know why the shaded area and the dots. And why I dont get to see the axis,
Cheers

Having the exact same issue on the shading. My solution is to just select all groups (the path elements are sorted into groups) and set fill: none right after i render the chart
This is my code
function test(data) {
/*These lines are all chart setup. Pick and choose which chart features you want to utilize. */
nv.addGraph(function () {
var chart = nv.models.lineChart()
.margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
// .transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(true) //Show the y-axis
.showXAxis(true) //Show the x-axis
;
chart.xAxis //Chart x-axis settings
.axisLabel('Time (sec)')
.tickFormat(d3.format('.01f'));
chart.yAxis //Chart y-axis settings
.axisLabel('Torque (NM)')
.tickFormat(d3.format(',r'));
d3.select('#chart') //Select the <svg> element you want to render the chart in.
.datum(data) //Populate the <svg> element with chart data...
.call(chart); //Finally, render the chart!
d3.selectAll('g').style('fill', 'none');
//Update the chart when window resizes.
nv.utils.windowResize(function () {
chart.update()
});
return chart;
});
}

NVD3 piechart missing low percentage labels

I'm using NVD3 ver 3.1.7 for generating pieChart.
Everything works perfect except the chart labels. If the label value is of very low
percentage, it does not appear. I want to make it visible irrespective of its value.
This is my code.
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.showLabels(true);
d3.select("#chart svg")
.datum(data)
.transition().duration(1200)
.call(chart);
return chart;
});
Help would highly be appreciated.

I just managed to resolve this issue.
In nvd3 pieChart, there is a parameter
.labelThreshold(.05)
which sets percentage for chart labels to display or hide. By default this is set to
.02 => 2%.
I increased it to
.05 => 5%
which solved my problem.

You can use this option also.
.labelSunbeamLayout(true)

Categories

Resources