We Keep Coding

NVD3 : nv.d3.js:14314 Uncaught TypeError: data.map is not a function

I am new java script and D3, I am building some sample reports using D3, but constantly facing "Uncaught TypeError: data.map is not a function" in stackAreaChart display. I tried all my best to get rid of this error but no joy.
Exception:
nv.d3.js:14314 Uncaught TypeError: data.map is not a function
at nv.d3.js:14314
at nv.utils.state._set (nv.d3.js:1248)
at nv.utils.state.update (nv.d3.js:1269)
at SVGSVGElement.<anonymous> (nv.d3.js:14353)
at d3.min.js:3
at Y (d3.min.js:1)
at Array.Co.each (d3.min.js:3)
at Array.chart (nv.d3.js:14339)
at Array.Co.call (d3.min.js:3)
at Object.generate (main.js:250)
Sample data I am sending for stackAreaChart:
[{"key":"RT.Gjoa_SPS.E","values":[[1499955690000,-0.019999314282704246],[1499955
750000,0.05166495085946679],[1499955810000,-0.056664803271206064],[1499955870000
,0.08833037627180006]]},{"key":"RT.Gjoa_SPS","values":[[1499955690000,23.4658844
70517647],[1499955750000,104.52984900503316],[1499955810000,-631.4456184793839],
[1499955870000,1683.1438952034932]]},{"key":"RT.Gjoa_SPS.B","values":[[149995587
0000,0.002222081668744225]]},{"key":"RT.Gjoa_SPS.D","values":[[1499955690000,0],
[1499955750000,-0.003333234941159513],[1499955810000,0.003333234941159513],[1499
955870000,0]]}]
Below is my complete main.js: please check if anything i am missing or need to be handled in order to get rid of this error.
main.js
var socket = io.connect('http://HOST_IP:3000');
/////////////////////////////////////////////////////////////////////////////////////////////////////
// // // TimeSeries Chart
// // /////////////////////////////////////////////////////////////////////////////////////////////////////
var timeSeriesChart;
var timeSeriesChartData = [];
//function drawTimeSeriesChart()
//{
nv.addGraph(function() {
timeSeriesChart = nv.models.lineChart().duration(750).useInteractiveGuideline(true).margin({right:40});
timeSeriesChart.xAxis.axisLabel("Timestamp").tickFormat(function(d){ return d3.time.format("%Y-%m-%d %H:%M:%S")(new Date(d));});
timeSeriesChart.yAxis.axisLabel("Stats").tickFormat(d3.format(',.2f'));
d3.select('#FMCChart1').append('svg').datum(timeSeriesChartData).call(timeSeriesChart);
nv.utils.windowResize(timeSeriesChart.update());
return timeSeriesChart;
});
//}
socket.on("timeSeriesChartData",function(timeSeriesData){
console.log("chart updated");
d3.select('#FMCChart1 svg')
.datum(timeSeriesData)
.call(timeSeriesChart);
});
/////////////////////////////////////////////////////////////////////////////////////////////////////
// // // Discrete Bar Chart
// // /////////////////////////////////////////////////////////////////////////////////////////////////////
var discreteChart;
var discreteChartData;
function drawDiscreteChart()
{
nv.addGraph(function() {
discreteChart = nv.models.discreteBarChart()
.x(function(d) { return d.label}) //Specify the data accessors.
.y(function(d) { return +d.value})
.staggerLabels(true) //Too many bars and not enough room? Try staggering labels.
//.tooltips(false) //Don't show tooltips
.showValues(true) //...instead, show the bar value right on top of each bar.
//.transitionDuration(350)
;
d3.select('#FMCChart2 svg')
.datum(discreteChartData)
.call(discreteChart);
nv.utils.windowResize(discreteChart.update);
return discreteChart;
});
}
socket.on("discreteChartData",function(disChartData){
discreteChartData=disChartData;
console.log("Discrete Chart ", disChartData[0].values[0].value);
//discreteChart.update();
drawDiscreteChart();
});
// // ///////////////////////////////////////////////////////////////////////////////////////////////
//Pie Chart
// // ///////////////////////////////////////////////////////////////////////////////////////////////
var pieChart;
var pieChartData;
function drawPieChart() {
//Donut chart example
nv.addGraph(function() {
pieChart = 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("#FMCChart3 svg")
.datum(pieChartData)
//.transition().duration(350)
.call(pieChart); /// ERROR OCCURRED ON THIS LINE
return pieChart;
});
}
socket.on("pieChartData",function(pChartData){
pieChartData=pChartData;
console.log("Pie Chart: ",pChartData[0].label,pChartData[0].value);
drawPieChart();
});
///////////////////////////////////////////////////////////////////////////////////////////////
//Donut Chart
///////////////////////////////////////////////////////////////////////////////////////////////
var donutChart;
var donutChartData;
function drawDonutChart() {
//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("#FMCChart4 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);
drawDonutChart();
});
///////////////////////////////////////////////////////////////////////////////////////////////
//Alert Chart
///////////////////////////////////////////////////////////////////////////////////////////////
socket.on('fetched-callRestAPI',function(msg){
// console.log("warning : " + msg);
console.log("Rest Call --- >> ",msg);
var data = JSON.parse(msg);
if(data.content == "true") {
$('#flag').toggleClass("card-panel green");
}
else{
$('#flag').toggleClass("card-panel red");
}
});
///////////////////////////////////////////////////////////////////////////////////////////////
//Stacked Area Chart
///////////////////////////////////////////////////////////////////////////////////////////////
var stackedAreaChart;
var stackedAreaChartData;
function drawStackedAreaChart() {
//Donut chart example
nv.addGraph(function() {
stackedAreaChart = nv.models.stackedAreaChart()
.margin({right: 100})
.x(function(d) { return d[0] }) //We can modify the data accessor functions...
.y(function(d) { return d[1] }) //...in case your data is formatted differently.
.useInteractiveGuideline(true) //Tooltips which show all data points. Very nice!
.rightAlignYAxis(true) //Let's move the y-axis to the right side.
//.transitionDuration(500)
.showControls(true) //Allow user to choose 'Stacked', 'Stream', 'Expanded' mode.
.clipEdge(true); //Configure how big you want the donut hole size to be.
//Format x-axis labels with custom function.
stackedAreaChart.xAxis
.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
});
stackedAreaChart.yAxis
.tickFormat(d3.format(',.2f'));
d3.select("#FMCChart5 svg")
.datum(stackedAreaChartData)
//.transition().duration(350)
.call(stackedAreaChart); /// ERROR OCCURRED ON THIS LINE
return stackedAreaChart;
});
}
socket.on("openTSDBRestAPIData",function(openTSDBData){
stackedAreaChartData=openTSDBData;
console.log("stackedAreaChartData: ",openTSDBData);
drawStackedAreaChart();
});

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.

Pie chart animation when data changes in plottable.js

I am trying to animate a pie chart when data changes. Below is a code snippet
var piePlot = new Plottable.Plots.Pie()
.addDataset(dataset)
.outerRadius(function() { return Math.floor(piePlot.width()/10) + 40 })
.innerRadius(function() { return Math.floor(piePlot.width()/10) })
.sectorValue(function(d) { return d.y; })
.attr("fill", function(d) { return d.x; }, colorScale)
.attr("opacity",0.8)
.animated(true)
.animator(Plottable.Plots.Animator.MAIN,new Plottable.Animators.Easing().easingMode("quad").stepDuration(3500));
My confusion is the animation works great for charts such as line chart and area chart but doesnot work for other charts like rectangle chart, pie chart, scatter chart etc. Why is it so ? Do we need to make a custom animation function or what ? If yes can you please guide me...
Like I said this works perfectly
var linePlot = new Plottable.Plots.Line()
.addDataset(dataset)
.x(function(d) { return d.x; }, xScale)
.y(function(d) { return d.y; }, yScale)
.attr("stroke","#FA8116")
.animated(true)
.animator(Plottable.Plots.Animator.MAIN,new Plottable.Animators.Easing().easingMode("quad").stepDuration(3500));

Apparently it seems that there is no implementation of animation support for pie and rectangle chart.

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])