Creating Charting Directives Using AngularJS and D3.js

Core points

• D3.js is a JavaScript library that can be used in conjunction with AngularJS to create interactive real-time charts with SVG (scalable vector graphics). This combination allows developers to create rich web applications with dynamic data visualization.
• AngularJS and D3.js can be set in HTML pages to create chart directives. This includes creating AngularJS controllers and instructions and using the controller to save the data to be drawn in the chart. Then, you can use this directive to draw a line chart using D3.js.
• Clicks can be updated in real time to reflect changes in underlying data. This can be done by using a collection observer in the instruction to monitor changes in the collection data and then redrawing the chart when the change is detected.
• D3.js can be used with other versions of Angular and other JavaScript frameworks. It provides a powerful data binding system that can be used to process data updates, while AngularJS provides a structured method for building applications and handling data updates.

D3 is a JavaScript library that can be used to create interactive charts using HTML5 technology Scalable Vector Graphics (SVG). Creating a chart directly with SVG can be painful because you need to remember the shapes supported by SVG and call the API multiple times to make the chart dynamic. D3 eliminates most of the pain and provides a simple interface to build SVG-based charts. Jay Raj has published two good SitePoint articles on using D3. If you are not familiar with D3, you can check it out.

Most of you may not need to formally introduce AngularJS. AngularJS is a client-side JavaScript framework for building rich web applications. One of the main advantages of AngularJS is its support for instructions. Directives provide an excellent way to define our own HTML attributes and elements. It also helps to separate the tags and code from each other.

AngularJS is also very powerful in data binding. This feature saves a lot of time and effort required to update the UI based on the data in the model. In the modern online world, customers ask developers to build real-time responsive websites. This means that customers want to always see the latest data on the screen. Once someone has modified the data on the backend, the data UI must be updated. If we do not have support for data binding, performing such real-time updates will be very difficult and inefficient.

In this article, we will learn how to build real-time AngularJS directives that wrap D3 charts.

Environmental settings

First, we need to set up the environment. We need to include AngularJS and D3 in the HTML page. Since we only build one chart directive, we need to create an AngularJS controller and one directive. In the controller, we need a collection that holds the data to be plotted in the chart. The following code snippet shows the initial controller and instructions. We will add more code to these components later.

var app = angular.module("chartApp", []);

app.controller("SalesController", ["$scope", function($scope) {
  $scope.salesData = [
    {hour: 1,sales: 54},
    {hour: 2,sales: 66},
    {hour: 3,sales: 77},
    {hour: 4,sales: 70},
    {hour: 5,sales: 60},
    {hour: 6,sales: 63},
    {hour: 7,sales: 55},
    {hour: 8,sales: 47},
    {hour: 9,sales: 55},
    {hour: 10,sales: 30}
  ];
}]);

app.directive("linearChart", function($window) {
  return{
    restrict: "EA",
    template: "<svg height='200' width='850'></svg>",
    link: function(scope, elem, attrs){
    }
  };
});

We will populate the link function in the above instructions to use the data stored in the controller and draw the line chart using D3. The template of the directive contains an svg element. We will apply D3's API to this element to draw the chart. The following code snippet shows an example usage of a directive:

<div linear-chart chart-data="salesData"></div>

Now, let's collect the basic data we need to draw a chart. It includes the data to be drawn, JavaScript objects of SVG elements, and other static data.

var salesDataToPlot=scope[attrs.chartData];
var padding = 20;
var pathClass = "path";
var xScale, yScale, xAxisGen, yAxisGen, lineFun;

var d3 = $window.d3;
var rawSvg = elem.find("svg")[0];
var svg = d3.select(rawSvg);

After loading the d3 library, the d3 object will be available as a global variable. However, if we use it directly in the code block, it is difficult to test that code block. To make the directive testable, I use the object by $window.

Draw a simple line chart

Let's set the parameters required to draw the chart. The chart requires an x-axis, a y-axis, and a data field representing these axes. In this example, the x-axis represents the time of hours. We can take the first and last values ​​in the array. On the y-axis, the possible values ​​range from zero to the maximum of sales. The maximum sales can be found using d3.max(). The range of the axis varies according to the height and width of the svg element.

Using the above values, we need to have d3 draw the axis with the desired direction and number of scales. Finally, we need to define a function using d3.svg.line() to draw lines based on the scale we defined above. All the above components must be attached to the svg element in the directive template. We can apply styles and transformations to charts when attaching items. The following code sets the parameters and appends them to SVG:

function setChartParameters(){
  xScale = d3.scale.linear()
             .domain([salesDataToPlot[0].hour, salesDataToPlot[salesDataToPlot.length - 1].hour])
             .range([padding + 5, rawSvg.clientWidth - padding]);

              yScale = d3.scale.linear()
                .domain([0, d3.max(salesDataToPlot, function (d) {
                  return d.sales;
                })])
             .range([rawSvg.clientHeight - padding, 0]);

  xAxisGen = d3.svg.axis()
               .scale(xScale)
               .orient("bottom")
               .ticks(salesDataToPlot.length - 1);

  yAxisGen = d3.svg.axis()
               .scale(yScale)
               .orient("left")
               .ticks(5);

  lineFun = d3.svg.line()
              .x(function (d) {
                return xScale(d.hour);
              })
              .y(function (d) {
                return yScale(d.sales);
              })
              .interpolate("basis");
}

function drawLineChart() {

  setChartParameters();

  svg.append("svg:g")
     .attr("class", "x axis")
     .attr("transform", "translate(0,180)")
     .call(xAxisGen);

   svg.append("svg:g")
      .attr("class", "y axis")
      .attr("transform", "translate(20,0)")
      .call(yAxisGen);

   svg.append("svg:path")
      .attr({
        d: lineFun(salesDataToPlot),
        "stroke": "blue",
        "stroke-width": 2,
        "fill": "none",
        "class": pathClass
   });
}

drawLineChart();

Real-time update of charts

As mentioned earlier, with the capabilities of today’s networks, our users want to see data chart updates immediately when the underlying data changes. Changes can be pushed to the client using technologies such as WebSocket. The chart directive we just created should be able to respond to these changes and update the chart.

In order to push data through WebSocket, we need server components built using Socket.IO and Node.js, SignalR and .NET or other platforms. In this demo, I use AngularJS's $interval service to push ten random sales values ​​into the sales array with a one-second delay:

$interval(function() {
  var hour = $scope.salesData.length + 1;
  var sales = Math.round(Math.random() * 100);

  $scope.salesData.push({hour: hour, sales: sales});
}, 1000, 10);

In order to update the chart immediately after new data is pushed, we need to re-draw the chart using the updated data. A collection observer must be used in the directive to monitor changes to the collection data. When any changes are made to the collection, the observer is called. The chart is re-drawn in the observer.

scope.$watchCollection(exp, function(newVal, oldVal) {
  salesDataToPlot = newVal;
  redrawLineChart();
});

function redrawLineChart() {

  setChartParameters();
  svg.selectAll("g.y.axis").call(yAxisGen);
  svg.selectAll("g.x.axis").call(xAxisGen);

  svg.selectAll("." + pathClass)
     .attr({
       d: lineFun(salesDataToPlot)
     });
}

Conclusion

AngularJS and D3 are very useful libraries for building rich business applications on the web. We discussed how to use them together to create a simple chart. You can extend this knowledge to create charts for your application.

(Due to space limitations, the FAQs part is omitted here. The content of the FAQs part is consistent with the original text and does not require rewriting.)

The above is the detailed content of Creating Charting Directives Using AngularJS and D3.js. For more information, please follow other related articles on the PHP Chinese website!