Radar Chart

by namlth

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://github.com/SteveSanderson/knockout-projections/blob/master/dist/knockout-projections.js"></script>
<script src="https://github.com/grofit/knockout.chart/blob/master/src/knockout.chart.js"></script>
<script src="https://github.com/grofit/knockout.chart/blob/master/libs/chart.js"></script>
<div id="line-example">
			<h2>Simple Line Chart Example</h2>
			<canvas id="some-simple-line-chart"
					data-bind="chart: { type: 'line', data: SimpleLineData }"></canvas>
			<p>The above chart is generated using the data in the view model and rendered into the canvas</p>
		</div>

		<div id="dynamic-doughnut-example">
			<h2>TRIPLE D - WUT WUT - Dynamic Doughnut Data!</h2>
			<canvas id="some-dynamic-doughnut-chart"
					data-bind="chart: { type: 'doughnut', data: DynamicDoughnutData, options: { observeChanges: true, throttle: 1000 } }"></canvas>
			<p>The above chart is generated dynamically using the data in the view model and rendered into the canvas</p>
			<p>If you change any of the values beneath the chart will update to reflect them every second</p>
			<label>Red</label><input type="number" data-bind="value: RedValue" />
			<label>Green</label><input type="number" data-bind="value: GreenValue" />
			<label>Yellow</label><input type="number" data-bind="value: YellowValue" />
</div>

JavaScript

function DummyViewModel()
			{
				this.SimpleLineData = {
					labels: ["January", "February", "March", "April", "May", "June", "July"],
					datasets: [
						{
							label: "Healthy People",
							backgroundColor: "rgba(220,220,220,0.2)",
							borderColor: "rgba(220,220,220,1)",
							pointColor: "rgba(220,220,220,1)",
							pointStrokeColor: "#fff",
							pointHighlightFill: "#fff",
							pointHighlightStroke: "rgba(220,220,220,1)",
							data: [65, 59, 80, 81, 56, 55, 40]
						},
						{
							label: "Ill People",
							backgroundColor: "rgba(151,187,205,0.2)",
							borderColor: "rgba(151,187,205,1)",
							pointColor: "rgba(151,187,205,1)",
							pointStrokeColor: "#fff",
							pointHighlightFill: "#fff",
							pointHighlightStroke: "rgba(151,187,205,1)",
							data: [28, 48, 40, 19, 86, 27, 90]
						}
					]
				};
				this.RedValue = ko.observable(300);
				this.GreenValue = ko.observable(50);
				this.YellowValue = ko.observable(100);
				this.DynamicDoughnutData = {
					labels: ["Red", "Green", "Yellow" ],
					datasets: [
						{
							data: [this.RedValue, this.GreenValue, this.YellowValue],
							backgroundColor: [
								"#FF6384",
								"#36A2EB",
								"#FFCE56"
							],
							hoverBackgroundColor: [
								"#FF6384",
								"#36A2EB",
								"#FFCE56"
							]
						}]
				};
			}
            ko.applyBindings(new DummyViewModel());