Archive for the JavaScript

JavaScript Graph Visualization Libraries Updated — Check Out AnyChart 8.7.0 with New Awesome Features! August 8th, 2019 by AnyChart Team

JavaScript Graph Visualization Libraries Updated - Check Out AnyChart 8.7.0 with New Awesome JS Charting Features!AnyChart 8.7.0 is out with a lot of new awesome data visualization features. Look what we’ve added to our JavaScript graph libraries in this major update.

New Features in AnyChart 8.7.0

Client-side export of JS charts delivered in AnyChart 8.7.0
Client-Side Export

We’ve added the client-side export feature to all our JavaScript charting libraries — AnyChart, AnyStock, AnyGantt, and AnyMap. This will allow you to have your data visualizations saved as images — SVG, PNG, and JPG — and PDF documents without a roundtrip to the server, by leveraging the built-in browser features for a seamless JS chart export, fast and secure.

UI controls to swap and maximize JS stock charts delivered in AnyStock 8.7.0 by AnyChart
Stock UI Controls: Swap and Maximize

The AnyStock JS library is now provided with three new UI controls in the form of buttons — “Up,” “Down,” and “Maximize.” The buttons make it easy for the viewer, market data analyst or trader, to swap the adjoining stock charts by moving one of them up or down, or maximize a certain visualization so it fills the entire page.

JS stock chart plot splitter delivered in AnyStock 8.7.0 by AnyChart
Stock Plot Splitter

A splitter is now automatically created between stock chart plots. It enables the viewer to change the relative height of the charts by dragging them up or down. This feature can facilitate data analysis when multiple stock or financial charts are drawn on the same page one above the other, allowing the viewer to make a (currently) more important visualization bigger than the others.

Infinite range annotations in JS stock charts delivered in AnyStock 8.7.0 by AnyChart
Infinite Range Annotations

In release 8.7.0, we’ve also delivered two new annotations to the AnyStock JavaScript graph library. These are infinite ranges — horizontal and vertical. So now they can be drawn on stock and financial charts powered by AnyStock using a ready-to-use UI, allowing you to avoid coding them as range axis markers, and therefore to save you a lot of time and effort. In our gallery, you’ll find two examples of how these annotations can look — horizontal range demo and vertical range demo.

New technical indicators for technical analysis delivered in AnyStock 8.7.0 by AnyChart including ENV, IKH, PPO, RCI, and PSY
New Technical Indicators

Five new out-of-the-box indicators for technical analysis are now available in stock charts: Envelope (ENV), Ichimoku Cloud (IKH), Price Oscillator (PPO), Rank Correlation Index (RCI), and Psychological Line (PSY). You’ll find stock chart examples showcasing these and other technical indicators in a special section of our gallery.

Milestone preview on parent task bars in JS Gantt charts delivered in AnyGantt 8.7.0 by AnyChart
Milestone Preview on Parent Task Bar

Milestone preview on the parent task bar is now available in the AnyGantt library. This new feature will allow the viewer of a Gantt chart to quickly understand what milestones such a task has and then expand it to learn the details if needed. Check out an example of a Gantt chart with milestone preview in our gallery.

Custom markers for milestones in JS Gantt charts delivered in AnyGantt 8.7.0 by AnyChart
Custom Marker for Milestone

In release 8.7.0, we’ve also added an option to customize milestone markers on Gantt charts by type and color. So now you can easily differentiate between the milestones of non-identical nature within the same project by depicting them in different ways. Look at a Gantt chart example with custom markers in our gallery.

Custom basic year in JS Gantt charts delivered in AnyGantt 8.7.0 by AnyChart
Custom Basic Year

Previously, our Gantt charts only supported the calendar year as the basic year period. Now, it is possible to define a custom one. For example, you can go ahead and set a fiscal (financial) year, or an academic year, or any other year depending on what point of reference you actually need in this regard; quarters will be formed accordingly. Here’s a fiscal year demo.

Polygonal selection in JS maps delivered in AnyMap 8.7.0 by AnyChart
Polygonal Selection in Maps

We’ve made it possible to select points on JS map charts powered by the AnyMap library by drawing a polygon. In addition to the rectangular marquee, such a complex, polygonal selection can now be easily configured using our API and is also available to the end user from the context menu. Give it a try on a dedicated selection type demo in our gallery.

More JavaScript Graph Visualization Improvements in Version 8.7.0

In fact, release 8.7.0 has delivered even more improvements as well as bug fixes.

Check out the version histories of our products for more information:

The next major update of our JavaScript graph visualization libraries will bring multiple other improvements. In the meantime, feel free to send us new feature requests along with any other suggestions — just get in touch with our Support Team, and we’d love to hear from you exactly what you want to get.

Enjoy AnyChart JS Charts 8.7.0!


Creating Treemap Chart Using JavaScript August 1st, 2019 by Douglas "Bugggster" Baxter

Creating Treemap Chart Using JavaScript, a tutorial for web developers and data enthusiastsTreemap is a popular chart type for hierarchical data visualization. I’ll show you how to create a cool interactive treemap chart using JavaScript in four simple steps right now. Join me on this quick tutorial for front-end web developers and data viz enthusiasts to understand the core principles of the process. Basically, I am sure everyone at least a little familiar with coding in HTML5 will love the presented, easy way to make beautiful JavaScript treemap charts that are perfectly suitable to be embedded into any web page or app.

In honor of World Wide Web Day celebrated today, August 1, I will develop a JS treemap visualizing data about the number of worldwide internet users as of January 2019, by region, available on Statista.

Read more »


Create Cool Interactive Sankey Diagram Using JavaScript — Tutorial June 13th, 2019 by Alfrick Opidi

Create Cool Interactive Sankey Diagram Using JavaScript — TutorialSankey diagrams are becoming more and more popular in data visualization tasks. So, it’s essential for front-end web developers to know how to create charts of this type. Actually, it is quite a simple and straightforward process, especially if you are using one of the good JavaScript charting libraries.

In my tutorial, I’ll show you how to create beautiful, intuitive, interactive JS (HTML5) Sankey diagrams with no fuss.

Read the tutorial »


JS Charts Library AnyChart Adds Timeline Chart and Network Graph in Version 8.6.0 May 15th, 2019 by AnyChart Team

AnyChart adds the Timeline Chart and Network Graph chart types to its JS charts library in version 8.6.0AnyChart 8.6.0 is out! Check out what new awesome interactive data visualization features we’ve added to our award-winning JS charts library!

First and foremost, two new chart types are now available out of the box — greet the main protagonists of the 8.6.0 release:

JavaScript Timeline Chart added to AnyChart JS Charts library
Timeline Chart in AnyChart JS Charts Library

Timeline Chart is used to display a set of events in chronological order. It is typically a graphic design showing a long bar labeled with dates paralleling it, and usually contemporaneous events. Look at interactive Timeline Chart examples in our gallery. Read AnyChart Docs to learn how to create a JS Timeline Chart using our library.

JavaScript Network Diagram added to AnyChart JS Charts library
Network Graph in AnyChart JS Charts Library

Network Graph, also Graph Chart, is a mathematical structure (graph) designed to show relationships between data points. This chart type visualizes how entities are interconnected with each other. Entities are displayed as nodes (points). Relationship between them (edges) are depicted as lines. Check out interactive Network Graph examples in our gallery. Read AnyChart docs to learn how to create a JS Network Graph using our library.

Then, the new major release AnyChart JS Charts 8.6.0 is bringing multiple other improvements, not to mention bug fixes.

Take a look into what’s new, by product:

Let us know if you have requests for new JS chart types or data visualization features. Contact our Support Team with all your tips and suggestions, and we’ll be happy to consider quickly delivering what you need. As always, you know.

Enjoy AnyChart 8.6.0!


How to Create JavaScript Word Cloud Chart — Tutorial for Web Developers April 30th, 2019 by Irina Maximova

Tutorial on how to create a JavaScript word cloud chart and customize it, for front-end web developers
Wondering how to make a beautiful interactive Word Cloud using JS? Then you’re in the right place! In this data visualization tutorial, I’ll guide you through the entire development process, demonstrating it’s easier to create a JavaScript word cloud chart for an HTML5 app or web page than you might think!

Also known as tag clouds, word clouds represent a popular visual technique designed to reveal how often tags (or basically, any words) are mentioned in a given text body. Essentially, the word cloud chart type leverages diverse colors and sizes to display at a glance different levels of relative prominence.

Now that we’ve got an idea of what a word cloud is, let’s get down to learning how to quickly code one using JavaScript!

Read the JS charting tutorial »


How to Code JS Column Chart with Multi-Level X-Axis — Challenge AnyChart! April 17th, 2019 by Irina Maximova

How to code an interactive JS column chart with a wulti-level X-axis using the AnyChart JavaScript charting library, in the Challenge AnyChart! blog featureWe continue to update the Challenge AnyChart! section of our blog with new data visualization tutorials. They nicely demonstrate how powerful our JavaScript charting library is, which our Support Team is always eager to prove to everyone. In one of the first challenges, we already told you how to create a JS chart with nested axes. Since our customers keep showing interest in such forms of data presentation, now we’ll show you how to build another interesting chart with a different appearance but quite similar code — an interactive JS column chart with a multi-level X-axis.

Read more »


How to Create Stunning Interactive Bar Charts Using JavaScript — Tutorial April 3rd, 2019 by Alfrick Opidi

Tutorial on creating stunning interactive bar charts using JavaScriptWeb developer Alfrick Opidi shows how to create beautiful interactive bar charts using JavaScript (HTML5), taking the AnyChart JS charting library as an example along the tutorial.

Read the tutorial »


Stacked Column Charts with Images — Challenge AnyChart! January 23rd, 2019 by Irina Maximova

Images in Stacked Column Charts Series explained in Challenge AnyChart!We are ready to share a new advanced JS (HTML5) data visualization tutorial. Tasks we get from our customers are always interesting, and the Challenge AnyChart! series on our blog proved to be a great way to show you some of the most compelling ones and explain how to solve them, demonstrating the power and flexibility of our JavaScript charts library. Today’s challenge is about adding images to stacked column charts using AnyChart.

Read more »


Custom WiFi Polar Chart in JavaScript — Challenge AnyChart! January 2nd, 2019 by Irina Maximova

Custom WiFi Polar Chart in JavaScript — Challenge AnyChart!Solving challenges is a thing that the AnyChart team can’t live without, and we willingly continue to share some of the most interesting customer cases within the framework of Challenge AnyChart! on our blog. This feature gives us a great chance to help customers with similar tasks and demonstrate the unlimited data visualization capabilities of our JavaScript charting library time after time. The challenge being solved along today’s tutorial is about building a beautiful WiFi polar chart — a custom interactive JS (HTML5) polar chart that displays devices depending on the WiFi signal strength.

Read more »


JavaScript Data Visualization Libraries Updated with New Features — Meet AnyChart JS Charts 8.5.0 December 25th, 2018 by AnyChart Team

JavaScript Data Visualization Libraries Updated with New Features — Meet AnyChart JS Charts 8.5.0On this wonderful day, we are excited to announce a new major update for our JavaScript data visualization libraries: AnyChart 8.5.0 is released!

The new version brings a lot of advanced features and improvements that make our JS (HTML5) charting solutions even more powerful. 3D Surface Plot, Word Tree, and much more — spare a minute to look through the highlights of the 8.5.0 release of AnyChart, AnyStock, AnyGantt, and AnyMap.

Read more »