Over a million developers have joined DZone.

NextCharts - an Open Source HTML5 library

DZone's Guide to

NextCharts - an Open Source HTML5 library

· Java Zone ·
Free Resource

Delivering modern software? Atomist automates your software delivery experience.

Many applications need nowadays to have charts representation. The options are not so many and depend on what you want to do. Someone may need just to draw a simple chart based on some changing data. Someone may need to draw different kind of charts with a lot of properties.

Looking for an Open Source HTML5 library will show a set of projects, some still active, some abandoned. If you do not have a lot of requirements you may happily discover that such projects can fulfill your needs. But if you need something bigger you have only two options: to buy a big chart library or to to create your own.

NextCharts started just because it was needed inside an open source project and there were many settings involved. NextCharts is just a small HTML5 & JQuery library which can allow to represent the most important charts: bars, horizontal bars, stacked bars, lines, areas, pies and simple line-bars combos.

NextCharts is used by NextReports Server , a reporting server which has dashboards functionality for watching and analyzing data.

Behind this library stands a simple json format which allows to set some specific properties.

A simple bar chart may be defined like:


The result will be the following:

If you want to read more about what can you do with NextCharts, go here . There are also some styles  you can use for bars (like normal, parallelepiped, dome) and for lines dots (like normal, soliddot, star and many others).  Creating combo charts with bars and lines is also possible and you can see how to do it here .

You can find the project on github.

Start automating your delivery right there on your own laptop, today! Get the open source Atomist Software Delivery Machine.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}