{"id":14286,"date":"2022-01-13T13:22:00","date_gmt":"2022-01-13T13:22:00","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=14286"},"modified":"2022-08-13T11:08:49","modified_gmt":"2022-08-13T11:08:49","slug":"sparklines-javascript","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2022\/01\/13\/sparklines-javascript\/","title":{"rendered":"How to Create Sparklines with JavaScript"},"content":{"rendered":"

\"Sparkline<\/a>Sparklines are elegant microcharts introduced by Edward Tufte<\/a>, a renowned statistician and data visualization pioneer. Drawn without any axis and occupying minimal space, these tiny\u00a0graphs are designed\u00a0to\u00a0represent the big picture displaying trends in line with text and within table cells. If you want to\u00a0learn about an easy way\u00a0of building\u00a0a\u00a0sparkline\u00a0chart, it is\u00a0the right place!<\/p>\n

In this article, I will show\u00a0you how to\u00a0quickly create cool sparkline charts using JavaScript. With OTT content ruling the world of entertainment these days, let\u2019s have fun learning and look at the IMDb ratings of one of the most popular shows\u00a0nowadays \u2014 Money Heist<\/a><\/em> (La\u00a0Casa de\u00a0Papel<\/em> in its original Spanish).<\/p>\n

Without more ado, come along on this journey of knowledge heist!<\/p>\n

<\/p>\n

JS Sparkline Charts to Be Built<\/h2>\n

In the tutorial, we will be creating\u00a0a total of two JavaScript-based sparkline charts with different series.<\/p>\n

The line sparklines will display how the\u00a0IMDb ratings of the episodes change over each of the five\u00a0seasons of Money Heist<\/em>.<\/p>\n

The column sparklines will indicate how each episode’s rating stands compared to that season\u2019s average, in percentages: The former will have a value of 100% if it equals the latter and a greater or smaller value for anything more or less than the average, respectively.<\/p>\n

Check out how our JS sparkline charts will look and keep reading to delve into this data visualization development process step by step!<\/p>\n

\"Final<\/p>\n

One may think there is a trick somewhere and you need to know a lot about coding but it is actually relatively easy and the final JavaScript code will be lean 40+ lines of Vanilla JS.<\/p>\n

Creating JavaScript Sparkline Chart<\/h2>\n

A lovely JS sparkline chart can be created in just four simple steps. Isn\u2019t that perfecto?<\/p>\n

    \n
  1. Make an HTML page.<\/li>\n
  2. Add the script files to be used.<\/li>\n
  3. Connect the data.<\/li>\n
  4. Write\u00a0the JavaScript\u00a0charting code.<\/li>\n<\/ol>\n

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

    To begin with, we need a\u00a0basic HTML page with a <table><\/code>\u00a0element that will hold all the data values along with the sparkline charts. To\u00a0reference the table\u00a0later in the code, we’ll provide it\u00a0with an\u00a0ID parameter. For example, “tb-seasons.”<\/p>\n

    Then, let’s\u00a0add the\u00a0table head\u00a0to display\u00a0the title\u00a0of the whole table and the headings of each column. Long texts\u00a0will be broken\u00a0into\u00a0two lines\u00a0so\u00a0the\u00a0entire sparkline\u00a0chart-based data visualization\u00a0project\u00a0looks neater.<\/p>\n

    Finally, of course, we also\u00a0need to define the body of the table. It is where our data values and sparkline charts\u00a0themselves will be rendered.<\/p>\n

    <html>\r\n\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Sparkline Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0html,\r\n      body {\r\n\u00a0\u00a0      width: 100%;\r\n\u00a0\u00a0      margin:0;\r\n\u00a0\u00a0      padding: 0;\r\n      }\r\n      tr { \r\n    \u00a0\u00a0\u00a0\u00a0overflow: hidden;\r\n    \u00a0\u00a0\u00a0\u00a0height: 14px;\r\n    \u00a0\u00a0\u00a0\u00a0white-space: nowrap;\r\n      }\r\n      td {\r\n    \u00a0\u00a0\u00a0\u00a0text-align: center; \r\n    \u00a0\u00a0\u00a0\u00a0vertical-align: middle;\r\n      }\r\n      .chart {\r\n\u00a0\u00a0      height: 20px;\r\n\u00a0\u00a0      width: 80px;\r\n      }\r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>\r\n\u00a0\u00a0\u00a0\u00a0<table id=\"tb-seasons\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<thead>\r\n\u00a0\u00a0      <tr>\r\n\u00a0\u00a0\u00a0\u00a0      <th id=\"tg-head\" colspan=\"4\">Money Heist IMDb Ratings<\/th>\r\n\u00a0\u00a0      <\/tr>  \r\n\u00a0\u00a0      <tr>\r\n\u00a0\u00a0\u00a0\u00a0      <th id=\"tg-head\">Season<\/th>\r\n\u00a0\u00a0\u00a0\u00a0      <th id=\"tg-head\">Average rating<\/th>\r\n\u00a0\u00a0\u00a0\u00a0      <th id=\"tg-head\">Rating<br>by episode<\/th>\r\n\u00a0\u00a0\u00a0\u00a0      <th id=\"tg-head\">% of average<br>by episode<\/th>\r\n\u00a0\u00a0      <\/tr>    \r\n      <\/thead>\r\n      <tbody>\r\n      <\/tbody>\r\n\u00a0\u00a0\u00a0\u00a0<\/table>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    As you see,\u00a0in this\u00a0first step,\u00a0we\u00a0have also\u00a0specified the styles for the body, each row, and each cell of the table. In this example, the height of the chart\u00a0is\u00a0as small as\u00a020 pixels, and the width of the chart\u00a0is\u00a0only\u00a080 pixels. This is done to showcase that sparkline charts work without\u00a0taking much\u00a0space and\u00a0to drive home the point that\u00a0they are designed to serve as micrographs\u00a0in tables.<\/p>\n
    2. Add the script files to be used<\/h3>\n
    Next, we\u00a0need to reference\u00a0all the required scripts that will be used to create a sparkline chart visualization.<\/p>\n
    There are many JavaScript charting libraries out there. However, not\u00a0all of them\u00a0support sparkline charts. Here, we will be using\u00a0one that does,\u00a0AnyChart.<\/a>\u00a0It is lightweight, flexible, and a good choice for beginners because there are many examples<\/a> and detailed documentation<\/a>.<\/p>\n
    Let’s add the necessary script files from AnyChart CDN<\/a>.\u00a0To build sparkline charts using\u00a0this JS\u00a0library for data visualization,\u00a0we\u00a0need three specific scripts: the core module<\/a>, the sparkline module<\/a>, and the data adapter<\/a> module. So, we’ll include them\u00a0all in the <head><\/code> section of the HTML page created in the first step.<\/p>\n
    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Sparkline Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-core.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-sparkline.min.js\"><\/script>\r\n    <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\u00a0\/\/ The HTML body and table styles.\r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>  \r\n\u00a0\u00a0\u00a0\u00a0\/\/ The table to hold the data values and the charts.\r\n\u00a0\u00a0\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ All the code for the JS sparkline chart will come here.\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    3. Connect the data<\/h3>\n
    I have already\u00a0taken\u00a0the\u00a0Money Heist<\/em>\u00a0ratings\u00a0data from the IMDb website<\/a> and created a JSON file<\/a> in the format required for our\u00a0sparklines. We will then connect that dataset using the data.loadJsonFile<\/code> function.<\/p>\n
    Now the stage\u00a0is all\u00a0set, so let’s\u00a0get to\u00a0immediately\u00a0making\u00a0the forethought interactive sparkline\u00a0graphics\u00a0by writing\u00a0a little bit of JavaScript\u00a0charting code!<\/p>\n
    4. Write the JavaScript charting code<\/h3>\n
    Sparkline charts are rendered within a table. Therefore, creating a table with sparkline charts involves adding data for each row of the table. It may not be as simple as making one single bar chart<\/a> or a line chart<\/a>. But we will go through each line of code, so do not worry as you’ll see\u00a0creating an interactive\u00a0JS sparkline chart\u00a0is\u00a0really\u00a0far from rocket science.<\/p>\n
    Let\u2019s start with adding a function that encloses the code to ensure that the page is fully loaded before executing any code. Then we\u00a0will add the data file.<\/p>\n
    The first thing\u00a0to do\u00a0after\u00a0adding\u00a0the data\u00a0is to create\u00a0a function to iterate through data and call another function to create a row for each season.<\/p>\n
    function (data) {\r\n  \/\/ go through the data and add each season's info and charts to the table\r\n  Object.entries(data).forEach(([key, value]) => createSeason(key, data)); \r\n}<\/code><\/pre>\n
    Next, let’s define the\u00a0new function called\u00a0just now.<\/p>\n
    First, let’s get\u00a0a link for the table body where we want to add the rows\u00a0using the\u00a0ID\u00a0assigned\u00a0in the first step. Next, we\u00a0will\u00a0add a new row and set\u00a0its height to 30px. In this row, we’ll insert cells to hold the season number, the average rating of that season, and\u00a0the sparklines. The\u00a0latter will be\u00a0made\u00a0using another function and based on the\u00a0sparkline chart type,\u00a0line or column.<\/p>\n
    function createSeason(season, data){\r\n\r\n  \/\/ get a table link\r\n  var tbodyRef = document.getElementById('tb-seasons').getElementsByTagName('tbody')[0];\r\n  \r\n  \/\/ insert a row at the end of the table\r\n  var newRow = tbodyRef.insertRow();\r\n  newRow.setAttribute('height', '30px');\r\n  \r\n  \/\/ append a season name text node to a cell\r\n  newRow.insertCell().appendChild(document.createTextNode(season));\r\n  \r\n  \/\/ append a season rating cell\r\n  newRow.insertCell().appendChild(document.createTextNode(data[season]\r\n.avg));\r\n  \r\n  \/\/ create a line sparkline chart showing ratings\r\n  var lineDiv = createSparkline(data[season], 'episodeRatings', 'line');\r\n  \r\n  \/\/ append it\r\n  newRow.insertCell().appendChild(lineDiv); \r\n  \r\n  \/\/ create a column sparkline chart showing percentages\r\n  var columnDiv = createSparkline(data[season], 'percentOfAvg', 'column');\r\n  \r\n  \/\/ append it\r\n  newRow.insertCell().appendChild(columnDiv); \r\n\r\n}<\/code><\/pre>\n
    The last thing\u00a0to do is\u00a0define the function\u00a0that will build the sparkline charts\u00a0with the desired series type.<\/p>\n
    \/\/ create sparkline of a given type, color, and from a given field\r\nfunction createSparkline(data, field, type){\r\n\r\n  var sparkline = anychart.sparkline(data[field]);\r\n  sparkline.seriesType(type);\r\n  \r\n  \/\/ create a div for the sparklines and assign a css class name\r\n  var chartDiv = document.createElement('div');\r\n  chartDiv.setAttribute('class', 'chart');  \r\n  \r\n  sparkline.container(chartDiv);\r\n  sparkline.draw();\r\n  \r\n  return chartDiv;\r\n\r\n}<\/code><\/pre>\n
    Tada \u2014 beautiful and functional\u00a0interactive\u00a0JS\u00a0sparkline charts are made! Wasn\u2019t it\u00a0even easier than expected?<\/p>\n
    \"Basic<\/a><\/p>\n
    We can immediately\u00a0notice the trend of growing ratings within each season\u00a0of Money Heist<\/em> and that\u00a0the\u00a0last episode is\u00a0always the highest-rated. That\u2019s one of the greatest advantages of sparkline charts.<\/p>\n
    The interactive version of this\u00a0basic JavaScript\u00a0sparkline chart-based data visualization with the full code\u00a0can be found on\u00a0AnyChart Playground<\/a>. Next, we will customize\u00a0the graphs to\u00a0make them\u00a0look even better.<\/p>\n
    Customizing Sparklines<\/h2>\n
    A huge advantage of using a JavaScript charting library with\u00a0the sparkline\u00a0type of data visualization available out of the box,\u00a0like the AnyChart\u00a0JS library, is the ease of creating a basic version along with a plethora of options to\u00a0customize the\u00a0chart. We’ll improve the look of\u00a0our sparklines right away.<\/p>\n
    Modifying the color palette<\/h3>\n
    A very easy and effective idea to uplift the chart is to use colors that match the data that we are representing. Since our data is about the\u00a0TV series Money Heist<\/em>, we can simply use the red and black colors predominantly seen in any Money Heist<\/em> poster.<\/p>\n
    Let’s use the black color to\u00a0depict the line\u00a0sparklines and the red color for the\u00a0column\u00a0sparklines. It can be done by setting the stroke color for the\u00a0former and\u00a0the fill color for the\u00a0latter.<\/p>\n
    We\u00a0will simply add the color parameters to\u00a0both sparkline\u00a0building\u00a0functions and pass the color values when calling\u00a0them.<\/p>\n
    \/\/ create a line sparkline chart showing ratings\r\nvar lineDiv = createSparkline(data[season], 'episodeRatings', 'line', '#040102');\r\n\r\n\/\/ create a column sparkline chart showing percentages\r\nvar columnDiv = createSparkline(data[season], 'percentOfAvg', 'column', '#cf0011');\r\n\r\n\u2026\r\n\r\nsparkline.fill(color).stroke(color);<\/code><\/pre>\n
    Improving the headings<\/h3>\n
    To make our visual more attractive, we\u00a0can\u00a0push\u00a0some style changes. Let’s start with the title. We’ll give\u00a0a class to\u00a0the\u00a0top\u00a0row and\u00a0configure the style\u00a0settings for that class.<\/p>\n
    <tr class=\"main-heading\">\r\n\u00a0\u00a0<th id=\"tg-head\" colspan=\"4\">Money Heist IMDb Ratings<\/th>\r\n<\/tr>\r\n\r\n\u2026\r\n\r\n.main-heading {\r\n  font-family: sans-serif;\r\n  font-size: 14px;\r\n}<\/code><\/pre>\n
    Similarly, let’s add some\u00a0custom styles for the headings of the columns.<\/p>\n
    <tr class=\"col-headings\">\r\n\u00a0\u00a0<th id=\"tg-head\">Season<\/th>\r\n\u00a0\u00a0<th id=\"tg-head\">Average rating<\/th>\r\n\u00a0\u00a0<th id=\"tg-head\">Rating<br>by episode<\/th>\r\n\u00a0\u00a0<th id=\"tg-head\">% of average<br>by episode<\/th>\r\n<\/tr>\r\n\r\n\u2026\r\n\r\n.col-headings {\r\n  font-family: sans-serif;\r\n  font-size: 13px;\r\n  color: #7c868e;\r\n  font-weight: 300;\r\n  text-align: left;\r\n}<\/code><\/pre>\n
    Here is a sneak peek at how stunning the\u00a0sparklines look with just these easy modifications. You can\u00a0take a look at the interactive version\u00a0with the code here<\/a>.<\/p>\n
    \"Intermediate<\/a><\/p>\n
    Changing the tooltip<\/h3>\n
    A tooltip should always add some value and help in showing more information\u00a0when it’s needed. In our sparkline charts, the default tooltip shows\u00a0X and\u00a0Y values, which is not very insightful. Let’s make it\u00a0display the\u00a0episode number and the value for each data point \u2014\u00a0episode rating\u00a0in the line\u00a0sparkling charts\u00a0and percentage in\u00a0the column chart.<\/p>\n
    Just\u00a0like we did for colors, we’ll add\u00a0the tooltip parameters\u00a0to the functions and pass\u00a0the\u00a0custom\u00a0tooltip text\u00a0according to\u00a0the\u00a0type of sparkline\u00a0series.<\/p>\n
    sparkline.tooltip().format(function() {\r\n  var x = (this.x) + 1;\r\n  return \"E\" + x + \"-\" + this.value + tooltipPostfix;\r\n});<\/code><\/pre>\n
    That\u2019s it! Visually appealing\u00a0and\u00a0informative sparklines are\u00a0ready!<\/p>\n
    \"Final<\/a><\/p>\n
    Check out\u00a0the\u00a0final interactive\u00a0JS sparkline chart on\u00a0AnyChart Playground<\/a>\u00a0where you can also continue improving it, add some other data, and so on.\u00a0The full code is\u00a0also below just in case.<\/p>\n
    <html>\r\n\r\n<head>\r\n\u00a0\u00a0<title>JavaScript Sparkline Chart<\/title>\r\n\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-core.min.js\"><\/script>\r\n\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-sparkline.min.js\"><\/script>\r\n\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-data-adapter.min.js\"><\/script>\r\n\r\n\u00a0\u00a0<table id=\"tb-seasons\">\r\n\u00a0\u00a0\u00a0\u00a0<thead>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tr class=\"main-heading\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th id=\"tg-head\" colspan=\"4\">Money Heist IMDb Ratings<\/th>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tr>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tr class=\"col-headings\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th id=\"tg-head\">Season<\/th>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th id=\"tg-head\">Average rating<\/th>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th id=\"tg-head\">Rating<br>by episode<\/th>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th id=\"tg-head\">% of average<br>by episode<\/th>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tr>\r\n\u00a0\u00a0\u00a0\u00a0<\/thead>\r\n\u00a0\u00a0\u00a0\u00a0<tbody>\r\n\u00a0\u00a0\u00a0\u00a0<\/tbody>\r\n\u00a0\u00a0<\/table>\r\n\r\n\u00a0\u00a0<style type=\"text\/css\">\r\n\u00a0\u00a0\u00a0\u00a0html,\r\n\u00a0\u00a0\u00a0\u00a0body {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 100%;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0padding: 0;\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0tr {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0overflow: hidden;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 14px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0white-space: nowrap;\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0td {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text-align: center;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0vertical-align: middle;\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0.chart {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height: 20px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width: 80px;\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0.main-heading {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0font-family: sans-serif;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0font-size: 14px;\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0.col-headings {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0font-family: sans-serif;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0font-size: 13px;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: #7c868e;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0font-weight: 300;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text-align: left;\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n\u00a0\u00a0<div id=\"container\"><\/div>\r\n\r\n\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0anychart.onDocumentReady(function () {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0anychart.data.loadJsonFile('https:\/\/gist.githubusercontent.com\/shacheeswadia\/21ddfa122938e676bf9e7911e1417d9a\/raw\/d28d7a22b968bb39d755285d28ce949b31276628\/sparklineChartData.json',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function (data) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ go through the data and add each season's info and charts to the table\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Object.entries(data).forEach(([key, value]) => createSeason(key, data));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\r\n\u00a0\u00a0\u00a0\u00a0});\r\n\r\n\u00a0\u00a0\u00a0\u00a0function createSeason(season, data) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ get a table link\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var tbodyRef = document.getElementById('tb-seasons').getElementsByTagName('tbody')[0];\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ insert a row at the end of the table\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var newRow = tbodyRef.insertRow();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0newRow.setAttribute('height', '30px');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ append a season name text node to a cell\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0newRow.insertCell().appendChild(document.createTextNode(season));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ append a season rating cell\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0newRow.insertCell().appendChild(document.createTextNode(data[season].avg));\r\n      \/\/ create a line sparkline chart showing ratings\r\n \u00a0\u00a0\u00a0\u00a0\u00a0var lineDiv = createSparkline(data[season], 'episodeRatings', 'line', '#040102', 'Rating', '');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ append it\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0newRow.insertCell().appendChild(lineDiv);\r\n      \/\/ create a column sparkline chart showing percentages\r\n \u00a0\u00a0\u00a0\u00a0\u00a0var columnDiv = createSparkline(data[season], 'percentOfAvg', 'column', '#cf0011', 'Percent of average', '%');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ append it\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0newRow.insertCell().appendChild(columnDiv);\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\/\/ create sparkline of a given type, color, and from a given field\r\n\u00a0\u00a0\u00a0\u00a0function createSparkline(data, field, type, color, tooltipText, tooltipPostfix) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var sparkline = anychart.sparkline(data[field]);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sparkline.seriesType(type);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sparkline.fill(color).stroke(color);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sparkline.tooltip().format(function () {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var x = (this.x) + 1;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return \"E\" + x + \"-\" + this.value + tooltipPostfix;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ create a div for the sparklines and assign a css class name\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var chartDiv = document.createElement('div');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0chartDiv.setAttribute('class', 'chart');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sparkline.container(chartDiv);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sparkline.draw();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return chartDiv;\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0<\/script>\r\n\r\n<\/body>\r\n<\/html><\/code><\/pre>\n
    Conclusion<\/h2>\n
    You see it is really interesting and easy to build\u00a0elegant sparklines\u00a0with\u00a0JavaScript. To\u00a0see what else is possible, don’t hesitate to\u00a0look at\u00a0the sparkline charting docs<\/a>\u00a0and examples<\/a> in the AnyChart gallery.<\/p>\n
    So then, let us all use our brains not for plotting\u00a0a bank\u00a0robbery but for creating some lovely visual charts of this and many other types<\/a>!<\/p>\n
    \n
    We want to thank freelance data visualizer Shachee Swadia for creating this amazing JavaScript Sparkline Chart tutorial as a guest post.<\/em><\/p>\n
    To learn more about sparkline charts, visit Chartopedia<\/a>.<\/em><\/p>\n
    We also have many other JS chart tutorials<\/a> in case you are interested.<\/em><\/p>\n
    Got an idea of a no less awesome guest post?\u00a0We are eager to hear from you<\/a>!<\/em><\/p>\n
    \n