Spaces:

Pekku
/

Chart

Sleeping

App Files Files Community

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

Pekku

Upload folder using huggingface_hub

79dc9c8 verified about 2 months ago

raw

history blame contribute delete

4.66 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>Stacked Column Chart</title>
	<link href="https://playground.anychart.com/5xEw407d/iframe" rel="canonical">
	<meta content="Animation,Bar Chart,Column Chart,Multi-Series Chart,Stacked Chart,Tooltip" 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/v8/css/anychart-ui.min.css" rel="stylesheet" type="text/css">
	<link href="_deps/cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" rel="stylesheet" type="text/css">
	<style>html, body, #container {
	width: 135%;
	height: 100%;
	margin: 0;
	padding: 0;
	}</style>
	</head>
	<body>
	<div id="container"></div>
	<script src="_deps/cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
	<script src="_deps/cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
	<script src="_deps/cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
	<script type="text/javascript">anychart.onDocumentReady(function () {
	// create data set on our data
	var dataSet = anychart.data.set([
	['Ianuarie', 12814, 3054, 4376, 4229],
	['Februarie', 13012, 5067, 3987, 3932],
	['Martie', 11624, 7004, 3574, 5221],
	['Aprilie', 8814, 9054, 4376, 9256],
	['Mai', 12998, 12043, 4572, 3308],
	['Iunie', 12321, 15067, 3417, 5432],
	['Iulie', 10342, 10119, 5231, 13701],
	['August', 22998, 12043, 4572, 4008],
	['Septembrie', 11261, 10419, 6134, 18712],
	['Octombrie', 10261, 14419, 5134, 25712],
	['Noiembrie', 11261, 8419, 5134, 15666],
	['Decembrie', 10261, 9419, 4134, 12344]
	]);

	// map data for the first series, take x from the zero column and value from the first column of data set
	var seriesData_1 = dataSet.mapAs({'x': 0, 'value': 1});

	// map data for the second series, take x from the zero column and value from the second column of data set
	var seriesData_2 = dataSet.mapAs({'x': 0, 'value': 2});

	// map data for the second series, take x from the zero column and value from the third column of data set
	var seriesData_3 = dataSet.mapAs({'x': 0, 'value': 3});

	// map data for the fourth series, take x from the zero column and value from the fourth column of data set
	var seriesData_4 = dataSet.mapAs({'x': 0, 'value': 4});

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

	// turn on chart animation
	chart.animation(true);

	// force chart to stack values by Y scale.
	chart.yScale().stackMode('value');

	// set chart title text settings
	chart.title('Primaria Sector 1 Bucuresti');
	chart.title().padding([0, 0, 5, 0]);

	// helper function to setup label settings for all series
	var setupSeriesLabels = function (series, name) {
	series.name(name)
	.stroke('3 #fff 1');
	series.hovered().stroke('3 #fff 1');
	};

	// temp variable to store series instance
	var series;

	// create first series with mapped data
	series = chart.column(seriesData_1);
	setupSeriesLabels(series, 'Cladire Principala');

	// create second series with mapped data
	series = chart.column(seriesData_2);
	setupSeriesLabels(series, 'Cladire Secundara');

	// create third series with mapped data
	series = chart.column(seriesData_3);
	setupSeriesLabels(series, 'Cladire Terta');

	// create fourth series with mapped data
	series = chart.column(seriesData_4);
	setupSeriesLabels(series, 'Cladire Aditionala');

	// turn on legend
	chart.legend().enabled(true).fontSize(13).padding([0, 0, 20, 0]);
	// set yAxis labels formatter
	chart.yAxis().labels().format('{%Value}{groupsSeparator: }');

	// set titles for axes
	chart.xAxis().title('Luni');
	chart.yAxis().title('Masurare in Kw');

	// set interactivity hover
	chart.interactivity().hoverMode('by-x');

	chart.tooltip()
	.valuePrefix('kw')
	.displayMode('union');

	// set container id for the chart
	chart.container('container');

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