Archive for the Tips and Tricks

Gantt Chart Legend — JS Chart Tips

November 21st, 2024 by AnyChart Team

A JavaScript Gantt chart with a legend, displayed with its codeLegend is a vital element in many charts, helping viewers quickly understand what each visual component represents. However, it is not always a must-have for every chart type. For instance, Gantt charts often work perfectly fine without a legend, so it is not enabled in our JavaScript Gantt Chart by default. That said, creating one is straightforward. Right now, we will show you how to add a legend to a Gantt chart — join us as we continue our JS Chart Tips series, sharing quick solutions inspired by real customer queries!

Read more »

3 Ways to Set Height and Width of JavaScript Charts — JS Chart Tips

October 17th, 2024 by AnyChart Team

JavaScript chart with custom width and height, showing codeNavigating chart dimensions is key in crafting user-friendly visual presentations, especially when integrating multiple charts into an existing web page or app screen. In our JavaScript chart tutorials, charts are usually showcased as stretching across an entire web page. But it’s far from rocket science to make them smaller. In today’s JS Chart Tips, we explore three effective ways to resize your charts by adjusting their width and height.

Read more »

JavaScript Line Chart with Annotations — JS Chart Tips

October 10th, 2024 by AnyChart Team

JavaScript Line Chart with Annotations Shown with CodeAnnotations in charts, such as shapes or text markers, can greatly enhance data narratives by providing more context directly on the visual plane. Thus, it’s no surprise that the ability to add them is one of the most sought-after features of our JavaScript charting library. Although typically used in stock charts, annotations can be just as effective in standard graphics for highlighting specific data points or trends. In this edition of JS Chart Tips, you’ll learn how to add annotations to a basic line chart.

Read more »

Creating Timeline Chart of Roman History Using JavaScript

October 3rd, 2024 by AnyChart Team

A laptop with an interactive timeline chart of Roman history, from the Roman Empire to the Byzantine Empire, created using JavaScript in this tutorialEver caught yourself thinking about the Roman Empire more often than you’d like to admit? You’re not alone, and we’ve got just the thing for you! With the recent AnyChart JS Charts 8.13.0 release, we’ve enhanced our timeline chart for better support of historical data visualization. We’d love to showcase this improvement in action.

We’ve added a Roman History Timeline to our gallery of timeline chart examples, and we now invite you to discover how it was developed from scratch. In this in-depth JavaScript charting tutorial, we’ll cover everything from A to Z, meticulously guiding you through each step — from setting up the HTML environment to adding detailed data and customizing the visualization to make the chart both informative and engaging. The final result is an interactive timeline that you can proudly call your own Roman Empire.

So, whether you’re a history enthusiast caught up in the recent meme trend or a developer eager to expand your data visualization skills, follow along and learn how to create compelling historical timeline charts using JavaScript!

Read the JS charting tutorial »

Figures Without Any Charts — JS Chart Tips

September 23rd, 2024 by AnyChart Team

Figures Without Any ChartsExploring minimalistic data presentation, this entry of JS Chart Tips shifts focus from complex visualizations to effectively showing raw numerical data. While our JavaScript charting library is designed to enable compelling graphical data displays, sometimes simplicity provides clearer insights. Reflecting on a recent customer request handled by our Support Team, now we’ll delve into how to display figures in a straightforward and direct way without creating any charts, offering a streamlined alternative that may be suitable in specific contexts.

Read more »

JavaScript Pie Chart with Radial Scale — JS Chart Tips

September 9th, 2024 by AnyChart Team

JavaScript Pie Chart with Radial Scale Demonstrated in This Issue of JS Chart Tips on AnyChart BlogWelcome to JS Chart Tips, our new blog series where we showcase practical solutions to common and unique challenges our Support Team has helped customers overcome. This time, we’re eager to explain how to build a sophisticated circular diagram that may resemble a pie chart with a radial scale. Just a heads-up: this type of visualization is technically a polar column chart.

Read more »

JavaScript Gantt Chart with Custom Data Grid Header Font — JS Chart Tips

August 20th, 2024 by AnyChart Team

A screenshot of a JavaScript Gantt chart with custom data grid header font, displayed with JS code, explained in this edition of JS Chart Tips on AnyChart BlogHey everyone! We’re excited to launch a new regular feature on our blog called JS Chart Tips. In this series, we’ll share some recent cases handled by our Support Team for users of our JavaScript charting library, highlighting both frequent questions and those unique solutions that shouldn’t remain hidden.

Whether these scenarios directly resonate with a challenge you’re facing or simply spark an idea for your current or future data visualization development tasks, we hope you’ll find valuable insights. Each entry will include code snippets and JS chart examples to illustrate the solutions. If you get additional questions or need more details, simply comment below or contact our Support Team directly. We’re here to help enhance your JavaScript charting experience!

Without further ado, welcome to the first edition of JS Chart Tips! Today, you’ll learn how to customize the font of the data grid header in a JavaScript Gantt chart.

Read more »

Pivot Table vs. Decomposition Tree: Advancing Data Insights

June 27th, 2024 by AnyChart Team

Comparing a pivot table with a decomposition tree for data analysisIn the evolving data landscape, the pivot table has long been a cornerstone of the data analyst’s toolkit. Traditionally used to summarize datasets in a condensed tabular form, pivot tables facilitate quick overviews and basic drill-down capabilities. However, as data sets grow larger and more complex, the static and manual nature of pivot tables can limit their effectiveness.

Enter the decomposition tree, an advanced data visualization technique that not only presents data but also uncovers deeper patterns and insights ad-hoc, all through its dynamic, interactive hierarchical structure. As a relatively new tool in the realm of data analysis and business intelligence, it is increasingly used as an effective alternative to a pivot table yet still often underrated, given its inherent potential.

This article explores several reasons why decomposition trees can be advantageous over traditional pivot tables, illustrated with real-world use cases.

Read more at qlik.anychart.com »

How to Build Network Graph with JavaScript

May 23rd, 2024 by Alex Carter | DZone

Network Graph with JavaScript: GuideNetwork graphs are a practical and effective tool in data visualization, particularly useful for illustrating the relationships and connections within complex systems. These charts are useful for understanding structures in various contexts, from social networks to corporate hierarchies. In this tutorial, we’ll delve into a quick path to creating a compelling, interactive network graph using JavaScript.

We’ll use the Volkswagen Group as our example, mapping out its subsidiaries and product lines to showcase how network graphs can make complex organizational structures understandable and accessible. By the end of this step-by-step guide, you’ll have a clear understanding of how to quickly construct and customize a JS-based network graph. Buckle up, as it’s time to hit the road!

Read the JS charting tutorial »

Creating Interactive Network Graph Using JavaScript with Ease

April 18th, 2024 by Taylor Brooks

Network Graph based on JavaScript visualizing our Solar System network for the tutorialCreating a vibrant network graph in JavaScript might seem like crafting a digital cosmos: intricate, fascinating, yet entirely within reach. Whether you’re aiming to illustrate the complex interconnections within a galaxy, a social network, or the internal hierarchy of a multinational corporation, network graphs serve as a powerful tool to bring data to life, revealing hidden patterns and insights through visual representation.

Let’s embark on a journey to demystify the process, guiding you step-by-step on how to construct your very own network graph, with the Solar System as our illustrative example.

Read the JS charting tutorial »

Categories
Archive