Spaces:

Pekku
/

Chart

Sleeping

App Files Files Community

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

Pekku

Upload folder using huggingface_hub

79dc9c8 verified about 2 months ago

raw

history blame contribute delete

4.44 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 and Line Chart</title>
	<link href="https://playground.anychart.com/iqQIe9RS/iframe" rel="canonical">
	<meta content="Animation,Bar Chart,Column Chart,Multi-Series Chart,Multiple Axes,Stacked 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-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([
	['Jan-2022', 5250, 5250, 0],
	['Feb-2022', 7125, 1875, 0],
	['Mar-2022', 25993, 5850, 13018],
	['Apr-2022', 30755.5, 1500, 3262.5],
	['May-2022', 35818.5, 0, 5063],
	['Jun-2022', 49693.5, 3750, 10125],
	['Jul-2022', 51568.5, 1875, 0],
	['Aug-2022', 63880, 0, 12311.5],
	['Sep-2022', 73286, 3750, 5656],
	['Oct-2022', 81911, 3975, 4650],
	['Nov-2022', 93161, 3750, 7500],
	['Dec-2022', 98828, 1500, 4167]
	]);

	// map data for the first series, take x from the zero column and value from the first column of data set
	var firstSeriesData = 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 secondSeriesData = dataSet.mapAs({ x: 0, value: 2 });

	// map data for the third series, take x from the zero column and value from the third column of data set
	var thirdSeriesData = 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 fourthSeriesData = dataSet.mapAs({ x: 0, value: 4 });

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

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

	// set chart title text settings
	chart.title(
	'Combination of Stacked Column and Line Chart (Dual Y-Axis)'
	);

	// force chart scale to stuck series values
	chart.yScale().stackMode('value');

	// create scale for line series and extraYAxis
	// it force line series to not stuck with over series
	var scale = anychart.scales.linear();
	scale.minimum(0).maximum(100000).ticks({ interval: 20 });

	// create extra axis on the right side of chart
	// and set scale for it
	var extraYAxis = chart.yAxis(1);
	extraYAxis.orientation('right').scale(scale);
	extraYAxis.labels().padding(0, 0, 0, 5);

	// setup axis to append '%' symbol to label values
	//extraYAxis.labels().format('{%Value}%');

	// create second series with mapped data
	chart.column(secondSeriesData).name("Experience Cost Savings").color("Green");

	chart.crosshair(true);

	// create line series and set scale for it
	var lineSeries = chart.line(firstSeriesData).name("Incremental Cost Savings").color("#f1c232");
	lineSeries.yScale(scale).markers(true);

	// create third series with mapped data
	chart.column(thirdSeriesData).name("Fulfilment Cost Savings").color("#0080ff");

	// create fourth series with mapped data
	//chart.column(fourthSeriesData);

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

	// initiate chart drawing
	chart.draw();


	var legend = chart.legend();
	legend.enabled(true);
	legend.position('center');
	legend.itemsLayout('horizontal');

	//var labels = chart.labels();
	//labels.enabled(true);
	//labels.color("#000000");
	});</script>
	</body>
	</html>