diff --git a/angularjs/Chart/Data-Markers.md b/angularjs/Chart/Data-Markers.md index cac73bd8..d0e0bda2 100644 --- a/angularjs/Chart/Data-Markers.md +++ b/angularjs/Chart/Data-Markers.md @@ -1,13 +1,13 @@ --- layout: post -title: Markers and data labels in Essential Javascript Chart -description: Learn how to add markers and data point labels to a Chart series. +title: Markers and data labels in Essential Javascript Chart | Syncfusion +description: Learn here about data markers support in Syncfusion Essential AngularJS Chart Control, its elements, and more. platform: AngularJS control: Chart documentation: ug --- -# Data Markers +# Data Markers in AngularJS Chart Data markers are used to provide information about the data point to the user. You can add a shape and label to adorn each data point. @@ -48,7 +48,7 @@ The following code example explains on how to enable series marker and add shape {% endhighlight %} -![](Data-Markers_images/Data-Markers_img1.png) +![AngularJS Chart add shapes](Data-Markers_images/Data-Markers_img1.png) @@ -84,7 +84,7 @@ The following code example illustrates this, {% endhighlight %} -![](Data-Markers_images/Data-Markers_img2.png) +![AngularJS Chart add image as maker](Data-Markers_images/Data-Markers_img2.png) ## Add labels @@ -120,7 +120,7 @@ The following code example shows how to enable data label and set its horizontal {% endhighlight %} -![](Data-Markers_images/Data-Markers_img3.png) +![AngularJS Chart add labels](Data-Markers_images/Data-Markers_img3.png) Label content can be formatted by using the template option. Inside the template, you can add the placeholder text *"point.x"* and *"point.y"* to display corresponding data points x & y value. @@ -168,7 +168,7 @@ The following code example shows how to add background shapes and set template t {% endhighlight %} -![](Data-Markers_images/Data-Markers_img4.png) +![AngularJS Chart add background shapes](Data-Markers_images/Data-Markers_img4.png) The appearance of the labels can be customized by using the `font` and `offset` options. The `offset` option is used to move the labels vertically. Also, labels can be rotated by using the `rotate` option. @@ -201,7 +201,7 @@ The following code example shows how to rotate datalabel text and customize the {% endhighlight %} -![](Data-Markers_images/Data-Markers_img5.png) +![AngularJS Chart rotates data label text](Data-Markers_images/Data-Markers_img5.png) You can position the label to the top, center or bottom position of the segment by using the `textPosition` option for the chart types such as column, bar, stacked bar, stacked column, 100% stacked bar, 100% stacked column, candle and OHLC. @@ -233,7 +233,7 @@ The following code example shows how to set textPosition to display data label i {% endhighlight %} -![](Data-Markers_images/Data-Markers_img6.png) +![AngularJS Chart set text position](Data-Markers_images/Data-Markers_img6.png) The label can be positioned inside or outside the perimeter of the series by using the `e-labelPosition` option for the chart types such as Pie and Doughnut, . @@ -274,17 +274,17 @@ The following code example shows how to set the *labelPosition*, {% endhighlight %} -![](Data-Markers_images/Data-Markers_img7.png) +![AngularJS Chart label position](Data-Markers_images/Data-Markers_img7.png) The following screenshot displays the labels when the `e-labelPosition` is set as *inside* position. -![](Data-Markers_images/Data-Markers_img8.png) +![AngularJS Chart inside](Data-Markers_images/Data-Markers_img8.png) The following screenshot displays the labels when the `e-labelPosition` is set as *outsideExtended* position. -![](Data-Markers_images/Data-Markers_img9.png) +![AngularJS Chart outside extended](Data-Markers_images/Data-Markers_img9.png) The label can be wrapped for pie, doughnut, funnel, and pyramid series by setting the enableWrap property. @@ -315,7 +315,7 @@ The label can be wrapped for pie, doughnut, funnel, and pyramid series by settin {% endhighlight %} -![](Data-Markers_images/Data-Markers_img13.png) +![AngularJS Chart setting enable wrap property](Data-Markers_images/Data-Markers_img13.png) ## Contrast Color for the data label @@ -409,7 +409,7 @@ When the data is provided by using the `e-points` option, you can add marker for {% endhighlight %} -![](Data-Markers_images/Data-Markers_img10.png) +![AngularJS Chart customize specific points](Data-Markers_images/Data-Markers_img10.png) When the data is bound to the series by using the `e-dataSource` option, you can customize the points in the `e-seriesrendering` event as illustrated in the following code example, @@ -459,7 +459,7 @@ When the data is bound to the series by using the `e-dataSource` option, you can {% endhighlight %} -![](Data-Markers_images/Data-Markers_img10.png) +![AngularJS Chart series rendering](Data-Markers_images/Data-Markers_img10.png) ## Connect Line @@ -496,7 +496,7 @@ This feature is used to connect label and data point by using a line. It can be {% endhighlight %} -![](Data-Markers_images/Data-Markers_img11.png) +![AngularJS Chart connect line](Data-Markers_images/Data-Markers_img11.png) ## Smart labels @@ -541,6 +541,6 @@ The following code example shows how to enable smart labels, {% endhighlight %} -![](Data-Markers_images/Data-Markers_img12.png) +![AngularJS Chart smart labels](Data-Markers_images/Data-Markers_img12.png) diff --git a/angularjs/ReportDesigner/Getting-Started.md b/angularjs/ReportDesigner/Getting-Started.md index 4a1dd80a..0f809445 100644 --- a/angularjs/ReportDesigner/Getting-Started.md +++ b/angularjs/ReportDesigner/Getting-Started.md @@ -1,13 +1,13 @@ --- -title: Getting started with report designer component -description: Rendering a basic report designer +title: Getting Started in AngularJS Reportdesigner Control | Syncfusion +description: Learn here about getting started with Syncfusion Essential AngularJS Reportedesigner Control, its elements, and more. platform: AngularJS control: Reportdesigner documentation: ug keywords: ejReportDesigner, ReportDesigner, js ReportDesigner --- -# Getting Started +# Getting Started with AngularJS Reportdesigner This section explains briefly about how to create a ReportDesigner in your web application with AngularJS. @@ -116,4 +116,4 @@ N> In the report designer service url, need to mention the controller name of th Run the sample application and the report designer control will render as like in the following screenshot. -![](Getting-Started_images/Getting-Started-img1.png) +![AngularJS Reportdesigner run the application](Getting-Started_images/Getting-Started-img1.png) diff --git a/angularjs/ReportViewer/Getting-Started.md b/angularjs/ReportViewer/Getting-Started.md index 0ed00aaf..4f239469 100644 --- a/angularjs/ReportViewer/Getting-Started.md +++ b/angularjs/ReportViewer/Getting-Started.md @@ -1,13 +1,13 @@ --- -title: Getting Started with ReportViewer component -description: getting started +title: Getting Started in AngularJS ReportViewer Control | Syncfusion +description: Learn here about getting started with Syncfusion Essential AngularJS ReportViewer Control, its elements, and more. platform: AngularJS control: ReportViewer documentation: ug keywords: ejReportViewer, ReportViewer, js ReportViewer --- -# Getting Started +# Getting Started with AngularJS ReportViewer This section explains briefly about how to create a ReportViewer in your web application with AngularJS. @@ -94,7 +94,7 @@ N> Default RDL Report will be rendered, which is used in the online service. You Run the sample application and you can see the ReportViewer on the page as displayed in the following screenshot. -![](Getting-Started_images/Getting-Started_img1.png) +![AngularJS ReportViewer run the application](Getting-Started_images/Getting-Started_img1.png) ReportViewer with Grouping Aggregate Report {:.caption} @@ -126,7 +126,7 @@ N> The credential information for Report Server is provided in online service. 2.Run the application and you can see the ReportViewer on the page as displayed in the following screenshot. - ![](Getting-Started_images/Getting-Started_img2.png) + ![AngularJS ReportViewer loads SSRS server reports](Getting-Started_images/Getting-Started_img2.png) Report from SSRS {:.caption} @@ -169,7 +169,7 @@ N> Default RDLC Report will be rendered, which is used in the online service. Yo 2.Run the application and you can see the ReportViewer on the page as displayed in the following screenshot. - ![](Getting-Started_images/Getting-Started_img3.png) + ![AngularJS ReportViewer loads RDLC reports ](Getting-Started_images/Getting-Started_img3.png) Area Chart RDLC Report {:.caption} diff --git a/angularjs/RichTextEditor/Getting-Started.md b/angularjs/RichTextEditor/Getting-Started.md index e26349ac..41bc6f27 100644 --- a/angularjs/RichTextEditor/Getting-Started.md +++ b/angularjs/RichTextEditor/Getting-Started.md @@ -1,14 +1,14 @@ --- layout: post title: Getting-Started | RichTextEditor | JavaScript | Syncfusion -description: getting started +description: Learn here all about getting started with Syncfusion AngularJS RichTextEditor control, its elements, and more. platform: AngularJS control: RichTextEditor Control documentation: ug keywords: ejrte, rte, js rte --- -# Getting Started +# Getting Started with AngularJS RichTextEditor This section helps to understand the getting started of RTE control with the step-by-step instruction. @@ -72,7 +72,7 @@ To render the ejRTE using angular directive, we need to inject the ej angular di The following screenshot displays a RTE widget. -![](/js/RichTextEditor/Getting-Started_images/Getting-Started_img1.png) +![AngularJS RichTextEditor initialize](Getting-Started_images/Getting-Started_img1.png) ## Toolbar–Configuration @@ -98,7 +98,7 @@ You can configure a toolbar with the tools as your application requires. The following screenshot displays a RTE widget. -![](/js/RichTextEditor/Getting-Started_images/Getting-Started_img2.png) +![AngularJS RichTextEditor toolbar configuration](Getting-Started_images/Getting-Started_img2.png) ## Setting and Getting Content @@ -123,4 +123,4 @@ You can set the content of the editor as follows. The following screenshot displays a RTE widget. -![](/js/RichTextEditor/Getting-Started_images/Getting-Started_img3.png) \ No newline at end of file +![AngularJS RichTextEditor setting and getting content](Getting-Started_images/Getting-Started_img3.png) \ No newline at end of file diff --git a/angularjs/TimePicker/Validation.md b/angularjs/TimePicker/Validation.md index 96786be8..f06c220f 100644 --- a/angularjs/TimePicker/Validation.md +++ b/angularjs/TimePicker/Validation.md @@ -1,13 +1,13 @@ --- layout: post -title: Validation | TimePicker | AngularJS | Syncfusion -description: validation +title: Validation in AngularJS TimePicker Control | Syncfusion +description: Learn here all about validation support in Syncfusion AngularJS TimePicker control, its elements, and more. platform: AngularJS control: TimePicker documentation: ug --- -# Validation +# Validation in AngularJS TimePicker **EJ AngularJS TimePicker** is a form control and can be used within **ng-form**. This will support with the **AngularJS validation** and update the AngularJS validation related built-in classes to element based on current state of the element. @@ -94,10 +94,10 @@ Add the following code in your script section to validate the form with **TimePi Run the above code to render the following output. -![](Validation_images/Validation_images1.png) +![AngularJS TimePicker validation](Validation_images/Validation_images1.png) -![](Validation_images/Validation_images2.png) +![AngularJS TimePicker provides classes and properties on the form and its inputs](Validation_images/Validation_images2.png) -![](Validation_images/Validation_images3.png) \ No newline at end of file +![AngularJS TimePicker added script section to validate the form](Validation_images/Validation_images3.png) \ No newline at end of file