{"id":15672,"date":"2022-09-14T09:00:33","date_gmt":"2022-09-14T09:00:33","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=15672"},"modified":"2023-10-31T14:44:35","modified_gmt":"2023-10-31T14:44:35","slug":"line-chart-in-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2022\/09\/14\/line-chart-in-javascript\/","title":{"rendered":"Making Line Chart \u2014 and Step Line Chart \u2014 in JavaScript"},"content":{"rendered":"

\"Line<\/a>Data visualization is a vast field with so many different types of charts<\/a> to learn and create. But there are several basic, evergreen graphs that every data designer and web developer dealing with analytics should know how to build. One of them is a Line Chart<\/strong> (or Line Graph<\/strong>). It’s primarily designed to represent data over time.<\/p>\n

You can follow along with this tutorial to learn how to quickly create beautiful interactive line (and step-line) charts using JavaScript. We’ll look at some cool examples and build them step by step, which will make the process both clear and entertaining.<\/p>\n

For your convenience, you can find all of them on CodePen<\/a> [and on AnyChart Playground<\/a>] so you could play with the line charting code further without limits.<\/p>\n

<\/p>\n

Our Dataset<\/h2>\n

The last two decades have been nothing short of spectacular in the world of tennis. The Big Three<\/a> \u2014 Roger Federer, Rafael Nadal, and Novak Djokovic \u2014 have won an astonishing combined 63 (of the past 78) Grand Slam tournaments. These are the most prestigious championships.<\/p>\n

I decided to plot their outstanding rivalry. So, the JS line graphs in this tutorial will visualize the Big Three\u2019s Grand Slam title race<\/strong>. And the first serve is already coming!<\/p>\n

How to Build Line Charts in 4 Steps<\/h2>\n

Generally speaking, the whole process of creating any chart in JavaScript is broken down into four steps, and a line chart is no exception:<\/p>\n

    \n
  1. Make an HTML page with a container.<\/li>\n
  2. Include JavaScript files.<\/li>\n
  3. Add your data.<\/li>\n
  4. Code a visualization.<\/li>\n<\/ol>\n

    Let’s go through each of these steps now.<\/p>\n

    1. Make an HTML page with a container<\/h3>\n

    To start with, you need a place where you want your chart to appear.<\/p>\n

    If you don\u2019t have one yet, create a basic web page. Then create a container for the line chart \u2014 add an HTML block-level element and give it a unique ID for further reference.<\/p>\n

    Here\u2019s what such a page might look like:<\/p>\n

    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>Line Chart JS<\/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
    The width<\/code> and height<\/code> parameters of the element are set as 100%. As a result, the line chart will render all over the web page. Of course you can set the style settings to your own liking and needs.<\/p>\n
    2. Include JavaScript files<\/h3>\n
    Next, include all JavaScript files, which we’ll use to create the line chart, in the <head><\/code> section.<\/p>\n
    There are a whole lot of different JavaScript charting libraries<\/a> which let you visualize data in a fast and simple way. Many of them support line charts, and you can choose one or another depending on your project requirements.<\/p>\n
    For illustration purposes, in this tutorial, I am using AnyChart JS Charts<\/a>. It\u2019s flexible, comes with extensive charting docs<\/a> and API references<\/a>, and you can use it for free (unless you are building something for a business.)<\/p>\n
    For the line chart, I add the \u201cBase\u201d module from the CDN<\/a>. (Of course, you can download it, put it in a folder on your website, and use your own link in that case.)<\/p>\n
    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>Line Chart JS<\/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<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\/\/ JavaScript code for the line chart.\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    The JavaScript code for the line graph will be inserted between <script><\/code> and <\/script><\/code> tags located in the <body><\/code> section (you may put those in the <head><\/code> section if you want).<\/p>\n
    3. Add your data<\/h3>\n
    Then, add the data you want to visualize in your line chart.<\/p>\n
    I counted all Grand Slam singles titles won by Federer, Nadal, and Djokovic<\/a>, by year. I will add it just like that as an array of arrays.<\/p>\n
    If you prefer other formats in your particular case, such as JSON, XML, CSV, or something else, check the ways to work with data<\/a>.<\/p>\n
    var data = [\r\n  [\"2003\", 1, 0, 0],\r\n  [\"2004\", 4, 0, 0],\r\n  [\"2005\", 6, 0, 0],\r\n  [\"2006\", 9, 1, 0],\r\n  [\"2007\", 12, 2, 0],\r\n  [\"2008\", 13, 5, 1],\r\n  [\"2009\", 15, 6, 1],\r\n  [\"2010\", 16, 9, 1],\r\n  [\"2011\", 16, 10, 4],\r\n  [\"2012\", 17, 11, 5],\r\n  [\"2013\", 17, 13, 6],\r\n  [\"2014\", 17, 14, 7],\r\n  [\"2015\", 17, 14, 10],\r\n  [\"2016\", 17, 14, 12],\r\n  [\"2017\", 19, 16, 12],\r\n  [\"2018\", 20, 17, 14],\r\n  [\"2019\", 20, 19, 16],\r\n  [\"2020\", 20, 20, 17],\r\n  [\"2021\", 20, 20, 20],\r\n  [\"2022\", 20, 22, 20]\r\n];<\/code><\/pre>\n
    In each array, the year is the first parameter (column #0). Then comes the number of titles won by the three players subsequently (cumulative for each).<\/p>\n
    4. Code a visualization<\/h3>\n
    Now, the warm-up session is done, and the court is all set. So let\u2019s get the match started and do some quick JavaScript coding!<\/p>\n
    First, add anychart.onDocumentReady()<\/code> as shown below:<\/p>\n
    <script>\r\n  anychart.onDocumentReady(function() {\r\n    \/\/ The main JS line charting code will be here.\r\n  });\r\n<\/script><\/code><\/pre>\n
    Everything else goes inside of that function.<\/p>\n
    So, second, include the data (from the previous step).<\/p>\n
    Third, create a data set and map it for each series (one for each player):<\/p>\n
    \/\/ create a data set\r\nvar dataSet = anychart.data.set(data);\r\n\r\n\/\/ map the data for all series\r\nvar firstSeriesData = dataSet.mapAs({x: 0, value: 1});\r\nvar secondSeriesData = dataSet.mapAs({x: 0, value: 2});\r\nvar thirdSeriesData = dataSet.mapAs({x: 0, value: 3});<\/code><\/pre>\n
    Fourth, create a line chart instance and three series with the mapped data:<\/p>\n
    \/\/ create a line chart\r\nvar chart = anychart.line();\r\n\r\n\/\/ create the series and name them\r\nvar firstSeries = chart.line(firstSeriesData);\r\nfirstSeries.name(\"Roger Federer\");\r\nvar secondSeries = chart.line(secondSeriesData);\r\nsecondSeries.name(\"Rafael Nadal\");\r\nvar thirdSeries = chart.line(thirdSeriesData);\r\nthirdSeries.name(\"Novak Djokovic\");<\/code><\/pre>\n
    Fifth, to make it clear at a glance what is shown in the line chart, a good idea is to add a legend and a title:<\/p>\n
    \/\/ add a legend\r\nchart.legend().enabled(true);\r\n  \r\n\/\/ add a title\r\nchart.title(\"Big Three's Grand Slam Title Race\");<\/code><\/pre>\n
    Finally, reference the container element ID and draw the resulting line chart:<\/p>\n
    \/\/ specify where to display the chart\r\nchart.container(\"container\");\r\n  \r\n\/\/ draw the resulting chart\r\nchart.draw();<\/code><\/pre>\n
    That\u2019s it! A fully functional line graph built with JS is ready. Feels like a straight-sets<\/a> victory, doesn\u2019t it?<\/p>\n