#D3 chart responsive resize code
Our factory class builds a chart with a bar series and a line series (see code for details, familiarity with D3 assumed).Īngular.module(‘ngD3Example.widgets’).factory(‘barLineChartFactory’, barLineChartFactory) įunction barLineChartFactory(chartUtils) In order to expose this reusable chart component in the Angular application, we use Angular Factories. Later on it helps to extract the module and reuse in Ionic app. Let’s create a module ‘widgets’ to which we will add our chart definition factories. The chart definition component is built on the concept of reusable chart patterns as defined in this link. Here are important patterns used to build this example. The complete example can be found on Github: In this chart, the bar-series is plotted along the left axis and the line series on the right axis. Let us start with a simple multi-series chart.
In part-2, we will enhance the reusable component to support building responsive charts for hybrid mobile applications (specifically for ionic framework).
#D3 chart responsive resize how to
In part-1, we will see how to build such a reusable component (via factory and directive in case of AngularJS framework), what allows us to build simple charts easily.
My own opinion is that once we take the time to understand D3 philosophy and its fundamentals, it is not very hard to build reusable components that make simple charts simple/configurable and complex graphs possible without a lot of headache. And, that is what libraries such as NVD3, C3 aim to accomplish. Wouldn’t it be nice to build a facade on top of D3.js that allows us to build simple charts using its configuration? Sure, yes. And yes, you guessed it, with a slightly higher learning curve and complexity to manage.
Having had to build a few of these professionally in last few years, I found that D3.js has the best tools when it comes to greater control. We need the library to allow us to get under the hood and build a graph from the ground up. Occasionally, we run into a charting/graphing need that is not easily accomplished with such configuration driven approach. Most of these libraries make it very easy to build charts for most common needs, by specifying axis configuration, multi-dimensional data and little else. When it comes to charting libraries in Javascript, some of the popular ones are HighCharts, amCharts, Chart.js and D3.js.
0 kommentar(er)
