I'm currently working on developing a Single Page Application (SPA) where each page will display different sets of line charts. To achieve this, I have implemented a graph service.
dashboard.factory('graphService', function() {
function drawGraph(chart, element, data) {
nv.addGraph(function() {
chart = nv.models.lineChart()
.x(function(d) { return d.x })
.y(function(d) { return d.display ? d.display.y : d.y });
chart.lines.scatter.useVoronoi(false);
var xScale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d[0]; })]);
chart.xAxis
.axisLabel('Time')
.tickFormat(function(d) {
return d3.time.format("%m-%d %H:%M:%S")(new Date(d))
})
.scale(xScale)
.orient("bottom");
chart.yAxis
.axisLabel('Rate')
.domain([0, 20])
.tickFormat(d3.format(',r'));
d3.select(element)
.datum(data)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
}
return
{
drawGraph: drawGraph
};
});
However, I am facing the issue where the graph from the first page is sometimes appearing on the second page, or not showing up at all.
function refreshAcs() {
graphService.drawGraph(that.acsChart, '#chartAcs svg', dataService.getAcsData());
}
How can I ensure that each page displays the correct graph? Do I need to incorporate callbacks in order to retrieve and pass the chart every time, considering the function's generative nature?