Client-side applications, such as interactive Web graphics, depend on browser support. This book assumes that your audience uses browsers that support HTML5 Canvas and ES2015 (which include all modern browsers). All examples use ES2015 syntax, including const and let instead of var, arrow functions where appropriate, spread operators, maps, sets, and promises. External files are loaded using the Fetch API, which has only been supported more recently, but you can easily switch to JQuery if necessary.

Although the creation of visualizations with Chart.js is mostly a declarative process, it is still a JavaScript library and requires basic knowledge of JavaScript. To create a simple chart, you need to know how to declare constants and variables, perform basic mathematical Boolean string and attribution operations, call and create functions, manipulate...

This section presents a brief summary of other technologies you should know about, covering their fundamental concepts. They include HTML DOM, JQuery, CSS, and HTML Canvas. You can skim or skip this section if you already know about and use these technologies. The next sections also provide code examples that can be downloaded from the GitHub repository for this chapter.

The structure of an HTML document is normally described with tags, but it can also be specified using JavaScript commands with a Document Object Model (DOM): a language-neutral API that represents an HTML or XML document as a tree. Consider the following HTML document (Examples/example-1.html):

<html&gt...

Data used in visualizations is usually distributed in a standard format that can be shared. Even when the data is served from a database, the data is usually delivered in some standard format. Popular proprietary formats, such as Excel spreadsheets, are common, but most statistical data is stored or delivered in CSV, XML, or JSON formats.

CSV stands for comma-separated values. It's a very popular data format for public data. A CSV file is a text file that emulates a table. It usually contains one header row with the names of the columns, and one or more data rows containing value fields. Rows are separated by line breaks, and the comma-separated fields in each row form columns. It maps perfectly to an...

Unless you have a very small or static dataset, it will usually not be embedded in your web page. You will probably use an asynchronous request to load it from a separate file after your HTML page is already loaded and then parse it. This section covers topics related to loading and parsing external files.

Most of the examples in this book consist of a single file (not considering the external libraries loaded using the <script> tags), and you can run them by simply opening them in a browser. You don't even need a Web server. Just click on the file and view it in your browser. But this won't work in examples that load external files via...

If you are lucky enough to find your data in CSV, XML, or JSON, you can load it and start using it right away. But what if your data is only available as HTML tables, or worse, as a PDF file? In these cases, you need to extract your data and transform it into a usable format.

If it's a very simple HTML table, sometimes you can select it and copy and paste it into a spreadsheet and preserve the rows and columns. Then you can export it as a CSV. Sometimes you will need to do extra work, perhaps removing garbage characters, styles, and unnecessary columns. This is risky, since you may also lose data or introduce errors during the process.

You can also use online tools that try...

This chapter provided a refresher on several fundamental technology concepts that will help you create visualizations with Chart.js. Even though Chart.js tries to hide all the underlying complexity from you, it is still a JavaScript library and basic knowledge of JavaScript, DOM, and CSS are important.

This chapter also described the main data formats used for statistical data: CSV, XML, and JSON. It also described how to load external files in these formats and how to parse them. Additionally, you learned some ways to obtain data not in these formats by extracting it from HTML pages.

In the next chapter, we will begin using Chart.js to create data visualizations.