Soby Web Components
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Soby Pie 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> <link href="/media/css/soby.ui.components.css" rel="stylesheet" type="text/css" media="all" /> <script src="/media/js/soby.service.js"></script> <script src="/media/js/soby.ui.components.js"></script> <script src="/media/js/soby.ui.components.charts.js"></script> </head> <body> <div id="soby_ChartDiv" ></div> </body> </html>
var dataSet = new SobyChartDataset(); dataSet.Title = "Chart1"; dataSet.Type=SobyChartTypes.PieChart; dataSet.Data = [14, 10, 17, 35, 50, 20]; var pieChart = new SobyChart("#soby_ChartDiv", "Pie Chart", [dataSet], "There is no record found.", ["January", "February", "March", "April", "May", "June"]); pieChart.Label.Format = "$label - $value$ - $percentage%"; pieChart.Width = 600; pieChart.Height = 300; pieChart.Initialize();
This example displays all array values
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Soby Pie 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> <link href="/media/css/soby.ui.components.css" rel="stylesheet" type="text/css" media="all" /> <script src="/media/js/soby.service.js"></script> <script src="/media/js/soby.ui.components.js"></script> <script src="/media/js/soby.ui.components.charts.js"></script> </head> <body> <div id="soby_ChartDiv" data-width="600" data-height="300"> <div class='dataset' data-type="PieChart" data-title="Chart1" data-data="14;#10;#17;#35;#50;#20"></div> <div class='labels' data-labels="January;#February;#March;#April;#May;#June"></div> </div> </body> </html>
$("#soby_ChartDiv").sobychart();
This example displays all array values
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Soby Pie 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="PieChart" title="Chart1" data="14;#10;#17;#35;#50;#20"></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 Pie 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: "PieChart", title: "Chart1", data: "14;#10;#17;#35;#50;#20" }, { type: "PieChart", title: "Chart2", data: "14;#10;#17;#35;#50;#20" }], 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.