plotly-js-material-design-theme
Version:
Plotly.js charts with Material Design theme.
408 lines (365 loc) • 9.96 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<title>plotly-js-material-design-theme</title>
</head>
<body>
<style>
body h1, h2, h3 {
font-family: 'Roboto', 'sans-serif' ;
}
nav, footer {
background-color: #4285F4 ;
}
</style>
<nav>
<div class="nav-wrapper">
<span style="padding-left: 1rem;">Plotly.js Material Design theme</span>
</div>
</nav>
<div class="container" style="margin-top: 1rem;">
<div class="row">
<div class="col s12 l6">
<div class="card">
<div class="card-content">
<span class="card-title">Type: scatter, mode: lines</span>
<div id="scatterlines"></div>
</div>
</div>
</div>
<div class="col s12 l6">
<div class="card">
<div class="card-content">
<span class="card-title">Type: scatter, mode: lines</span>
<div id="scatterlinesmulti"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: scatter, mode: lines</span>
<div id="scatterlineserror"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: scatter, mode: lines</span>
<div id="scatterlinesfill"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: scatter, mode: markers</span>
<div id="scattermarkers"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: scatter, mode: markers</span>
<div id="scattermarkersmarker"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 l6">
<div class="card">
<div class="card-content">
<span class="card-title">Type: bar</span>
<div id="bar"></div>
</div>
</div>
</div>
<div class="col s12 l6">
<div class="card">
<div class="card-content">
<span class="card-title">Type: bar</span>
<div id="bar-multi"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: carpet</span>
<div id="carpet"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: cone</span>
<div id="cone"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: pie</span>
<div id="pie"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: histogram</span>
<div id="histogram"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: histogram 2d</span>
<div id="histogram2d"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: ohlc</span>
<div id="ohlc"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: candlestick</span>
<div id="candlestick"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: violin</span>
<div id="violin"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 l6">
<div class="card">
<div class="card-content">
<span class="card-title">Type: scatterpolar, mode: lines</span>
<div id="scatterpolarlines"></div>
</div>
</div>
</div>
<div class="col s12 l6">
<div class="card">
<div class="card-content">
<span class="card-title">Type: scatterpolar, mode: lines</span>
<div id="scatterpolarlinesmulti"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 l6">
<div class="card">
<div class="card-content">
<span class="card-title">Type: scatterpolar, mode: markers</span>
<div id="scatterpolarmarkers"></div>
</div>
</div>
</div>
<div class="col s12 l6">
<div class="card">
<div class="card-content">
<span class="card-title">Type: scatterpolar, mode: markers</span>
<div id="scatterpolarmarkersmulti"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 l6">
<div class="card">
<div class="card-content">
<span class="card-title">Type: box</span>
<div id="box"></div>
</div>
</div>
</div>
<div class="col s12 l6">
<div class="card">
<div class="card-content">
<span class="card-title">Type: box</span>
<div id="boxmulti"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: scatterternary, mode: markers</span>
<div id="scatterternarymarkers"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: scatterternary, mode: lines</span>
<div id="scatterternarylines"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: choropleth</span>
<div id="choropleth"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 l6">
<div class="card">
<div class="card-content">
<span class="card-title">Type: scattergeo, mode: lines</span>
<div id="scattergeolines"></div>
</div>
</div>
</div>
<div class="col s12 l6">
<div class="card">
<div class="card-content">
<span class="card-title">Type: scattergeo, mode: markers</span>
<div id="scattergeomarkers"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: sankey</span>
<div id="sankey"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: parcoords</span>
<div id="parcoords"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 l6">
<div class="card">
<div class="card-content">
<span class="card-title">Type: scatter3d, mode: lines</span>
<div id="scatter3dlines"></div>
</div>
</div>
</div>
<div class="col s12 l6">
<div class="card">
<div class="card-content">
<span class="card-title">Type: scatter3d, mode: lines</span>
<div id="scatter3dlinesmulti"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: scatter3d, mode: markers</span>
<div id="scatter3dlinesfill"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: scatter3d, mode: markers</span>
<div id="scatter3dmarkers"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Type: histogram2dcontour</span>
<div id="histogram2dcontour"></div>
</div>
</div>
</div>
</div>
</div>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<a class="white-text" href="https://github.com/ndabAP/plotly-js-material-design-theme">Source code</a>
</div>
</div>
</div>
<div class="footer-copyright">
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script type="text/javascript" src="app.min.c6cbd7fb0855ebe2706e.js"></script></body>
</html>