I have a chart here with a line and area graph here.
Then I have a chart here with just the line rendered, and a button to add the area graph data.
In the 2nd plnkr example, when you click the Add 2nd Chart button, I add data2 into data and then call drawChart again. However the chart doesn't draw and I see a ton of Invalid value for <path> errors.
In the console, I see that my data array gets the 2 objects, so I'm not sure where it's going wrong. Thoughts?
var data = [{
"key": "Price",
"type": "line",
"yAxis": 2,
"values": [
[1443621600000, 71.89],
[1443619800000, 75.51],
[1443618000000, 12.49],
[1443616200000, 20.72],
[1443612600000, 70.39],
[1443610800000, 59.77],
]
}];
var data2 = [{
"key": "Quantity1",
"type": "area",
"yAxis": 1,
"values": [
[1136005200000, 1],
[1138683600000, 5],
[1141102800000, 10],
[1143781200000, 0],
[1146369600000, 1],
[1149048000000, 0],
]
}];
// Draw initial chart:
drawChart(data);
function drawChart(data, option) {
// Clear out old chart:
// d3.selectAll("svg > *").remove();
// data = [];
// chart = {};
console.log('data',data);
data = data.map(function(series) {
series.values = series.values.map(function(d) {
return {
x: d[0],
y: d[1]
}
});
return series;
});
console.log('data after map function:',data);
if (option) {
console.log('2nd data object added:');
data2 = data2.map(function(series) {
series.values = series.values.map(function(d) {
return {
x: d[0],
y: d[1]
}
});
return series;
});
data.push(data2[0]);
console.log('data',data);
}
nv.addGraph(function() {
chart = nv.models.multiChart()
.margin({
top: 20,
right: 40,
bottom: 50,
left: 40
})
.yDomain1([0, 10])
.yDomain2([0, 100]) // hard-coded :<
.interpolate("linear") // don't smooth out the lines
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%I:%M')(new Date(d));
});
chart.yAxis1.tickFormat(d3.format(',f'));
chart.yAxis2.tickFormat(function(d) {
return '$' + d3.format(',f')(d)
});
d3.select('svg#chart')
.datum(data)
.transition().duration(500).call(chart);
chart.tooltip.hidden(true);
chart.update();
d3.selection.prototype.moveToFront = function() {
return this.each(function() {
this.parentNode.appendChild(this);
});
};
d3.selection.prototype.moveToBack = function() {
return this.each(function() {
var firstChild = this.parentNode.firstChild;
if (firstChild) {
this.parentNode.insertBefore(this, firstChild);
}
});
};
// d3.select('svg#chart .lines1wrap').moveToFront();
d3.select('svg#chart .lines2wrap').moveToFront();
d3.select('svg#chart .nv-areaWrap').moveToBack();
d3.select('.lines2Wrap').node().parentNode.insertBefore(d3.select('.stack1Wrap').node(), d3.select('.lines2Wrap').node());
// Add top padding to xAxis timeline:
d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > g > g.tick > text').each(function(d,i) {
d3.select(this).attr('dy', '1.5em');
});
d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > .nv-axisMaxMin > text').each(function(d,i) {
d3.select(this).attr('dy', '1.5em');
});
nv.utils.windowResize(chart.update);
return chart;
});
}
function toggle2nd() {
vm.multiChart = !vm.multiChart;
if (vm.multiChart) {
console.log('clicked add 2nd button:',data)
drawChart(data, true);
}
}
Update, I moved the data.map function into the drawChart function as per Molda. However when I click the Add Chart button to redraw the chart with 2 graphs, for some reason both the x and y values for the values array for data become undefined. So now after clicking the button, the orange area graph gets charted, but I lose the line graph. Still get the Invalid value errors, but probably due to the undefined x and y.
http://plnkr.co/edit/2pFDDITuPc7XaL0eR4AA?p=preview
function drawChart(data, option) {so it should have worked. Did you try this in plnkr? – Leon Gabanxandymanually now, the map function just stops working when the 2nd data array is added. – Leon Gaban