{"id":15120,"date":"2022-06-17T18:19:22","date_gmt":"2022-06-17T18:19:22","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=15120"},"modified":"2022-08-13T11:12:10","modified_gmt":"2022-08-13T11:12:10","slug":"scatter-chart-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2022\/06\/17\/scatter-chart-js\/","title":{"rendered":"Building Scatter Chart in JavaScript"},"content":{"rendered":"

\"A<\/a>With data everywhere around us, it is imperative to know how to quickly create visualizations that help reveal trends and patterns in it. Today, let\u2019s learn how to build a scatter chart in just a few lines of simple JavaScript code!<\/p>\n

Scatter charts, or scatter plots, are designed to identify a correlation between typically two variables. In such graphics, the data is visualized as a set of points usually displayed as markers. The position of each marker indicates the values of the variables along the horizontal and vertical axes.<\/p>\n

In this tutorial, we will be visualizing international and domestic sales of the 1000 highest-grossing Hollywood movies as of January 2022. So, get your popcorn and start watching the JS scatter chart development!<\/p>\n

<\/p>\n

Creating Scatter Chart with JavaScript<\/h2>\n

Building interactive scatter charts from scratch can be difficult and time-consuming. But it is not a problem at all if you use JavaScript the right way.<\/p>\n

Generally speaking, there are four basic steps you need to take to get a JS-based scatter chart up and running. Here they are.<\/p>\n

1. Create a basic HTML page with a container<\/h3>\n

First of all, we need a web page with a container where our future scatter chart will be displayed.<\/p>\n

Create an HTML file (or feel free to open an existing one of your own). Include a block-level element, provide it with a unique id<\/code> that will be referenced later, and set its width<\/code> and height<\/code>. Here\u2019s a basic example of how all this can look:<\/p>\n

<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Scatter Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>\r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
As you see, we\u2019ve got a very basic HTML page with a <div><\/code> element whose id<\/code> is set as \u201ccontainer\u201d and both width<\/code> and height<\/code> are 100% so that the JavaScript scatter chart is displayed over the entire screen (these values can be specified as per preference and requirement).<\/p>\n
2. Include the necessary scripts<\/h3>\n
Second, include all the scripts needed for creating the plot in the <head><\/code> section of the HTML page.<\/p>\n
To build this scatter chart, let\u2019s use AnyChart JS Charts<\/a>. It is a very flexible JavaScript charting library with extensive documentation<\/a>, a lot of readymade JS chart examples<\/a>, and integration templates<\/a> for many popular tech stacks.<\/p>\n
The AnyChart JS charting library is modular<\/a>, and its Base<\/a> module will be more than enough in this case. The data we will visualize are stored in a JSON file, and the Data Adapter<\/a> script will let us load it from there in a straightforward manner.<\/p>\n
So, we only need to reference these two JS files.<\/p>\n
<html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Scatter Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-base.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-data-adapter.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%; height: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>  \r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ This is the place for the entire JS scatter chart code.\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
3. Connect the data<\/h3>\n
Third, load the data you want to represent.<\/p>\n
In this tutorial, we will use the scatter charting technique to visualize data from the Top 1000 Highest Grossing Movies<\/a> dataset on Kaggle. I took the sales figures along with the titles of the movies and put them all in a JSON file<\/a>.<\/p>\n
AnyChart supports multiple ways to load data<\/a> to charts. When it comes to data in a JSON file, for example, it is easy to add it using the loadJsonFile()<\/code> method:<\/p>\n
anychart.data.loadJsonFile(\r\n  \"https:\/\/gist.githubusercontent.com\/shacheeswadia\/dceaadd5fb4ea27cd9975ff39e9f98f4\/raw\/6baac571527d9b13e397cfb3d982d7942246dcc0\/scatterPlotData.json\",\r\n  function(data) {\r\n    \/\/ The main scatter plot visualization code will be here.\r\n  }\r\n);<\/code><\/pre>\n
4. Write the visualization code<\/h3>\n
Now, let\u2019s get to the main part of having an interactive JS scatter chart appear on our web page. Actually, it will only take a few lines of straightforward code.<\/p>\n
Add the anychart.onDocumentReady()<\/code> function that will enclose all the scatter plotting JavaScript code, making sure that the page is fully loaded before the visualization is executed. Then load the data the way described in the previous step.<\/p>\n
anychart.onDocumentReady(function () {\r\n  anychart.data.loadJsonFile(\r\n    \"https:\/\/gist.githubusercontent.com\/shacheeswadia\/dceaadd5fb4ea27cd9975ff39e9f98f4\/raw\/6baac571527d9b13e397cfb3d982d7942246dcc0\/scatterPlotData.json\",\r\n    function (data) {\r\n      \/\/ The following JS code comes here.\r\n    }\r\n  );\r\n});<\/code><\/pre>\n
Next, create a scatter chart instance (using the built-in scatter()<\/code> function) and define markers (there are various options for the marker type, but let\u2019s adhere to the classic circle shape).<\/p>\n
let chart = anychart.scatter();\r\n\r\nlet marker = chart.marker(data);\r\nmarker.type(\"circle\").size(2);<\/code><\/pre>\n
It is important to specify what kind of values are plotted along each axis. So, let\u2019s set the titles for both:<\/p>\n
chart.yAxis().title(\"International sales ($ in millions)\");\r\nchart.xAxis().title(\"Domestic sales ($ in millions)\");<\/code><\/pre>\n
Similarly, let\u2019s also title the entire data visualization:<\/p>\n
chart.title(\"Top 1000 Highest Grossing Hollywood Movies: Domestic vs. International Sales\");<\/code><\/pre>\n
Now, simply reference the container\u2019s id<\/code> and command to draw the chart.<\/p>\n
chart.container(\"container\");\r\nchart.draw();<\/code><\/pre>\n
That\u2019s it! A beautiful, fully functional, interactive scatter chart is created with just these few lines of JavaScript code and can be embedded as is into any web page or app!<\/p>\n