Line graph using html and css
A line chart is one of the basic and most commonly used techniques of data visualization. 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 a cool interactive line chart using JavaScript! The process will be demonstrated with the help of compelling examples
that you can play with afterwards to hone your new data visualization development skills.
Show
To make the article especially thrilling 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, 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 General 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. So, follow along with the tutorial and you will also be able to explore the 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. All aboard! JS Line Chart PreviewBefore we begin, check out a preview! Here is a look at the beautiful line chart that we will have built with JavaScript by the end of this data visualization tutorial. Plus, it will be interactive and easily embeddable in any web page or app! Doesn’t it feel great to look at this colorful chart and feel positive about the future outlook? 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. Building Basic JavaScript Line Chart in 4 Simple StepsThe normal order of visualizing data in JavaScript charts can be broken down into four basic steps, and building a JS line chart follows the same pattern:
So now, let’s dig into each of these steps to draw our line chart in a jiffy. 1. Creating a basic HTML pageTo start, we create a basic HTML page with a
Here, we provide the The second step is to reference all the necessary scripts to build the JS line chart.
These scripts will go in the In this tutorial, the line chart is built with AnyChart. It is a lightweight and flexible JavaScript (HTML5) charting library with detailed documentation and
API reference. In addition, there are a lot of chart examples to check out and use as the starting point, as well as a utility called Playground to experiment with the code. Since the line chart is one of the basic chart types, it requires only the base module of AnyChart. We can easily obtain it from the CDN. The JS line chart code itself will be written in the In this tutorial, we will be visualizing data from the GSS Data Explorer, namely the data that
shows how 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. Namely, we’ll represent the percentage of responses “Not wrong at all” that looks like a good indicator of acceptance here. AnyChart supports multiple options to
load data to charts. The data set for our line chart is pretty straightforward and not large at all. So we can simply include it inside the code itself. To do that, we create a function that will return the data to keep it as a separate block of code. All the prep is done and now it’s time to create the line chart with a few lines of JavaScript code! 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. 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 X value and the second parameter is the Y value. Next, we call the Now, we set the titles for the line
chart and for the Y-axis. Lastly, we load the mapped data to the line chart, set the container id, and draw the graphic. Voilà! A functional, interactive, JavaScript-based line chart is created! This was quite quick and simple, wasn’t it? Check out the result below, and you are more than welcome to see this chart and play with its code on AnyChart Playground. What does this line chart tell us? We can clearly see the positive change over time and how the acceptance of same-sex relationships in the United States was gradually increasing between 1990 and 2018 with just a few slight pauses. But do not leave yet! Although this chart already looks good, it is just a very basic
version of the JS line chart we can afford to obtain. It will only take a few more steps to add functionality and interactivity. Now, get ready to make a stunning multi-line chart that will visualize a breakdown by age! When there is segregated data, we use a multi-series line chart to indicate each segment as a separate line. Let’s see how it is done! The basic code remains the same. But instead of one series,
we will create multiple series. Of course, the data will contain multiple data points for each year now as we break down the total percentage for “Not wrong at all” by age groups: 18-34, 35-49, 50-64, and 65+. We will need to create a different data mapping for each series. We then link each of those series to a different line and name each series based on the segments. Here, since we have multiple lines depicted in our JS line plot, we need a legend
that will help identify which line represents what segment. Don’t worry, it’s nothing complex. The chart legend is automatically created by the JS library and we just need to turn it on. That’s it! With these simple modifications, we get a lovely-looking multi-series line chart built with JavaScript! It can also be viewed and further played with on AnyChart Playground. Again, we can distinctly grasp how the overall trend is positive in all age groups, especially in the younger generation. The multi-series line chart looks great as is, but we can make it even more awesome with some customizations! AnyChart is great in that respect because it
offers a whole lot of out-of-the-box options allowing you to modify the JS (HTML5) charts like this with ease. So, let’s make some quick tweaks to have a more insightful view of the data. As we can see, the lines formed currently are sharp at the connections and give a more geometric feel. In the AnyChart JS library, we can get smoother lines by simply substituting “line” with “spline” when linking the data with the series. After these simple changes, our line chart becomes a spline chart! Since the lines in our visualization are now smooth, making crosshairs show up when the viewer hovers over the lines can improve readability. It is also easy to customize the
crosshair behavior. In this case, for example, let’s keep only the X-axis connector and label. Check out the interactive JavaScript spline chart with the crosshair! It is available on AnyChart Playground. Ultimately, for the final chart of this JS line chart tutorial, let’s go ahead with straight lines instead of smooth curves.
But we’ll keep the crosshair anyway. To make the line chart tooltip more informative, we make it display that the numbers are percentage values and the segments are age groups. This can be simply done by setting the Since this JavaScript-based line chart talks about
same-sex relationships, we can use pride colors to represent the lines. This makes the chart look more personalized and represents the topic better. Let’s also make the lines a bit thicker so they look more pronounced. Modifying the color and the line width can be done together using the Lastly, we add a simple animation to jazz up the line chart, which is again done very easily as the JavaScript library has it
as a pre-built feature. It’s done! A stunning, interactive JavaScript line chart is all wrapped up! For your convenience, the final HTML/CSS/JS line chart code is below the visualization. Don’t hesitate to check it out on AnyChart Playground and maybe apply your data and other changes. Bài Viết Liên QuanCó thể bạn quan tâmXem NhiềuChúng tôiTrợ giúp |