| <!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>BCT Bar Chart 04</title>
|
| <link href="https://playground.anychart.com/docs/samples/BCT_Bar_Chart_04/iframe" rel="canonical">
|
| <meta content="Bar Chart,Bar Graph,Column Chart,Vertical Chart" 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 = anychart.data.set([
|
| ["John", 10000, 12500],
|
| ["Jake", 12000, 15000],
|
| ["Peter", 13000, 16500, "#5cd65c", "#009933", null, {enabled: true}],
|
| ["James", 10000, 13000],
|
| ["Mary", 9000, 11000]
|
| ]);
|
|
|
|
|
| var seriesData_1 = data.mapAs({x: 0, value: 1, fill: 3, stroke: 5, label: 6});
|
| var seriesData_2 = data.mapAs({x: 0, value: 2, fill: 4, stroke: 5, label: 6});
|
|
|
|
|
| var chart = anychart.bar();
|
|
|
|
|
| var series1 = chart.bar(seriesData_1);
|
| series1.name("Sales in 2015");
|
|
|
|
|
| var series2 = chart.bar(seriesData_2);
|
| series2.name("Sales in 2016");
|
|
|
|
|
| chart.title("Bar Chart: Appearance (Individual Points)");
|
|
|
|
|
| var xAxis = chart.xAxis();
|
| xAxis.title("Manager");
|
| var yAxis = chart.yAxis();
|
| yAxis.title("Sales, $");
|
|
|
|
|
| chart.container("container");
|
|
|
|
|
| chart.draw();
|
| });</script>
|
| </body>
|
| </html> |