| <!doctype html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta content="IE=edge" http-equiv="X-UA-Compatible">
|
| <meta content="width=device-width, initial-scale=1" name="viewport">
|
| <title>AGST Range Marker 04</title>
|
| <link href="https://playground.anychart.com/docs/samples/AGST_Range_Marker_04/iframe" rel="canonical">
|
| <meta content="Axes Marker,Bar Chart,Column Chart,Range Marker,Trendline" name="keywords">
|
| <meta content="AnyChart - JavaScript Charts designed to be embedded and integrated" name="description">
|
| |
| |
| |
|
|
| <link href="_deps/cdn.anychart.com/releases/8.14.1/css/anychart-ui.min_qe95e7e741b.css" rel="stylesheet" type="text/css">
|
| <style>html, body, #container {
|
| width: 100%;
|
| height: 100%;
|
| margin: 0;
|
| padding: 0;
|
| }</style>
|
| </head>
|
| <body>
|
| <div id="container"></div>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.1/js/anychart-base.min_qe95e7e741b.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.1/js/anychart-exports.min_qe95e7e741b.js"></script>
|
| <script src="_deps/cdn.anychart.com/releases/8.14.1/js/anychart-ui.min_qe95e7e741b.js"></script>
|
| <script type="text/javascript">anychart.onDocumentReady(function () {
|
|
|
|
|
| var data = [
|
| ["January", 200],
|
| ["February", 289],
|
| ["March", 297],
|
| ["April", 250],
|
| ["May", 220],
|
| ["June", 215],
|
| ["July", 279],
|
| ["August", 357],
|
| ["September", 333],
|
| ["October", 218],
|
| ["November", 289],
|
| ["December", 266]
|
| ];
|
|
|
|
|
| var chart = anychart.column(data);
|
| chart.title("Range Marker");
|
|
|
|
|
| var marker = chart.rangeMarker(0);
|
|
|
| marker.from(0);
|
|
|
| marker.to(245);
|
|
|
| marker.fill("#fcd8d7");
|
|
|
| marker.axis(chart.yAxis());
|
|
|
| var vMarker = chart.rangeMarker(1);
|
| vMarker.from("June");
|
| vMarker.to("August");
|
| vMarker.axis(chart.xAxis());
|
| vMarker.fill("#d7fcda");
|
|
|
| chart.container("container");
|
| chart.draw();
|
| });</script>
|
| </body>
|
| </html> |
