Line Plot with JavaScript - Plotly.js

Graph line plots with plotly.js. Plotly is Free software under the MIT license.

Plotly works even if you miss a couple of data points. For example, if you have temperature for all days but Tuesday.

Live Demo # ↑

This demo is created by running JavaScript in your browser. If you can't see it, check out the screenshot, or jump right into code.

Complete Web Page # ↑

<!doctype html>
<html>
	<head>
		<title>Hello Plotly.js - TeroKarvinen.com</title>
	</head>
	<body>
		<h1>Hello Plotly.js - TeroKarvinen.com</h1>
		<div id="terosPlot"></div>
		<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
		<script>
			Plotly.newPlot(
				'terosPlot',
				[{x: [0, 1, 2, 5, 7], y: [1, 2, 4, 8, 16]}],
				{}
			);
		</script>
	</body>
</html>

Screenshot # ↑

If you're learning JavaScript with JavaScript disabled, you can still enjoy this screenshot of the end result.

See also # ↑

This revisited and updated article is based on an earlier one: Simple Line Graph with Plotly.js

Related Articles on TeroKarvinen.com

Hello Flask - Write a Python Web App

Flask logo Many popular websites use Python somewhere in their stack: Youtube, Facebook, Google and Dropbox. Flask web framework is used by Pinterest and LinkedIn.

With this article, you learn to install Python Flask and run a "Hello world" in development environment.

jQuery is Not Needed for Browser Compatibility in 2021

You can now write scripts in plain JavaScript. Jquery is mostly not needed for compatiblity.

In 2021, Microsoft desktop and server Windowses only support Internet Explorer 11 or later (Edge). This removes the need for most compatibility hacks. Firefox and Chrome have followed JavaScript standards mostly from the start.

$("h1").text("Goodbye jQuery, my favourite JS library!")

document.querySelector("h1").innerHTML = "Hello, vanilla JavaScript!"

Python Web Service From Idea to Production

Build Python web service and publish it to the world!

New instance starting 2022 w21! Enroll 2022-03-14 w11 Mon 08:00.

Course completed! Feedback was excellent 4.9 out of 5. Thanks for taking my course!

You can read feedback in comments.

Intensive course on w21 and w22.

Enroll at 08:00 on Monday! Most seats were booked right after enrollment opened. Enrollment is open right now. Update: Only few seats left. Fully booked. Queue started, enroll quickly to get better position in the queue.

Python Web Service From Idea to Production

Build Python web service and publish it to the world!

Enroll 2022-03-14 w11 Mon 08:00. Last instance was fully booked on the day enrollment started.

Previous feedback was excellent 4.9 out of 5. Intensive online course 2022 w21-w22.

Related tags

graph plot JavaScript library web missing data poinst line plot