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
},
};
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
},
};