Plotly.js

Plotly.js Basic Example

HTML

<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-3.3.0.min.js'></script>
</head>

<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

JavaScript

var use_gl = true;

function changeRenderMode(gl, data) {
	var update = [];
	for (var i = 0; i < data.length; i++) {
		if (data[i].type.startsWith("scatter")) {
			if (gl) {
				update.push("scattergl");
			} else {
				update.push("scatter");
			}
		}
		else {
			update.push(data[i].type);
		}
	}
	console.log(update);
	return Object.assign({ type: update });
}

function updateDataForRender(gd, data, up_layout) {
	up_layout = (up_layout === undefined) ? {} : up_layout;
	var fullLayout = gd._fullLayout;

	var svg = !use_gl;
	var svg_str = svg ? "svg" : "gl";

	var update = changeRenderMode(!svg, data);
	up_layout["meta[0]"] = svg_str;
	up_layout["xaxis.range"] = fullLayout.xaxis.range;
	Plotly.update(gd, update, up_layout);
}

(function () {
  var trace1 = {
    x: [0, 1, 2, 3, 4, 5],
    y: [1.5, 1, 1.3, 0.7, 0.8, 0.9],
    type: "scatter",
  };

  var trace2 = {
    x: [0, 1, 2, 3, 4, 5],
    y: [1, 0.5, 0.7, -1.2, 0.3, 0.4],
    type: "bar",
  };

  var icon = {
    width: 119,
    height: 67.7,
    name: "svg",
    svg: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 119 67.7" class="icon"> <metadata> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:cc="http://creativecommons.org/ns#" xmlns:xhtml="http://www.w3.org/1999/xhtml/vocab#" xmlns:dc="http://purl.org/dc/elements/1.1/"> <cc:Work rdf:about=""> <dc:title>SVG logo combined with the W3C logo</dc:title> <dc:format>image/svg+xml</dc:format> <rdfs:seeAlso rdf:resource="http://www.w3.org/2007/10/sw-logos.html"/> <dc:date>2007-11-01</dc:date> <xhtml:license rdf:resource="http://www.w3.org/Consortium/Legal/2002/copyright-documents-20021231"/> <cc:morePermissions rdf:resource="http://www.w3.org/2007/10/sw-logos.html#LogoWithW3C"/> <cc:attributionURL rdf:reource="http://www.w3.org/2001/sw/"/> <dc:description>The logo combines three entities...