Spaces:

Pekku
/

Chart

Sleeping

App Files Files Community

Chart / dataset /web /AnyChart /other /chart_0025_other.html

Pekku

Upload folder using huggingface_hub

79dc9c8 verified 2 months ago

raw

history blame contribute delete

3.06 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 Calendar Chart 08</title>
	<link href="https://playground.anychart.com/docs/samples/BCT_Calendar_Chart_08/iframe" rel="canonical">
	<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-calendar.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 data
	var data = [
	{x: "2020-01-12", value: "6"},
	{x: "2020-01-15", value: "2"},
	{x: "2020-01-18", value: "2"},
	{x: "2020-01-19", value: "5"},
	{x: "2020-02-03", value: "1"},
	{x: "2020-02-19", value: "9"},
	{x: "2020-03-19", value: "2"},
	{x: "2020-04-13", value: "3"},
	{x: "2020-04-15", value: "3"},
	{x: "2020-04-20", value: "4"},
	{x: "2020-04-21", value: "1"},
	{x: "2020-05-10", value: "3"},
	{x: "2020-05-11", value: "1"},
	{x: "2020-05-14", value: "1"},
	{x: "2021-01-12", value: "2"}
	];

	// create a chart and set the data
	var chart = anychart.calendar(data);

	// create and configure a color scale.
	var customColorScale = anychart.scales.ordinalColor();
	customColorScale.ranges([
	{less: 3},
	{from: 4, to: 6},
	{greater: 7},
	]);
	customColorScale.colors(["lightgray", "#ffcc00", "#00ccff"]);

	// set the color scale as the color scale of the chart
	chart.colorScale(customColorScale);

	// configure the color range
	chart.colorRange().length("90%");

	// configure years
	chart.years().title().fontSize(30);

	// set the chart title
	chart.title().useHtml(true);
	chart.title("Calendar Chart: Color Scale (Ordinal)<br><br>" +
	"<span style='font-size:12; font-style:italic'>" +
	"GitHub Contributions</span>");

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

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