I am using nvd3 line graph in angular js and initially i have 5 ticks . so after adding 6th tick value in chart dynamically on textbox enter event , thegraph resales .everything shows fina but the tooltip shows at its previous value .
adding below line
scope.svg.datum(scope.data).transition().duration(500).call(scope.chart) in angular-nvd3.js
works for me but how do i acheve the same functionality in my js file.
i tried adding below line after i update the chart data
d3.select('#bar1 svg')
.datum(scope.chartData).transition().duration(500)
.call(chart);
but how do i get chart object in my js file ?
but this does not work . below is my chart configuration
var updateChartAttributes = function () {
scope.options = {
chart: {
type: scope.directiveValue.declaredVariables.chartType,
margin: {
top: 30,
right: 60,
bottom: 35,
left: 60
}, showControls: false, duration: 5,
//yDomain: (new Function("return [" + scope.directiveValue.declaredVariables.yAxisRangeMinimum + "," + scope.directiveValue.declaredVariables.yAxisRangeMaximum + "];")()),
x: function (d) { return d[0]; },
y: function (d) { return d[1]; },
useInteractiveGuideline: true,
dispatch: {
//stateChange: function (e) { console.log("stateChange"); },
//changeState: function (e) { console.log("changeState"); },
//tooltipShow: function (e) { console.log("tooltipShow"); },
//tooltipHide: function (e) { console.log("tooltipHide"); }
},
xAxis: {
axisLabel: scope.directiveValue.declaredVariables.xAxisTitle,
//rotateLabels: -70,
//tickPadding: -3, // - rotation needs this to shift back into place
ticks: 5,
tickFormat: function (d) {
return d3.format('f')(d);
}, axisLabelDistance: -10
},
yAxis: {
axisLabel: scope.directiveValue.declaredVariables.yAxisTitle,
ticks: 5,
tickFormat: function (d) {
return d3.format('f')(d);
}, axisLabelDistance: -10
},
};
Hello ,
I am using nvd3 line graph in angular js and initially i have 5 ticks . so after adding 6th tick value in chart dynamically on textbox enter event , thegraph resales .everything shows fina but the tooltip shows at its previous value .
adding below line scope.svg.datum(scope.data).transition().duration(500).call(scope.chart) in angular-nvd3.js works for me but how do i acheve the same functionality in my js file.
i tried adding below line after i update the chart data
d3.select('#bar1 svg') .datum(scope.chartData).transition().duration(500) .call(chart); but how do i get chart object in my js file ? but this does not work . below is my chart configuration
var updateChartAttributes = function () { scope.options = { chart: { type: scope.directiveValue.declaredVariables.chartType, margin: { top: 30, right: 60, bottom: 35, left: 60 }, showControls: false, duration: 5, //yDomain: (new Function("return [" + scope.directiveValue.declaredVariables.yAxisRangeMinimum + "," + scope.directiveValue.declaredVariables.yAxisRangeMaximum + "];")()), x: function (d) { return d[0]; }, y: function (d) { return d[1]; }, useInteractiveGuideline: true, dispatch: { //stateChange: function (e) { console.log("stateChange"); }, //changeState: function (e) { console.log("changeState"); }, //tooltipShow: function (e) { console.log("tooltipShow"); }, //tooltipHide: function (e) { console.log("tooltipHide"); } }, xAxis: { axisLabel: scope.directiveValue.declaredVariables.xAxisTitle, //rotateLabels: -70, //tickPadding: -3, // - rotation needs this to shift back into place ticks: 5, tickFormat: function (d) { return d3.format('f')(d); }, axisLabelDistance: -10 }, yAxis: { axisLabel: scope.directiveValue.declaredVariables.yAxisTitle, ticks: 5, tickFormat: function (d) { return d3.format('f')(d); }, axisLabelDistance: -10 },
};