Spaces:

Pekku
/

Chart

Sleeping

App Files Files Community

Chart / dataset /web /AnyChart /bar /chart_0046_bar.html

Pekku

Upload folder using huggingface_hub

79dc9c8 verified about 2 months ago

raw

history blame contribute delete

3.35 kB

	<!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 02</title>
	<link href="https://playground.anychart.com/docs/samples/BCT_Bar_Chart_02/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">
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	<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 () {

	// create a data set
	var data = anychart.data.set([
	["John", 10000, 12500],
	["Jake", 12000, 15000],
	["Peter", 13000, 16500],
	["James", 10000, 13000],
	["Mary", 9000, 11000]
	]);

	// map the data
	var seriesData_1 = data.mapAs({x: 0, value: 1});
	var seriesData_2 = data.mapAs({x: 0, value: 2});

	// create a chart
	var chart = anychart.bar();

	// create the first series, set the data and name
	var series1 = chart.bar(seriesData_1);
	series1.name("Sales in 2015");

	// configure the visual settings of the first series
	series1.normal().fill("#00cc99", 0.3);
	series1.hovered().fill("#00cc99", 0.1);
	series1.selected().fill("#00cc99", 0.5);
	series1.normal().stroke("#00cc99", 1, "10 5", "round");
	series1.hovered().stroke("#00cc99", 2, "10 5", "round");
	series1.selected().stroke("#00cc99", 4, "10 5", "round");

	// create the second series, set the data and name
	var series2 = chart.bar(seriesData_2);
	series2.name("Sales in 2016");

	// configure the visual settings of the second series
	series2.normal().fill("#0066cc", 0.3);
	series2.hovered().fill("#0066cc", 0.1);
	series2.selected().fill("#0066cc", 0.5);
	series2.normal().hatchFill("forward-diagonal", "#0066cc", 1, 15);
	series2.hovered().hatchFill("forward-diagonal", "#0066cc", 1, 15);
	series2.selected().hatchFill("forward-diagonal", "#0066cc", 1, 15);
	series2.normal().stroke("#0066cc");
	series2.hovered().stroke("#0066cc", 2);
	series2.selected().stroke("#0066cc", 4);

	// set the chart title
	chart.title("Bar Chart: Appearance");

	// set the titles of the axes
	chart.xAxis().title("Manager");
	chart.yAxis().title("Sales, $");

	// set the container id
	chart.container("container");

	// initiate drawing the chart
	chart.draw();
	});</script>
	</body>
	</html>