NVD3 D3 Getting specific label on xaxis - javascript

I am using nvd3 library to generate grouped multi bar graph. This is my dataset (in JSON FORM)
[{"key":"Param 1","values":[{"y":2.0,"x":"2010-04-01"},{"y":0,"x":"2010-10-01"},{"y":0,"x":"2010-12-01"},{"y":0,"x":"2011-01-01"},{"y":0,"x":"2011-04-01"},{"y":0,"x":"2011-10-01"},{"y":0,"x":"2012-01-01"},{"y":0,"x":"2012-03-01"},{"y":0,"x":"2012-05-01"},{"y":0,"x":"2012-08-01"},{"y":0,"x":"2012-10-01"},{"y":0,"x":"2012-11-01"},{"y":25.0,"x":"2012-12-01"},{"y":0,"x":"2013-01-01"},{"y":0,"x":"2013-02-01"},{"y":0,"x":"2013-03-01"},{"y":0,"x":"2013-04-01"}]},{"key":"Param 2","values":[{"y":160.0,"x":"2010-04-01"},{"y":0,"x":"2010-10-01"},{"y":0.0,"x":"2010-12-01"},{"y":0,"x":"2011-01-01"},{"y":4.0,"x":"2011-04-01"},{"y":0,"x":"2011-10-01"},{"y":0.0,"x":"2012-01-01"},{"y":45.0,"x":"2012-03-01"},{"y":9.0,"x":"2012-05-01"},{"y":0,"x":"2012-08-01"},{"y":10.0,"x":"2012-10-01"},{"y":0,"x":"2012-11-01"},{"y":30.0,"x":"2012-12-01"},{"y":0.0,"x":"2013-01-01"},{"y":58.0,"x":"2013-02-01"},{"y":52.0,"x":"2013-03-01"},{"y":36.0,"x":"2013-04-01"}]},{"key":"Param 3","values":[{"y":80.0,"x":"2010-04-01"},{"y":12.0,"x":"2010-10-01"},{"y":0.0,"x":"2010-12-01"},{"y":0,"x":"2011-01-01"},{"y":2.0,"x":"2011-04-01"},{"y":0.0,"x":"2011-10-01"},{"y":0.0,"x":"2012-01-01"},{"y":33.0,"x":"2012-03-01"},{"y":16.0,"x":"2012-05-01"},{"y":20.0,"x":"2012-08-01"},{"y":0.0,"x":"2012-10-01"},{"y":150.0,"x":"2012-11-01"},{"y":65.0,"x":"2012-12-01"},{"y":0.0,"x":"2013-01-01"},{"y":44.0,"x":"2013-02-01"},{"y":116.0,"x":"2013-03-01"},{"y":24.0,"x":"2013-04-01"}]},{"key":"Param 4","values":[{"y":0,"x":"2010-04-01"},{"y":8.0,"x":"2010-10-01"},{"y":0,"x":"2010-12-01"},{"y":0,"x":"2011-01-01"},{"y":0,"x":"2011-04-01"},{"y":0.0,"x":"2011-10-01"},{"y":4.0,"x":"2012-01-01"},{"y":0,"x":"2012-03-01"},{"y":0,"x":"2012-05-01"},{"y":0,"x":"2012-08-01"},{"y":0,"x":"2012-10-01"},{"y":0,"x":"2012-11-01"},{"y":0.0,"x":"2012-12-01"},{"y":0,"x":"2013-01-01"},{"y":0,"x":"2013-02-01"},{"y":67.0,"x":"2013-03-01"},{"y":0,"x":"2013-04-01"}]},{"key":"Param 5","values":[{"y":0,"x":"2010-04-01"},{"y":0,"x":"2010-10-01"},{"y":0,"x":"2010-12-01"},{"y":15.0,"x":"2011-01-01"},{"y":0,"x":"2011-04-01"},{"y":0,"x":"2011-10-01"},{"y":0,"x":"2012-01-01"},{"y":0,"x":"2012-03-01"},{"y":0,"x":"2012-05-01"},{"y":0,"x":"2012-08-01"},{"y":0,"x":"2012-10-01"},{"y":0,"x":"2012-11-01"},{"y":0,"x":"2012-12-01"},{"y":0,"x":"2013-01-01"},{"y":250.0,"x":"2013-02-01"},{"y":120.0,"x":"2013-03-01"},{"y":100.0,"x":"2013-04-01"}]}]
And this is the code I am using:
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarChart()
.barColor(d3.scale.category20().range());
chart.xAxis
.showMaxMin(true).tickFormat(function(d){return d3.time.format('%b-%y')(new Date(d));});
chart.yAxis
.tickFormat(d3.format(',1f'));
d3.select('#plot_container svg')
.datum(plot_data)
.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;
The labels I am getting on the x-axis are gererated by the library itself. I want all the months on x-axis for which data is available. Also, all such months should be equally spaced, not linear in time.
I have tried stuff like tickValues to no avail.
How should this be done?

Related

D3 and Javascript: Uncaught TypeError: Cannot read property 'apply' of undefined

I am very new to D3 and JavaScript, I am trying to build up a basic donut chart, but stuck very badly with this error. I can see values coming into donutChartData, but still chart fails to get the display on the browser.
Error occurred on line .call(donutChart);
Exception:
Uncaught TypeError: Cannot read property 'apply' of undefined
at Array.Co.call (d3.min.js:3)
at Socket.<anonymous> (main.js:137)
at Socket.Emitter.emit (socket.io.js:7414)
at Socket.onevent (socket.io.js:7130)
at Socket.onpacket (socket.io.js:7088)
at Manager.<anonymous> (socket.io.js:7520)
at Manager.Emitter.emit (socket.io.js:7414)
at Manager.ondecoded (socket.io.js:2823)
at Decoder.<anonymous> (socket.io.js:7520)
at Decoder.Emitter.emit (socket.io.js:2285)
Code:
var donutChart;
var donutChartData;
//Donut chart example
nv.addGraph(function() {
donutChart = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return +d.value })
.showLabels(true) //Display pie labels
.labelThreshold(.05) //Configure the minimum slice size for labels to show up
.labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
.donut(true) //Turn on Donut mode. Makes pie chart look tasty!
.donutRatio(0.35); //Configure how big you want the donut hole size to be.
d3.select("#Chart4 svg")
.datum(donutChartData)
//.transition().duration(350)
.call(donutChart); /// ERROR OCCURRED ON THIS LINE
return donutChart;
});
socket.on("donutChartData",function(dChartData){
donutChartData=dChartData;
console.log("Donut Chart: ",dChartData[0].label,dChartData[0].value);
d3.select("#Chart4 svg")
.datum(dChartData)
///.transition().duration(350)
.call(donutChart);
//donutChart.update();
});
Your code should be like this:
var donutChart;
var donutChartData;
function drawChart() {
//Donut chart example
nv.addGraph(function() {
donutChart = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return +d.value })
.showLabels(true) //Display pie labels
.labelThreshold(.05) //Configure the minimum slice size for labels to show up
.labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
.donut(true) //Turn on Donut mode. Makes pie chart look tasty!
.donutRatio(0.35); //Configure how big you want the donut hole size to be.
d3.select("#Chart4 svg")
.datum(donutChartData)
//.transition().duration(350)
.call(donutChart); /// ERROR OCCURRED ON THIS LINE
return donutChart;
});
}
socket.on("donutChartData",function(dChartData){
donutChartData=dChartData;
console.log("Donut Chart: ",dChartData[0].label,dChartData[0].value);
drawChart();
});
You must draw the chart after you get data for the chart which you are not doing right now.

Strange functionality of NVD3 Graph when updating data

I have some graphs using d3/nvd3. I am now wanting to be able to update the chart data with the click of a button, I have got it working 90% but when I update the data, the functionality becomes inconsistent.
By this I mean that the clickable legend stops working properly, usually you can double click one of them and it would single out the data.
I think somehow when the data updates, it still has the old data in it's memory and this is causing some issues?
Here is my javascript -
$( document ).ready(function() {
var negative_test_data = [{"key":"O1","values":[{"x":"NRW ","y":1},{"x":"WFW ","y":3}]},{"key":"O2","values":[{"x":"MED ","y":1},{"x":"FSEST ","y":1},{"x":"SW ","y":1},{"x":"LW ","y":4}]},{"key":"O3","values":[{"x":"SEEG ","y":1},{"x":"DLRW ","y":1},{"x":"SEM ","y":1},{"x":"DEN ","y":1},{"x":"LEW ","y":3}]},{"key":"O4","values":[{"x":"BUC ","y":2}]}];
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarChart()
.color(d3.scale.category10().range())
.rotateLabels(0) //Angle to rotate x-axis labels.
.transitionDuration(200)
.showControls(false) //Allow user to switch between 'Grouped' and 'Stacked' mode.
.groupSpacing(0.24) //Distance between each group of bars.
;
chart.reduceXTicks(false).staggerLabels(true).groupSpacing(0.3);
chart.x (function(d) { return d.x; })
chart.yAxis
.tickFormat(d3.format(',.1f'))
.axisLabel('Defect Count')
.axisLabelDistance(40);
d3.select('#chart1M svg')
.datum(negative_test_data)
.call(chart);
return chart;
});
});
var update = function() {
var data = [{"key":"O1","values":[{"x":"NRW ","y":20},{"x":"WW ","y":3}]},{"key":"O2","values":[{"x":"ME ","y":1},{"x":"FST ","y":1},{"x":"SW ","y":1},{"x":"LEW ","y":4}]},{"key":"O3","values":[{"x":"SEEG ","y":1},{"x":"DLW ","y":1},{"x":"SEM ","y":1},{"x":"DE ","y":1},{"x":"LW ","y":3}]},{"key":"O4","values":[{"x":"BUDC ","y":2}]}];
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarChart()
.color(d3.scale.category10().range())
.rotateLabels(0) //Angle to rotate x-axis labels.
.transitionDuration(250)
.showControls(false) //Allow user to switch between 'Grouped' and 'Stacked' mode.
.groupSpacing(0.24) //Distance between each group of bars.
;
chart.reduceXTicks(false).staggerLabels(true).groupSpacing(0.3);
chart.x (function(d) { return d.x; })
chart.yAxis
.tickFormat(d3.format(',.1f'))
.axisLabel('Defect Count')
.axisLabelDistance(40);
d3.select('#chart1M svg')
.datum(data)
.call(chart);
return chart;
});
};
Here is the JSFIDDLE - http://jsfiddle.net/kd82ep7p/8/ so that it can be demonstrated,
Before the data is updated you can play with the legend and select the data you want to see and even double click it.
After you click the update button, it becomes a problem,
If anyone could take a look I would greatly appreciate it.

nvd3 line chart issue

Here, I have used line chart from nvd3. I am trying to fix a few issues with this chart
1. This is an interactive chart, but even if i hover over a point where there are no points from the data, it still shows up the x and y-points.
2. x-axis and y-axis lines do NOT show up. Also the interactive guide doesn't come up in a rectangular box outlined.
3. The x-axis gets cut off at the end (see 14:29:19 being cut off at the end) no matter how much i increase the width to.
4. I am trying to remove the fill that we see above the line graph but styling changes made by me resulted in no success.
code that i use to fetch the line chart
var redraw = function(testData) {
var dataT = [{
key : 'Character Count',
values : testData,
color : '#00AEEF',
area : false
}];
var margin = {
top : 80,
right : 20,
bottom : 80,
left : 50
}, width = 1000 - (margin.left + margin.right), height = 600 - (margin.top + margin.bottom), x = d3.time.scale().range([0, width]), y = d3.scale.linear().range([height, 0]);
x.domain(d3.extent(dataT[0].values, function(d) {
return d3.time.format('%X')(new Date(d.TimeStamp));
}));
y.domain([0, d3.max(dataT[0].values, function(d) {
return d.CharCount;
})]);
nv.addGraph(function() {
chart = nv.models.lineChart().transitionDuration(350).useInteractiveGuideline(true)
.showLegend(true).showYAxis(true).showXAxis(true).x(function(d) {
return new Date(d.TimeStamp);
}).y(function(d) {
return d.CharCount;
});
chart.xAxis.axisLabel('Time').tickFormat(function(d) {
return d3.time.format('%X')(new Date(d));
}).scale(x).orient("bottom");
chart.yAxis.axisLabel('Character Count').tickFormat(d3.format(',')).scale(y);
chart.lines.forceY([0]);
d3.select('#chart2 svg')//.append("g")
.datum(dataT).attr('height', height).attr('width', width).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
};
redraw(data)--data fetched froma service ith dateTimeStamp in x-axis and integer in y-axis points.
Please help!
This is an interactive chart, but even if i hover over a point where there are no points from the data, it still shows up the x and
y-points. 2. x-axis and y-axis lines do NOT show up. Also the
interactive guide doesn't come up in a rectangular box outlined.
Adding corresponding javascript file in nvd3 zip file should solve the problem(line.js, linechart.js and corresponding css file)
3.The x-axis gets cut off at the end (see 14:29:19 being cut off at the end) no matter how much i increase the width to.
This is because you have not set the width and height of the chart in your codes to generate the chart
you should do
chart.width(width).height(height)
4.I am trying to remove the fill that we see above the line graph but styling changes made by me resulted in no success
This I am not sure how to solve as I do not have your dataset, so I not able to reproduce the problem
Here is my test code

NVD3 Scatter Chart Circle Radius

I was wondering how I can set minimum and maximum radii of the circles in an NVD3 scatter chart.
NVD3 Scatter: http://nvd3.org/ghpages/scatter.html
Call .sizeRange([minArea, maxArea]) on your chart object. Note that "size" is proportional to area, not radius, so you need to use the square of the maximum/minimum radius (adjusted by pi/2 if you want to be precise).
As of 1.7.1, call .pointRange([minArea,maxArea]) .
nv.addGraph(function() {
var chart = nv.models.scatterChart()
.showDistX(true)
.sizeRange([100, 1000]) /*** Chart Circle Range ****/
.showDistY(true)
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(d3.format('.02f'));
chart.yAxis.tickFormat(d3.format('.02f'));
d3.select('#chart svg')
.datum(data(4,40))
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
Use this this link or apply the above code into this LINK
.sizeRange([minArea, maxArea])
example: .sizeRange([100, 1000])

NVD3 Update Chart with d3.json

I've made a chart using NVD3, which populates 3 stacked bars. On clicking a bar, I want an request to be fired, and for the chart to be populated with new data altogether. Unfortunately, the chart does not REPLACE the data I previously had, but APPENDS a new bar to my chart, forming a chart with 4 stacked bars, when I only want 1 bar. How can I remove the old data, while bringing in new data?
Thanks!
var chartData = setChartData(data1);
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarChart()
.barColor(d3.scale.category20().range())
.margin({bottom: 100})
;
chart.multibar
.hideable(true);
chart.reduceXTicks(false).staggerLabels(false);
chart.xAxis
.axisLabel("Current Index")
.showMaxMin(true)
.tickFormat(function(d,i){ return allBillsForChart[d][0][2]});
chart.yAxis
.tickFormat(d3.format(',.1f'));
d3.select('#chart1 svg')
.datum(chartData)
.call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
},function(){
d3.selectAll(".nv-bar").on('click', function(d, i){
d3.json("fakeURLToFetchData", function(error, data){
arr = [];
arr.push(data)
handledData = setChartData(arr)
d3.select('#chart1 svg').datum(handledData).call(chart);
nv.utils.windowResize(chart.update);
return chart
})
});
});

Categories