{"id":13147,"date":"2021-07-28T11:31:35","date_gmt":"2021-07-28T11:31:35","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=13147"},"modified":"2022-09-12T16:44:59","modified_gmt":"2022-09-12T16:44:59","slug":"line-chart-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2021\/07\/28\/line-chart-js\/","title":{"rendered":"How to Create Line Chart with JavaScript"},"content":{"rendered":"

\"A<\/a>A line chart<\/a> is one of the basic and\u00a0most commonly used techniques of\u00a0data visualization<\/a>. Such graphics are known to provide an informative look at the change of one or several variables over time. Right now, I’ll explain how to easily create\u00a0a cool interactive line chart\u00a0using\u00a0JavaScript!\u00a0The process will be demonstrated with the help of compelling examples that you can play with afterwards to hone your new data visualization development skills.<\/p>\n

To make the article especially\u00a0thrilling for you to read and learn from, I decided to showcase a practical application of a line chart to real-world data. The month of June was celebrated as Pride Month<\/a>, and I thought it would be great to see how attitudes toward LGBT people have changed over the recent years. Then I found interesting public opinion data from the\u00a0General Social Survey (GSS), a project of the National Opinion Research Center (NORC) at the University of Chicago, which appeared to be a good fit, and took part of it to visualize in this guide.<\/p>\n

So, follow along with the tutorial and you will also\u00a0be able to explore\u00a0the shifts in acceptance of same-sex relationships in the United States over the last two decades! We will create a single-series JS line chart first, representing the general trend, and then a multi-series JS line chart to visualize a breakdown by age group.<\/p>\n

All aboard!<\/p>\n

<\/p>\n

JS Line Chart Preview<\/h2>\n

Before we begin, check out a preview! Here is a look at the beautiful line chart that we will have built with JavaScript by\u00a0the end of this data visualization tutorial.\u00a0Plus, it will be interactive and easily embeddable in any web page or app!<\/p>\n

\"The<\/p>\n

Doesn\u2019t it feel great to look at this colorful chart and feel positive about the future outlook?<\/p>\n

Read this step-by-step tutorial all the way to the end and you will learn how to produce such a line graph easily with very little coding.<\/p>\n

Building Basic JavaScript Line Chart in 4 Simple Steps<\/h2>\n

The normal order of visualizing data in JavaScript charts\u00a0can be broken down into four basic\u00a0steps, and building a JS line chart follows the same pattern:<\/p>\n

    \n
  1. Creating a basic HTML page to display the chart.<\/li>\n
  2. Including all the JS scripts we need.<\/li>\n
  3. Adding the data for the chart.<\/li>\n
  4. Writing the JS charting code.<\/li>\n<\/ol>\n

    So now, let\u2019s dig into each of these steps to draw our line chart in a jiffy.<\/p>\n

    1. Creating a basic HTML page<\/h3>\n

    To start, we create a basic HTML page with a <div><\/code> block element for our line chart. To\u00a0reference this block element later in the code, we give it an id attribute like \u201ccontainer\u201d.<\/p>\n

    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Line Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0  html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0  width: 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
    Here, we provide the <div><\/code> with the 100% width and height to render the line chart on the full screen. But it\u2019s not necessary and can be customized according to your requirements, of course.<\/p>\n
    2. Including all the JS scripts<\/h3>\n
    The second step is to reference all the necessary scripts to build the JS line chart. These scripts will go in the <script><\/code> tag inside of the <head><\/code> section.<\/p>\n
    In\u00a0this tutorial, the line chart is built with AnyChart<\/a>. It\u00a0is a lightweight and flexible JavaScript (HTML5) charting library with detailed documentation<\/a>\u00a0and API reference<\/a>. In addition,\u00a0there are a lot of\u00a0chart examples<\/a>\u00a0to check out and use as the starting point, as well as a utility called\u00a0Playground<\/a>\u00a0to experiment with the code.<\/p>\n
    Since the line chart is one of the basic chart types,\u00a0it requires only the base<\/a> module of AnyChart. We can easily obtain it from the CDN<\/a>. The JS line chart code itself will be written in the <script><\/code> tag inside of the <body><\/code> section.<\/p>\n
    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Line Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.10.0\/js\/anychart-base.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0  html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0  width: 100%; height: 100%; margin: 0; padding: 0; \r\n\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\/\/ All the code for the JS line chart will come here\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
    3. Adding the data<\/h3>\n
    In this tutorial, we will be visualizing\u00a0data from\u00a0the GSS\u00a0Data Explorer<\/a>,\u00a0namely the data that shows\u00a0how the breakdown of responses to the question “Is it wrong for same-sex adults to have sexual relations?” changed over time between 1990 and 2018.\u00a0Namely, we’ll represent the percentage of responses “Not wrong at all” that looks like a\u00a0good indicator of\u00a0acceptance here.<\/p>\n
    AnyChart supports\u00a0multiple options to load data<\/a> to charts. The data set for our line chart is pretty straightforward\u00a0and not large at all.\u00a0So we can simply include it inside the code itself.<\/p>\n
    To do that, we create a function that will return the data to\u00a0keep it as a separate block of code.<\/p>\n
    function getData() {\r\n  return [\r\n    ['1990',12],\r\n    ['1991',14],\r\n    ['1993',21],\r\n    ['1994',21],\r\n    ['1996',26],\r\n    ['1998',26],\r\n    ['2000',27],\r\n    ['2002',31],\r\n    ['2004',29],\r\n    ['2006',31],\r\n    ['2008',36],\r\n    ['2010',41],\r\n    ['2012',42],\r\n    ['2014',48],\r\n    ['2016',50],\r\n    ['2018',57]\r\n  ];\r\n}<\/code><\/pre>\n
    All the prep is done and now it\u2019s time to create the line chart with a few lines of JavaScript code!<\/p>\n
    4. Writing the JS line charting code<\/h3>\n
    Before anything else, we add a function enclosing all the JavaScript code needed to create the intended interactive line chart. This ensures that the code inside it will only execute once the page is all loaded.<\/p>\n
    We set up the data by calling the function we made in the previous step, and then we map the data to indicate that the first parameter for every data point is the\u00a0X value and the second parameter is the\u00a0Y value. Next, we call the line()<\/code> function to create the JS line chart.<\/p>\n
    \/\/ create a data set on our data\r\nvar dataSet = anychart.data.set(getData());\r\n\r\n\/\/ map data for the line chart,\r\n\/\/ take x from the zero column and value from the first column\r\nvar seriesData = dataSet.mapAs({ x: 0, value: 1 });\r\n\r\n\/\/ create a line chart\r\nvar chart = anychart.line();<\/code><\/pre>\n
    Now, we set the titles\u00a0for the line chart and for the Y-axis.<\/p>\n
    \/\/ configure the chart title text settings\r\nchart.title('Acceptance of same-sex relationships in the US over the last 2 decades');\r\n\r\n\/\/ set the y axis title\r\nchart.yAxis().title('% of people who accept same-sex relationships');<\/code><\/pre>\n
    Lastly, we\u00a0load the mapped data to the line chart, set the container id, and draw the graphic.<\/p>\n
    \/\/ create a line series with the mapped data\r\nvar lineChart = chart.line(seriesData);\r\n\r\n\/\/ set the container id for the line chart\r\nchart.container('container');\r\n\r\n\/\/ draw the line chart\r\nchart.draw();<\/code><\/pre>\n
    Voil\u00e0! A functional, interactive, JavaScript-based line chart is created! This was quite\u00a0quick and simple, wasn’t it?<\/p>\n
    Check out the result below, and you are more than welcome to see this chart and play with its code on\u00a0AnyChart Playground<\/a>.<\/strong><\/p>\n