Skip to content

Instantly share code, notes, and snippets.

@enactdev
Last active January 10, 2020 21:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
  • Save enactdev/2c45cfa8456fde957898c619ec489cf7 to your computer and use it in GitHub Desktop.
Save enactdev/2c45cfa8456fde957898c619ec489cf7 to your computer and use it in GitHub Desktop.
Plotly JS Example

Plotly JS Example

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Plotly JS Example</title>
<meta name="description" content="Plotly JS Example">
<meta name="author" content="Open Data Delaware">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="plotly-chart"></div>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
// From: https://www.w3schools.com/js/js_json_parse.asp
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var plotly_vars = JSON.parse(this.responseText);
Plotly.newPlot('plotly-chart', plotly_vars['data'], plotly_vars['layout']);
}
};
xmlhttp.open("GET", "plotly_vars.json", true);
xmlhttp.send();
</script>
</body>
</html>
{
"data":[
{
"x": [0, 1, 2, 3, 4, 5, 6, 7, 8],
"y": [0, 3, 6, 4, 5, 2, 3, 5, 4],
"type": "scatter",
"name":"Plot 1"
},
{
"x": [0, 1, 2, 3, 4, 5, 6, 7, 8],
"y": [0, 4, 7, 8, 3, 6, 3, 3, 4],
"type": "scatter",
"name":"Plot 2"
},
{
"x": [0, 1, 2, 3, 4, 5, 6, 7, 8],
"y": [0, 5, 3, 10, 5.33, 2.24, 4.4, 5.1, 7.2],
"type": "scatter",
"name":"Plot 3"
}
],
"layout":{
"showlegend": true,
"legend": {"orientation": "h"}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment