Today, sharing knowledge graph libraries under the JS with you.
Chart Gallery 1
With the data collection and use continues to grow exponentially, demand visualization of this data is becoming increasingly important. Developers seek to integrate millions of database records for the beautiful charts and dashboards, so that humans can quickly and intuitively explained.
Data visualization technology has been constantly improved over the past decade, many of the advanced charting library now available to consumers. In the early 2000s, the graph generation mainly composed of server-side image bitmap. Such as Flash and Silverlight like plug-in provides a more interactive experience chart, but the download speed, battery life and system resources has suffered a heavy blow.
With the proliferation of mobile and tablet usage, the main platform is no longer supported plug-ins, developers had to turn to the open client technology can run anywhere. At the same time, the emergence of ultra-high resolution screen and more common touch gestures appear to push scaled resolution independent vector table to the forefront.
JavaScript and to enter the SVG (Scalable Vector Graphics) based data visualization current era. Charts can now be run on all browsers, without the need for special plug-in support for interactivity and animation, you can clearly show that even at the highest resolution of the device. Recalling more than 50 visualization library, the nine products stand out:
D3.js
d3.js is a very powerful JavaScript graphics library. It allows you to bind any data to the Document Object Model (DOM), then the data-driven transformation to a document.
D3 far beyond the typical library system, comprising a number of other smaller technology modules such as a shaft, color, hierarchy, contour, a jog, polygonal and the like. All of this makes the learning curve is steep.
Trying to create a simple chart can be complex. We need a clear definition of all the elements and other items, including a chart, including the shaft. Many examples show how to use CSS to style chart elements. Is not based on the function of the chart will be automatically applied. If you want to get into the weeds and using creativity to full control over every element, that is the best choice. Work around the clock to meet the requirements of data visualization project from scratch may not be the best choice.
It can be used as building blocks D3.js graph library. D3 developers have used it to make use of diagramming solutions (such as NVD3) easier to use.
D3.js is open source, free to use.
JSCharting
JSCharting chart library supports a large number of chart types, including maps, Gantt charts, stock and other libraries frequently need to use alone. It contains all the built-in map of the world countries, as well as SVG icon library. A separate set of mini-charts can be presented in any div element on any chart labels or page. Also includes UI controls (UiItems), can provide a richer interactive charts. Real-time control or data visualization variables is very easy, and charts can be exported as SVG, PNG, PDF and JPG format.
Gallery chart types and functions into the sample. Chart Styles polished, can generate some simple appearance of the charts. The overall visual effect provides clean, professional cartographic experience.
Sample usage configuration object containing from custom chart. Create and control chart types of settings are very easy to use. Just a few properties you can specify a more complex set of chart types, and has a strong and dynamic JSCharting default, which means that it will attempt to automatically select the optimal settings for the program.
The document includes many tutorials and a complete API property description. Many of the properties includes sample usage, and examples link.
JSCharting for personal and non-commercial use free of charge, and also offers commercial licensing options, including all chart types and products, but need to pay. ,
Highcharts
Highcharts chart is a popular JavaScript library used by many of the largest companies in the world. Generate charts using SVG and fall back to VML, backward compatibility all the features of IE6 / IE8's. Presentation charts showing a rich feature set, but the appearance is not impressive. Many conventional documentation related topics including tutorials, API documentation and very detailed.
Chart using the configuration options to create a chart, and the API is easy to use.
Highcharts is free for non-commercial and personal use. Other uses require a commercial license, and inventory, maps and Gantt charts are licensed.
amCharts
amCharts recently released their version 4, which adds a powerful SVG animation engine, allows you to create movie-like scenes.
Presentation charts looks good. Most demo provides a large palette and a slider UI to chart real-time adjustment variable. Documentation includes many tutorials and a complete API property description.
Create a chart and the feeling of configuration-based approach is slightly different, but the use of the API more declarative. It takes more code to configure the chart, but provides better code to complete the experience.
amCharts provide a free license with a brand charts, and provide a paid license for other uses.
Charts Google
Google Charts powerful and easy to use.
Sample table looks very clean, and very easy to see. Gallery and extended gallery displays a number of chart types, but according to Burger menu displays more types (eg calendar), these types are not displayed in the gallery lists.
Each chart type has a dedicated real-time tutorials and examples. These tutorials include code-related functions and API inventory. This is the beginning of the new chart library enjoyable experience.
Configuration options to customize the chart objects. Filling a DataTable class data set, such a graph can be used by all. Each chart type has a unique list of options specific to the type of tutorial. Attribute names are standardized, many options are available for all types.
Google Charts is free, but there is a warning. It is a Web service that can not be hosted locally. In the past, Google has eliminated the API, so if you use mission-critical, you may want to choose other options.
ZingChart
ZingChart provides many chart types, and integrated with angular, react, and other frameworks. It has a robust feature set and many customization options.
Presentation charts display a series of style themes, some of which look better than the other, but can be selected style. Presentation does not demonstrate all the available chart types.
Documentation includes all available types of course, a large number of features and a full list of API.
ZingChart use the configuration options to customize the chart. Examples include a number of attributes is provided, such as font style. These may hinder the understanding of what the chart given need.
ZingChart free to use with the brand. Paid licenses can be used for non-brand use.
FusionCharts
FusionCharts chart as a flash-based plug-ins already exist for many years. It is a robust graph visualization library. It supports a variety of data formats, including XML, JSON and JavaScript, can work in modern browsers, and is backward compatible with IE6. Many frameworks also supports JavaScript and server-side programming language.
Chart library contains a large number of examples, which have a clear visual appearance.
Document API includes examples of good and description of each type of chart. By task configuration properties and characteristics chart packets.
Chart is created based configuration options, and relatively easy to use. The in-depth research API, property list can be very long. All are shallow configuration properties, such as {chartLeftMargin, showAlternateHGridColor}. This seems to be to try an improved code completion.
FusionCharts is free for personal use charts brand. Paid licenses can be used for non-commercial use and brand.
KOOLCHART
KoolChart is based on the html5 JavaScript charting library. Also provides a map and grid products.
Their new version v5 includes a more interactive set of features and style updates. The visual effect is clean and modern. canvas using a grid-based performance at the expense of the cost, provides better performance.
These examples use a string of XML to the application chart options, which seems practical than other methods. These options look like HTML5, but through JavaScript string settings.
The API documentation details the sample chart of each attribute, also available in PDF manual of 173.
There are a two-month trial period for evaluation. At the end of the trial period, you require a license.
Chart.js
chart.js is an open source JavaScript library that supports eight chart types. It is only a small 60kb js library. Types include line graphs, bar charts, area charts, radar charts, pie charts, bubble, scatter and mix FIG. Also supports time series. It uses the canvas element for rendering, and in response to keep the particle size at the zoom window is resized. It is backwards compatible with IE9. polyfill also be used IE7.
Visual effect is quite modern example, includes an initial first animation drawing. It smoothly animate or when adding a sequence of data points in real time. You can after calling update () function redraw the chart, modify the chart options.
Sample source code is not visible, but can be found on the library website at GitHub repo in. Configuration options for creating and modifying charts. Options API is clean and intuitive.
This document is very comprehensive, including tutorials about properties API and code fragments.
Chart.js is an open source library that is free for personal and commercial purposes, which is a plus point. For more advanced dashboard demand, a limited number of types can be a problem.
Conclusion
In the past decade, the ecosystem JavaScript charting library already has made great progress. Today, a large number of chart products to meet very diverse requirements, serving a wide range of projects through hundreds of chart types. Most libraries offer free trial version or trademark, so you can use your own data, load and complexity of the project to evaluate the effectiveness of the chart.
Most charts library can easily handle simple selection of data sets and static visualization. However, when the visual dynamic real-world data, charts may not always be a smooth process. You may need to do more work to adjust and arrange the elements so that the chart looks right, and with the new dynamic data visualization, such manual adjustment may be interrupted.
In order to select the best to meet the unique needs of your JS diagramming solutions, I suggest your own data libraries for the two tests listed above, in order to ensure that best fits your current and future projects.
JS libraries on the chart, you learn how much? Comments are welcome in the comments area!
