Spaces:

Pekku
/

Chart

Sleeping

App Files Files Community

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

Pekku

Upload folder using huggingface_hub

79dc9c8 verified about 2 months ago

raw

history blame contribute delete

4.88 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 Area Chart with X-Scale Continuous Mode</title>
	<link href="https://playground.anychart.com/fWZMsrbL/iframe" rel="canonical">
	<meta content="Animation,Area Chart,Multi-Series Chart,Stacked Chart,Tooltip,Annotated Chart,Drawing Annotations,Bar Chart,Column 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/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: 100%;
	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-annotations.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 src="_deps/www.marketforecast.com/content/scripts/market_forecast_mixed.js"></script>
	<script type="text/javascript">anychart.onDocumentReady(function () {
	// create data set
	var dataSet = anychart.data.set([
	['2024',36839,3880],
	['2025',46587,8050],
	['2026',61146,7995],
	['2027',68701,8109],
	['2028',74540,7170],
	['2029',80448,7170],
	['2030',87174,7867],
	['2031',85200,7867],
	['2032',79413,7867],
	['2033',79114,7867]
	]);

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

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

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

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

	// map data for the fifth series, take x from the zero area and value from the fourth area of data set
	// var fifthSeriesData = dataSet.mapAs({ x: 0, value: 5 });

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

	anychart.theme(anychart.themes.marketForecast);
	anychart.licenseKey("marketforecast.com-f857f242-9dccc95c");
	var credits = chart.credits();
	credits.enabled(false);

	// turn on the crosshair


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

	// set chart title text settings
	// chart.title('Market by Fitment - US$ Millions');

	// turn on legend
	chart.legend().enabled(true).fontSize(13).padding([20, 0, 0, 0]).position('bottom').itemsLayout("horizontal-expandable");

	// set titles for axises
	chart.xAxis().title(false);
	chart.yAxis().title('Market size in US$ millions');
	chart.yAxis().title().fontColor('#003A70');

	// Format the y-axis labels to include commas for thousands
	chart.yAxis().labels().format("{%Value}{groupsSeparator:\\,}");

	// interactivity and tooltip settings
	chart.interactivity().hoverMode('by-x');
	chart
	.tooltip()
	.valuePrefix(' ')
	.valuePostfix(' aircraft')
	.displayMode('union');

	// helper function to add series and labels
	function addSeriesWithLabel(seriesData, seriesName, labelPosition) {
	var series = chart.column(seriesData);
	series.name(seriesName);
	series.stroke('2 #fff 1');
	series.hovered().stroke('3 #fff 1');
	series.markers().enabled(true).type('circle').size(4).stroke('1.5 #fff');
	series.markers().zIndex(100);

	// Add label to series
	series.labels()
	.enabled(true)
	.position(labelPosition)
	.anchor('center-top')
	.fontColor('#003A70')
	.format("{%Value}{groupsSeparator:\\,}")
	;

	}

	// Add series with labels
	addSeriesWithLabel(secondSeriesData, 'Upgrade', 'center-top');
	addSeriesWithLabel(firstSeriesData, 'New A/C (incl development)', 'center-top');

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

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