Doughnut Chart

Doughnut Chart Example

Javascript
jQuery
VueJS
AngularJS
ReactJS

var dataSet1 = new SobyChartDataset(); dataSet1.Title = "Chart1"; dataSet1.Type=SobyChartTypes.DoughnutChart; dataSet1.Data = [1, 10, 70, 35, 50, 100]; var doughnutChart = new SobyChart("#soby_ChartDiv", "Doughnut Chart", [dataSet1], "There is no record found.", ["January", "February", "March", "April", "May", "June"]); doughnutChart.Width = 600; doughnutChart.Height = 300; doughnutChart.Legend.Position = SobyChartElementPosition.Top; doughnutChart.Legend.VerticalAligment = SobyChartVerticalAligment.Bottom; doughnutChart.Legend.HorizontalAligment = SobyChartHorizontalAligment.Right; doughnutChart.Initialize();

This example displays all array values

$("#soby_ChartDiv").sobychart();

This example displays all array values

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Soby Doughnut Chart Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="/media/js/jquery-3.1.0.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2" type="text/javascript"></script> <link href="/media/css/soby.ui.components.css" rel="stylesheet" type="text/css" media="all" /> <script src="/media/js/soby.ui.components.min.js"></script> <script src="/media/js/soby.ui.components.extension.vue.js"></script> </head> <body> <div id="soby_ChartVueDiv"> <soby-chart id="soby_ChartDiv" width="600" height="300"> <dataset type="DoughnutChart" title="Chart1" data="1;#10;#70;#35;#50;#100"></dataset> <labels labels="January;#February;#March;#April;#May;#June"></labels> </soby-chart> </div> </body> </html>

var app = new Vue({ el: '#soby_ChartVueDiv' })

This example displays all array values

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Soby Doughnut Chart Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="/media/js/jquery-3.1.0.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js" type="text/javascript"></script> <link href="/media/css/soby.ui.components.css" rel="stylesheet" type="text/css" media="all" /> <script src="/media/js/soby.ui.components.min.js"></script> <script language="javascript"> (function (angular) { 'use strict'; angular.module('sobyChartApp', []).controller('MainCtrl', function MainCtrl($scope) { this.chart = { id: 'sobyChartDiv_' + soby_guid(), width: 400, height: 200, datasets: [{ type: "DoughnutChart", title: "Chart1", data: "1;#10;#70;#35;#50;#100" }], labels: "January;#February;#March;#April;#May;#June" }; var chartId = this.chart.id; setTimeout(function () { sobyGenerateChartFromHtmlElement(chartId); }, 1000); }); })(window.angular); </script> <script src="/media/js/soby.ui.components.extension.angular.js"></script> </head> <body ng-app="sobyChartApp" > <div ng-controller="MainCtrl as ctrl" > <soby-chart chart="ctrl.chart"></soby-chart> </div> </body> </html>

This example displays all array values

Not implemented yet

Want to learn more about the chart component? Check out the API documentation.