Soby Web Components
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Soby Bar 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.ui.components.min.js"></script> </head> <body> <div id="soby_ChartDiv" ></div> </body> </html>
var dataSet1 = new SobyChartDataset(); dataSet1.Title = "Chart1"; dataSet1.Type=SobyChartTypes.ColumnChart; dataSet1.Data = [1, 10, 70, 35, 50, 100]; var dataSet2 = new SobyChartDataset(); dataSet2.Title = "Chart2"; dataSet2.Type=SobyChartTypes.ColumnChart; dataSet2.Data = [12, 15, 17, 71, 22, 50]; var dataSet3 = new SobyChartDataset(); dataSet3.Type=SobyChartTypes.LineChart; dataSet3.Title = "Chart3"; dataSet3.Data = [21, 51, 31, 6, 62, 24]; var barChart = new SobyChart("#soby_ChartDiv", "Bar Chart", [dataSet1, dataSet2, dataSet3], "There is no record found.", ["January", "February", "March", "April", "May", "June"]); barChart.Width = 600; barChart.Height = 300; barChart.Legend.Position = SobyChartElementPosition.Top; barChart.Legend.VerticalAligment = SobyChartVerticalAligment.Bottom; barChart.Legend.HorizontalAligment = SobyChartHorizontalAligment.Right; barChart.Initialize();
This example displays all array values
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Soby Bar 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.ui.components.min.js"></script> </head> <body> <div id="soby_ChartDiv" data-width="600" data-height="300"> <div class='dataset' data-type="ColumnChart" data-title="Chart1" data-data="1;#10;#70;#35;#50;#100"></div> <div class='dataset' data-type="ColumnChart" data-title="Chart2" data-data="12;#15;#17;#71;#22;#50"></div> <div class='dataset' data-type="LineChart" data-title="Chart3" data-data="21;#51;#31;#6;#62;#24"></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 Bar 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="ColumnChart" title="Chart1" data="1;#10;#70;#35;#50;#100"></dataset> <dataset type="ColumnChart" title="Chart2" data="12;#15;#17;#71;#22;#50"></dataset> <dataset type="LineChart" title="Chart3" data="21;#51;#31;#6;#62;#24"></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 Bar 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: "ColumnChart", title: "Chart1", data: "1;#10;#70;#35;#50;#100" } , { type: "ColumnChart", title: "Chart2", data: "12;#15;#17;#71;#22;#50" } , { type: "LineChart", title: "Chart3", data: "21;#51;#31;#6;#62;#24" }], 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.