diff --git a/Jenkinsfile b/Jenkinsfile index 0dbab85f3..f17a591c1 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -17,7 +17,7 @@ String platform='ASP.NET MVC'; { checkout scm - def branchCommit = '"' + 'https://api.gitlab.com/repos/syncfusion-content/asp.netmvc-docs/pulls/' + env.pullRequestId + '/files' + def branchCommit = '"' + 'https://api.github.com/repos/syncfusion-content/asp.netmvc-docs/pulls/' + env.pullRequestId + '/files' String branchCommitDetails = bat returnStdout: true, script: 'curl -H "Accept: application/vnd.github.v3+json" -u SyncfusionBuild:' + env.GithubBuildAutomation_PrivateToken + " " + branchCommit def ChangeFiles= branchCommitDetails.split('"filename": '); diff --git a/aspnetmvc/Chart/Chart-Types.md b/aspnetmvc/Chart/Chart-Types.md index 3041dd8b8..4994eb48f 100644 --- a/aspnetmvc/Chart/Chart-Types.md +++ b/aspnetmvc/Chart/Chart-Types.md @@ -1,13 +1,13 @@ --- layout: post title: Chart types |Chart | ASP.NET MVC | Syncfusion -description: What are the different types of Charts available in Essential JavaScript Chart. +description: Learn here all about Chart types support in Syncfusion ASP.NET MVC Chart control, its elements and more. platform: ejmvc control: Chart documentation: ug --- -# ChartTypes +# Chart Types in ASP.NET MVC Chart ## Line Chart @@ -31,7 +31,7 @@ To render a Line Chart, set the series **Type** as **Line** in the chart series. {% endhighlight %} -![](Chart-Types_images/Chart-Types_img1.png) +![ASP.NET MVC Chart Types Line Chart](Chart-Types_images/Chart-Types_img1.png) [Click](http://mvc.syncfusion.com/demos/web/chart/default) here to view the Line Chart online demo sample. @@ -59,7 +59,7 @@ To change the width of the line segment, you can use the **Width** property in t {% endhighlight %} -![](Chart-Types_images/Chart-Types_img2.png) +![ASP.NET MVC Chart Types Changing the line width](Chart-Types_images/Chart-Types_img2.png) ### Dashed lines @@ -83,7 +83,7 @@ To render the line series with dotted lines, you can use the **DashArray** optio {% endhighlight %} -![](Chart-Types_images/Chart-Types_img3.png) +![ASP.NET MVC Chart Types Dashed lines](Chart-Types_images/Chart-Types_img3.png) ### Changing the line cap @@ -109,7 +109,7 @@ For customizing the start and end caps of the line segment, you can use the **Li {% endhighlight %} -![](Chart-Types_images/Chart-Types_img4.png) +![ASP.NET MVC Chart Types Changing the line cap](Chart-Types_images/Chart-Types_img4.png) ### Changing the line join @@ -136,7 +136,7 @@ You can use the **LineJoin** property to specify how two intersecting line segme {% endhighlight %} -![](Chart-Types_images/Chart-Types_img5.png) +![ASP.NET MVC Chart Types Changing the line join](Chart-Types_images/Chart-Types_img5.png) ### MultiColor Line @@ -160,7 +160,7 @@ You can change the color of the line segments by using the *Fill* property of th {% endhighlight %} -![](Chart-Types_images/Chart-Types_img81.png) +![ASP.NET MVC Chart Types Multicolor line](Chart-Types_images/Chart-Types_img81.png) [Click](http://mvc.syncfusion.com/demos/web/chart/multicolor) here to view the MultiColor Line Chart online demo sample. @@ -187,7 +187,7 @@ To render a Step Line Chart, set the series Type as **StepLine"** in the chart s {% endhighlight %} -![](Chart-Types_images/Chart-Types_img6.png) +![ASP.NET MVC Chart Types Step line chart](Chart-Types_images/Chart-Types_img6.png) [Click](http://mvc.syncfusion.com/demos/web/chart/stepline) here to view the Step Line Chart online demo sample. @@ -213,7 +213,7 @@ To change the line width, you can use the **Width** property. {% endhighlight %} -![](Chart-Types_images/Chart-Types_img7.png) +![ASP.NET MVC Chart Types Changing the line width](Chart-Types_images/Chart-Types_img7.png) ### Dashed lines @@ -237,7 +237,7 @@ To render the step line series with dotted lines, you can use the DashArray opti {% endhighlight %} -![](Chart-Types_images/Chart-Types_img8.png) +![ASP.NET MVC Chart Types Dashed lines](Chart-Types_images/Chart-Types_img8.png) ### Changing the line cap @@ -263,7 +263,7 @@ For customizing the start and end caps of the line segment, you can use the Line {% endhighlight %} -![](Chart-Types_images/Chart-Types_img9.png) +![ASP.NET MVC Chart Types Changing the line cap](Chart-Types_images/Chart-Types_img9.png) ### Changing the line join @@ -290,7 +290,7 @@ You can use the LineJoin property to specify how two intersecting line segments {% endhighlight %} -![](Chart-Types_images/Chart-Types_img10.png) +![ASP.NET MVC Chart Types Changing the line join](Chart-Types_images/Chart-Types_img10.png) ## Area Chart @@ -316,7 +316,7 @@ To render an Area chart, you can specify the series Type as **Area** in the char {% endhighlight %} -![](Chart-Types_images/Chart-Types_img11.png) +![ASP.NET MVC Chart Types Area Chart](Chart-Types_images/Chart-Types_img11.png) [Click](http://mvc.syncfusion.com/demos/web/chart/area) here to view the Area Chart online demo. @@ -356,7 +356,7 @@ Since the RangeArea series requires two y values for a point, you have to add th {% endhighlight %} -![](Chart-Types_images/Chart-Types_img12.png) +![Asp.NET MVC Chart Types Range Area Chart](Chart-Types_images/Chart-Types_img12.png) [Click](http://mvc.syncfusion.com/demos/web/chart/rangearea) here to view Range Area Chart online demo. @@ -386,7 +386,7 @@ To render a Step Area Chart, set the Type as **StepArea** in the chart series. T {% endhighlight %} -![](Chart-Types_images/Chart-Types_img13.png) +![ASP.NET MVC Chart Types Step Area Chart](Chart-Types_images/Chart-Types_img13.png) [Click](http://mvc.syncfusion.com/demos/web/chart/steparea) here to view Step Area Chart online demo. @@ -417,7 +417,7 @@ To render a Spline Area Chart, set the Type as **SplineArea** in the chart serie {% endhighlight %} -![](Chart-Types_images/Chart-Types_img14.png) +![ASP.NET MVC Chart Types Spline Area Chart](Chart-Types_images/Chart-Types_img14.png) [Click](http://mvc.syncfusion.com/demos/web/chart/splinearea) here to view Spline Area Chart online demo. @@ -447,7 +447,7 @@ To render a Stacked Area Chart, set the Type as **StackingArea** in the chart se {% endhighlight %} -![](Chart-Types_images/Chart-Types_img15.png) +![ASP.NET MVC Chart Types Stacked Area Chart](Chart-Types_images/Chart-Types_img15.png) [Click](http://mvc.syncfusion.com/demos/web/chart/stackingarea) here to view Stacked Area Chart online demo. @@ -478,7 +478,7 @@ To render a 100% Stacked Area Chart, set the Type as **StackingArea100** in the {% endhighlight %} -![](Chart-Types_images/Chart-Types_img16.png) +![ASP.NET MVC Chart Types 100 Stacked Area Chart](Chart-Types_images/Chart-Types_img16.png) [Click](http://mvc.syncfusion.com/demos/web/chart/stackingarea100) here to view 100% Stacked Area Chart online demo. @@ -509,7 +509,7 @@ To render a Column Chart, set the Type as **Column** in the chart series. To cha {% endhighlight %} -![](Chart-Types_images/Chart-Types_img17.png) +![ASP.NET MVC Chart Types Column Chart](Chart-Types_images/Chart-Types_img17.png) [Click](http://mvc.syncfusion.com/demos/web/chart/column) here to view Column Chart demo. @@ -539,7 +539,7 @@ You can change the color of a column by using the Fill property of the point. {% endhighlight %} -![](Chart-Types_images/Chart-Types_img18.png) +![ASP.NET MVC Chart Types Changing point color](Chart-Types_images/Chart-Types_img18.png) ### Column width customization @@ -562,7 +562,7 @@ N> Width of a column also depends upon the *ColumnSpacing* property, because *Co {% endhighlight %} -![](Chart-Types_images/Chart-Types_img88.png) +![ASP.NET MVC Chart Types Column width customization](Chart-Types_images/Chart-Types_img88.png) ### Column with rounded corners Corners of the column chart can be customized by setting value to the **CornerRadius** property. @@ -575,7 +575,7 @@ Corners of the column chart can be customized by setting value to the **CornerRa {% endhighlight %} -![](Chart-Types_images/Chart-Types_img90.png) +![ASP.NET MVC Chart Types Column with rounded corners](Chart-Types_images/Chart-Types_img90.png) ### Spacing between column series @@ -598,7 +598,7 @@ N> Space between columns will also affect the width of the column. For example, {% endhighlight %} -![](Chart-Types_images/Chart-Types_img89.png) +![ASP.NET MVC Chart Types Spacing between column series](Chart-Types_images/Chart-Types_img89.png) ### Cylindrical Chart @@ -627,7 +627,7 @@ The following chart types can be rendered as cylinder in both 2D and in 3D view. {% endhighlight %} -![](Chart-Types_images/Chart-Types_img91.png) +![ASP.NET MVC Chart Types Cylindrical Chart](Chart-Types_images/Chart-Types_img91.png) ## RangeColumn Chart @@ -662,7 +662,7 @@ Since, the RangeColumn series requires two y values for a point, add the High an {% endhighlight %} -![](Chart-Types_images/Chart-Types_img19.png) +![ASP.NET MVC Chart Types RangeColumn Chart](Chart-Types_images/Chart-Types_img19.png) [Click](http://mvc.syncfusion.com/demos/web/chart/rangecolumn) here to view Range Column Chart online demo. @@ -691,7 +691,7 @@ To change the color of a range column, you can use the Fill property of point. {% endhighlight %} -![](Chart-Types_images/Chart-Types_img20.png) +![ASP.NET MVC Chart Types Changing point color](Chart-Types_images/Chart-Types_img20.png) ## Stacked Column Chart @@ -719,7 +719,7 @@ To render a Stacked Column Chart, set the Type as **StackingColumn** in the char {% endhighlight %} -![](Chart-Types_images/Chart-Types_img21.png) +![ASP.NET MVC Chart Types Stacked Column Chart](Chart-Types_images/Chart-Types_img21.png) [Click](http://mvc.syncfusion.com/demos/web/chart/stackingcolumn) here to view Stacked Column Chart online demo. @@ -753,7 +753,7 @@ You can use the **StackingGroup** property to group the stacked columns. Columns {% endhighlight %} -![](Chart-Types_images/Chart-Types_img22.png) +![ASP.NET MVC Chart Types Cluster/Group Stacked Column](Chart-Types_images/Chart-Types_img22.png) ### Change a point color @@ -780,7 +780,7 @@ To change the color of a stacking column, you can use the Fill property of the p {% endhighlight %} -![](Chart-Types_images/Chart-Types_img23.png) +![ASP.NET MVC Chart Types Changing point color](Chart-Types_images/Chart-Types_img23.png) ## 100% Stacked Column Chart @@ -806,7 +806,7 @@ To render a 100% Stacked Column Chart, set the Type as **StackingColumn100** in {% endhighlight %} -![](Chart-Types_images/Chart-Types_img24.png) +![ASP.NET MVC Chart Types 100 Stacked Column Chart](Chart-Types_images/Chart-Types_img24.png) [Click](http://mvc.syncfusion.com/demos/web/chart/stackingcolumn100) here to view 100% Stacked Column Chart online demo. @@ -841,7 +841,7 @@ By using the **StackingGroup** property, you can group the 100% stacking columns {% endhighlight %} -![](Chart-Types_images/Chart-Types_img25.png) +![ASP.NET MVC Chart Types Cluster/Group 100 Stacked Columns](Chart-Types_images/Chart-Types_img25.png) ### Change a point color @@ -867,7 +867,7 @@ To change the color of a 100% stacking column, you can use the Fill property of {% endhighlight %} -![](Chart-Types_images/Chart-Types_img26.png) +![ASP.NET MVC Chart Types Changing point color](Chart-Types_images/Chart-Types_img26.png) ## Bar Chart @@ -895,7 +895,7 @@ To render a bar Chart, set the Type as **Bar** in the chart series. To change th {% endhighlight %} -![](Chart-Types_images/Chart-Types_img27.png) +![ASP.NET MVC Chart Types Bar Chart](Chart-Types_images/Chart-Types_img27.png) [Click](http://mvc.syncfusion.com/demos/web/chart/bar) here to view Bar Chart demo. @@ -925,7 +925,7 @@ By using the Fill property of the point, you can change the specific point of th {% endhighlight %} -![](Chart-Types_images/Chart-Types_img28.png) +![ASP.NET MVC Chart Types Changing the color of bar](Chart-Types_images/Chart-Types_img28.png) ## Stacked Bar Chart @@ -953,7 +953,7 @@ To render a Stacked Bar Chart, set the Type as **StackingBar** in the chart seri {% endhighlight %} -![](Chart-Types_images/Chart-Types_img29.png) +![ASP.NET MVC Chart Types Stacked Bar Chart](Chart-Types_images/Chart-Types_img29.png) [Click](http://mvc.syncfusion.com/demos/web/chart/stackingbar) here to view Stacked Bar Chart online demo. @@ -988,7 +988,7 @@ You can use the **StackingGroup** property to group the stacking bars with the s {% endhighlight %} -![](Chart-Types_images/Chart-Types_img30.png) +![ASP.NET MVC Chart Types Cluster/Group Stacked Bars](Chart-Types_images/Chart-Types_img30.png) ### Change a point color @@ -1015,7 +1015,7 @@ You can change the color of a stacking bar by using the Fill property of the poi {% endhighlight %} -![](Chart-Types_images/Chart-Types_img31.png) +![ASP.NET MVC Chart Types Changing point color](Chart-Types_images/Chart-Types_img31.png) ## 100% Stacked Bar Chart @@ -1043,7 +1043,7 @@ To render a 100% Stacked Bar Chart, set the Type as **StackingBar100** in the ch {% endhighlight %} -![](Chart-Types_images/Chart-Types_img32.png) +![ASP.NET MVC Chart Types 100 Stacked Bar Chart](Chart-Types_images/Chart-Types_img32.png) [Click](http://mvc.syncfusion.com/demos/web/chart/stackingbar100) here to view 100% Stacked Bar Chart online demo. @@ -1073,7 +1073,7 @@ By using the StackingGroup property, you can group the 100% stacking bars with t {% endhighlight %} -![](Chart-Types_images/Chart-Types_img33.png) +![ASP.NET MVC Chart Types StackingGroup property](Chart-Types_images/Chart-Types_img33.png) ### Change a point color @@ -1100,7 +1100,7 @@ To change the color of a 100% stacking bar, you can use the Fill property of the {% endhighlight %} -![](Chart-Types_images/Chart-Types_img34.png) +![ASP.NET MVC Chart Types Changing point color](Chart-Types_images/Chart-Types_img34.png) ## Spline Chart @@ -1127,7 +1127,7 @@ To render a Spline Chart, set the Type as **Spline** in the chart series. To cha {% endhighlight %} -![](Chart-Types_images/Chart-Types_img35.png) +![ASP.NET MVC Chart Types Spline Chart](Chart-Types_images/Chart-Types_img35.png) [Click](http://mvc.syncfusion.com/demos/web/chart/spline) here to view the Spline Chart online demo sample. @@ -1158,7 +1158,7 @@ To change the spline segment width, you can use the Width property of the series {% endhighlight %} -![](Chart-Types_images/Chart-Types_img36.png) +![ASP.NET MVC Chart Types Changing the Spline width](Chart-Types_images/Chart-Types_img36.png) ### Dashed lines @@ -1186,7 +1186,7 @@ To render the spline series with dotted lines, you can use the DashArray option {% endhighlight %} -![](Chart-Types_images/Chart-Types_img37.png) +![ASP.NET MVC Chart Types Dashed lines](Chart-Types_images/Chart-Types_img37.png) ## Pie Chart @@ -1215,7 +1215,7 @@ You can create a pie chart by setting the series Type as **Pie** in the chart se {% endhighlight %} -![](Chart-Types_images/Chart-Types_img38.png) +![ASP.NET MVC Chart Types Pie Chart](Chart-Types_images/Chart-Types_img38.png) [Click](http://mvc.syncfusion.com/demos/web/chart/pie) here to view the Pie chart online demo sample. @@ -1246,7 +1246,7 @@ You can use the **PieCoefficient** property to change the diameter of the Pie ch {% endhighlight %} -![](Chart-Types_images/Chart-Types_img39.png) +![ASP.NET MVC Chart Types Changing Pie Size](Chart-Types_images/Chart-Types_img39.png) ### Explode a pie segment @@ -1274,7 +1274,7 @@ You can explode a pie segment on the chart load by using the **ExplodeIndex** of {% endhighlight %} -![](Chart-Types_images/Chart-Types_img40.png) +![ASP.NET MVC Chart Types Exploding a Pie segment](Chart-Types_images/Chart-Types_img40.png) ### Explode all the segments @@ -1302,7 +1302,7 @@ To explode all the segments of the Pie chart, you can enable the **ExplodeAll** {% endhighlight %} -![](Chart-Types_images/Chart-Types_img41.png) +![ASP.NET MVC Chart Types Exploding all segments](Chart-Types_images/Chart-Types_img41.png) ### Explode a pie segment on mouse over @@ -1330,7 +1330,7 @@ To explode a pie segment on a mouse over, you can enable the **Explode** propert {% endhighlight %} -![](Chart-Types_images/Chart-Types_img42.png) +![ASP.NET MVC Chart Types Exploding a pie segment on mouse over](Chart-Types_images/Chart-Types_img42.png) ### Sector of Pie @@ -1358,7 +1358,7 @@ EjChart allows you to render all the data points/segments in the semi-pie, quart {% endhighlight %} -![](Chart-Types_images/Chart-Types_img43.png) +![ASP.NET MVC Chart Types Sector of Pie](Chart-Types_images/Chart-Types_img43.png) [Click](http://mvc.syncfusion.com/demos/web/chart/semipie) here to view the Semi Pie Chart online demo sample. @@ -1390,7 +1390,7 @@ To create a Doughnut chart, you can specify the series Type as **Doughnut** in t {% endhighlight %} -![](Chart-Types_images/Chart-Types_img44.png) +![ASP.NET MVC Chart Types Doughnut Chart](Chart-Types_images/Chart-Types_img44.png) [Click](http://mvc.syncfusion.com/demos/web/chart/doughnut) here to view the Doughnut Chart online demo sample. @@ -1420,7 +1420,7 @@ You can change the doughnut chart inner radius by using the **DoughnutCoefficien {% endhighlight %} -![](Chart-Types_images/Chart-Types_img45.png) +![ASP.NET MVC Chart Types Changing Doughnut inner radius](Chart-Types_images/Chart-Types_img45.png) ### Change the doughnut size @@ -1448,7 +1448,7 @@ You can use the **DoughnutSize** property to change the diameter of the Doughnut {% endhighlight %} -![](Chart-Types_images/Chart-Types_img46.png) +![ASP.NET MVC Chart Types Changing the Doughnut size](Chart-Types_images/Chart-Types_img46.png) ### Explode a doughnut segment @@ -1476,7 +1476,7 @@ To explode a specific doughnut segment, set the index to be exploded by using th {% endhighlight %} -![](Chart-Types_images/Chart-Types_img47.png) +![ASP.NET MVC Chart Types Exploding a doughnut segment](Chart-Types_images/Chart-Types_img47.png) ### Explode all the segments @@ -1504,7 +1504,7 @@ To explode all the segments, you can enable the **ExplodeAll** property of the s {% endhighlight %} -![](Chart-Types_images/Chart-Types_img48.png) +![ASP.NET MVC Chart Types Exploding all the segments](Chart-Types_images/Chart-Types_img48.png) ### Explode a doughnut segment on mouse over @@ -1532,7 +1532,7 @@ To explode a doughnut segment on a mouse over, you can enable the **Explode** pr {% endhighlight %} -![](Chart-Types_images/Chart-Types_img49.png) +![ASP.NET MVC Chart Types Exploding a doughnut segment on mouse over](Chart-Types_images/Chart-Types_img49.png) ### Sector of Doughnut @@ -1561,7 +1561,7 @@ EjChart allows you to render all the data points/segments in the semi-doughnut, {% endhighlight %} -![](Chart-Types_images/Chart-Types_img50.png) +![ASP.NET MVC Chart Types Sector of Doughnut](Chart-Types_images/Chart-Types_img50.png) [Click](http://mvc.syncfusion.com/demos/web/chart/semipie) here to view the Semi Doughnut Chart online demo sample. @@ -1594,12 +1594,12 @@ EjChart provides support to render more than one series in pie and in doughnut c **Multiple Pie** -![](Chart-Types_images/Chart-Types_img82.png) +![ASP.NET MVC Chart Types Multiple Pie Chart](Chart-Types_images/Chart-Types_img82.png) **Multiple Doughnut** -![](Chart-Types_images/Chart-Types_img83.png) +![ASP.NET MVC Chart Types Multiple Doughnut](Chart-Types_images/Chart-Types_img83.png) [Click](http://mvc.syncfusion.com/demos/web/chart/multiplepie) here to view the Multiple Pie chart online demo sample. @@ -1610,12 +1610,12 @@ In the Multiple Pie chart, the start and end angle property is also supported. **Sector of Multiple Pie** -![](Chart-Types_images/Chart-Types_img84.png) +![ASP.NET MVC Chart Types Sector of Mutiple Pie](Chart-Types_images/Chart-Types_img84.png) **Sector of Multiple Doughnut** -![](Chart-Types_images/Chart-Types_img85.png) +![ASP.NET MVC Chart Types Sector of Multiple Doughnut](Chart-Types_images/Chart-Types_img85.png) ## Pyramid Chart @@ -1643,7 +1643,7 @@ To create a Pyramid chart, you can specify the series Type as **Pyramid** in the {% endhighlight %} -![](Chart-Types_images/Chart-Types_img51.png) +![ASP.NET MVC Chart Types Pyramid Chart](Chart-Types_images/Chart-Types_img51.png) [Click](http://mvc.syncfusion.com/demos/web/chart/pyramid) here to view the Pyramid Chart online demo sample. @@ -1673,7 +1673,7 @@ Pyramid mode has two types, *Linear* and *Surface* respectively. The default **P {% endhighlight %} -![](Chart-Types_images/Chart-Types_img52.png) +![ASP.NET MVC Chart Types Pyramid Mode](Chart-Types_images/Chart-Types_img52.png) ### Gap between the segments @@ -1700,7 +1700,7 @@ You can control the gap between the segments by using the **GapRatio** option of {% endhighlight %} -![](Chart-Types_images/Chart-Types_img53.png) +![ASP.NET MVC Chart Types Gap between the segments](Chart-Types_images/Chart-Types_img53.png) ### Explode a pyramid segment @@ -1728,7 +1728,7 @@ You can explode a pyramid segment on the chart load by using the **ExplodeIndex* {% endhighlight %} -![](Chart-Types_images/Chart-Types_img54.png) +![ASP.NET MVC Chart Types Exploding a pyramid segment](Chart-Types_images/Chart-Types_img54.png) ## Funnel Chart @@ -1756,7 +1756,7 @@ You can create a funnel chart by setting the series Type as **Funnel** in the ch {% endhighlight %} -![](Chart-Types_images/Chart-Types_img55.png) +![ASP.NET MVC Chart Types Funnel Chart](Chart-Types_images/Chart-Types_img55.png) [Click](http://mvc.syncfusion.com/demos/web/chart/funnel) here to view the Funnel Chart online demo sample. @@ -1787,7 +1787,7 @@ Funnel segments height and width is calculated from the chart size, by default. {% endhighlight %} -![](Chart-Types_images/Chart-Types_img56.png) +![ASP.NET MVC Chart Types Changing the funnel width and height](Chart-Types_images/Chart-Types_img56.png) ### Explode a funnel segment @@ -1815,7 +1815,7 @@ You can explode a funnel segment on the chart load by using the **ExplodeIndex** {% endhighlight %} -![](Chart-Types_images/Chart-Types_img57.png) +![ASP.NET MVC Chart Types Exploding a funnel segment](Chart-Types_images/Chart-Types_img57.png) ## Bubble Chart @@ -1861,7 +1861,7 @@ To create a Bubble chart, you can set the series Type as **Bubble** in the chart {% endhighlight %} -![](Chart-Types_images/Chart-Types_img58.png) +![ASP.NET MVC Chart Types Bubble Chart](Chart-Types_images/Chart-Types_img58.png) [Click](http://mvc.syncfusion.com/demos/web/chart/bubble) here to view the Bubble Chart online demo sample. @@ -1891,7 +1891,7 @@ To create a Scatter chart, you can set the series Type as **Scatter** in the cha {% endhighlight %} -![](Chart-Types_images/Chart-Types_img59.png) +![ASP.NET MVC Chart Types Scatter](Chart-Types_images/Chart-Types_img59.png) [Click](http://mvc.syncfusion.com/demos/web/chart/scatter) here to view the Scatter Chart online demo sample. @@ -1922,7 +1922,7 @@ You can change the scatter size by using the **Size** property of the series mar {% endhighlight %} -![](Chart-Types_images/Chart-Types_img60.png) +![ASP.NET MVC Chart Types Customize the scatter chart](Chart-Types_images/Chart-Types_img60.png) ## HiLoOpenClose Chart  @@ -1970,7 +1970,7 @@ To create a HiLoOpenClose chart, you can set the series Type as **HiloOpenClose* {% endhighlight %} -![](Chart-Types_images/Chart-Types_img61.png) +![ASP.NET MVC Chart Types HiLoOpenClose Chart](Chart-Types_images/Chart-Types_img61.png) [Click](http://mvc.syncfusion.com/demos/web/chart/hiloopenclose) here to view the HiLoOpenClose Chart online demo sample. @@ -2001,7 +2001,7 @@ You can change the HiLoOpenClose chart **DrawMode** to *Open, Close* or *Both*. {% endhighlight %} -![](Chart-Types_images/Chart-Types_img62.png) +![ASP.NET MVC Chart Types DrawMode](Chart-Types_images/Chart-Types_img62.png) ### Bull and Bear Color @@ -2030,7 +2030,7 @@ HiLoOpenClose chart **BullFillColor** is used to specify a fill color for the se {% endhighlight %} -![](Chart-Types_images/Chart-Types_img63.png) +![ASP.NET MVC Chart Types Bull and Bear Color](Chart-Types_images/Chart-Types_img63.png) ## Candle @@ -2079,7 +2079,7 @@ You can create a Candle chart by specifying the series Type as **Candle** in the {% endhighlight %} -![](Chart-Types_images/Chart-Types_img64.png) +![ASP.NET MVC Chart Types Candle](Chart-Types_images/Chart-Types_img64.png) [Click](http://mvc.syncfusion.com/demos/web/chart/candle) here to view the Candle Chart online demo sample. @@ -2109,7 +2109,7 @@ Candle chart **BullFillColor** is used to specify a fill color for the segments {% endhighlight %} -![](Chart-Types_images/Chart-Types_img65.png) +![ASP.NET MVC Chart Types Bull and Bear Color](Chart-Types_images/Chart-Types_img65.png) ## HiLo @@ -2155,7 +2155,7 @@ HiLo chart is created by setting the series Type as **Hilo** in the chart series {% endhighlight %} -![](Chart-Types_images/Chart-Types_img66.png) +![ASP.NET MVC Chart Types HiLo](Chart-Types_images/Chart-Types_img66.png) [Click](http://mvc.syncfusion.com/demos/web/chart/hilo) here to view the HiLo Chart online demo sample. @@ -2186,7 +2186,7 @@ Polar chart is created by setting the series Type as **Polar** in the chart seri {% endhighlight %} -![](Chart-Types_images/Chart-Types_img67.png) +![ASP.NET MVC Chart Types Polar](Chart-Types_images/Chart-Types_img67.png) [Click](http://mvc.syncfusion.com/demos/web/chart/polar) here to view the Polar Chart online demo sample. @@ -2217,7 +2217,7 @@ Polar **DrawType** property is used to change the series plotting type to *Line* {% endhighlight %} -![](Chart-Types_images/Chart-Types_img68.png) +![ASP.NET MVC Chart Types DrawType](Chart-Types_images/Chart-Types_img68.png) ### Stack columns in Polar chart @@ -2245,7 +2245,7 @@ By using the **IsStacking** property, you can specify whether the column has to {% endhighlight %} -![](Chart-Types_images/Chart-Types_img69.png) +![ASP.NET MVC Chart Types Polar Chart](Chart-Types_images/Chart-Types_img69.png) [Click](http://mvc.syncfusion.com/demos/web/chart/windrose) here to view the Polar Wind Rose Chart online demo sample. @@ -2276,7 +2276,7 @@ To create a Radar chart, you can specify the series Type as **Radar** in the cha {% endhighlight %} -![](Chart-Types_images/Chart-Types_img70.png) +![ASP.NET MVC Chart Types Radar Chart](Chart-Types_images/Chart-Types_img70.png) [Click](http://mvc.syncfusion.com/demos/web/chart/radar) here to view the Radar Chart online demo sample. @@ -2307,7 +2307,7 @@ Radar **DrawType** property is used to change the series plotting type to *Line* {% endhighlight %} -![](Chart-Types_images/Chart-Types_img71.png) +![ASP.NET MVC Chart Types DrawType](Chart-Types_images/Chart-Types_img71.png) ### Stack columns in Radar chart @@ -2336,7 +2336,7 @@ By using the **IsStacking** property, you can specify whether the column has to {% endhighlight %} -![](Chart-Types_images/Chart-Types_img72.png) +![ASP.NET MVC Chart Types Stack Columns in Radar Chart](Chart-Types_images/Chart-Types_img72.png) ## Waterfall Chart @@ -2362,7 +2362,7 @@ N> The inline property of the **Series.PositiveFill** has the first priority and {% endhighlight %} -![](Chart-Types_images/Chart-Types_img73.png) +![ASP.NET MVC Chart Types Waterfall Chart](Chart-Types_images/Chart-Types_img73.png) [Click](http://mvc.syncfusion.com/demos/web/chart/waterfall) here to view the Waterfall Chart online demo sample. @@ -2446,7 +2446,7 @@ To customize the connector line color, width, opacity and dashArray of the water {% endhighlight %} -![](Chart-Types_images/Chart-Types_img74.png) +![ASP.NET MVC Chart Types ConnectorLine](Chart-Types_images/Chart-Types_img74.png) @@ -2473,7 +2473,7 @@ EjChart can generate Error bar for Cartesian type series *(Line, Column, Bar, Sc {% endhighlight %} -![](Chart-Types_images/Chart-Types_img75.png) +![ASP.NET MVC Chart Types ErrorBar Chart](Chart-Types_images/Chart-Types_img75.png) [Click](http://mvc.syncfusion.com/demos/web/chart/errorbar) here to view the ErrorBar Chart online demo sample. @@ -2501,7 +2501,7 @@ You can change the error bar rendering type using **Type** *(like FixedValue, Pe {% endhighlight %} -![](Chart-Types_images/Chart-Types_img76.png) +![ASP.NET MVC Chart Types Changing Error Bar Type](Chart-Types_images/Chart-Types_img76.png) #### Customizing error bar type @@ -2530,7 +2530,7 @@ To customize the error bar type, set error bar Type as **Custom** and then chang {% endhighlight %} -![](Chart-Types_images/Chart-Types_img77.png) +![ASP.NET MVC Chart Types Customizing error bar type](Chart-Types_images/Chart-Types_img77.png) ### Changing Error Bar Mode @@ -2555,7 +2555,7 @@ Error bar mode is used to define whether the error bar line has to be drawn *Hor {% endhighlight %} -![](Chart-Types_images/Chart-Types_img78.png) +![ASP.NET MVC Chart Types Changing Error Bar Mode](Chart-Types_images/Chart-Types_img78.png) ### Changing Error Bar Direction @@ -2579,7 +2579,7 @@ You can change the error bar direction to plus, minus or both side using ErrorBa {% endhighlight %} -![](Chart-Types_images/Chart-Types_img79.png) +![ASP.NET MVC Chart Types Changing Error Bar Direction](Chart-Types_images/Chart-Types_img79.png) ### Customizing Error bar cap @@ -2607,7 +2607,7 @@ To customize the errorBar cap visibility, length, width and fill color, you can {% endhighlight %} -![](Chart-Types_images/Chart-Types_img80.png) +![ASP.NET MVC Chart Types Customizing Error bar cap](Chart-Types_images/Chart-Types_img80.png) ## Box and Whisker Chart @@ -2638,7 +2638,7 @@ To render a Box and Whisker Chart, set the series *type* as **BoxAndWhisker** .B {% endhighlight %} -![](Chart-Types_images/Chart-Types_img90.png) +![ASP.NET MVC Chart Types Box and Whisker Chart](Chart-Types_images/Chart-Types_img90.png) ### BoxPlotMode @@ -2678,7 +2678,7 @@ Box and Whisker *showMedian* property is used to show the box and whisker averag {% endhighlight %} -![](Chart-Types_images/Chart-Types_img91.png) +![ASP.NET MVC Chart Types showMedian](Chart-Types_images/Chart-Types_img91.png) ### Customize the Outlier @@ -2699,7 +2699,7 @@ Outlier symbol, width and height can be customized using outlierSettings through {% endhighlight %} -![](Chart-Types_images/Chart-Types_img92.png) +![ASP.NET MVC Chart Types Customize the Outlier](Chart-Types_images/Chart-Types_img92.png) [Click](http://mvc.syncfusion.com/demos/web/chart/boxandwhisker) here to view the Box and Whisker Chart online demo sample. @@ -2729,7 +2729,7 @@ sr.Points(pt => {% endhighlight %} -![](Chart-Types_images/Chart-Types_img93.png) +![ASP.NET MVC Chart Types Pie of Pie Chart](Chart-Types_images/Chart-Types_img93.png) [Click](http://mvc.syncfusion.com/demos/web/chart/pieofpie) here to view the Pie Of Pie Chart online demo sample. @@ -2757,7 +2757,7 @@ The points to be displayed in the second pie is decided based on the `splitMode` {% endhighlight %} -![](Chart-Types_images/Chart-Types_img94.png) +![ASP.NET MVC Chart Types Split Mode and Split Value](Chart-Types_images/Chart-Types_img94.png) ### Changing Pie Of Pie Size The size of the second Pie can be customized by using the `PieOfPieCoefficient` property. The default value of pieOfPieCoefficient is **0.6**.Its value ranges from 0 to 1. @@ -2778,7 +2778,7 @@ The size of the second Pie can be customized by using the `PieOfPieCoefficient` The following screenshot represents the pie of pie series with pieOfPieCoefficient as 1 -![](Chart-Types_images/Chart-Types_img95.png) +![ASP.NET MVC Chart Types Changing Pie of Pie Size](Chart-Types_images/Chart-Types_img95.png) #### Customizing the Gap @@ -2799,7 +2799,7 @@ The distance between the two pies in the pie of pie chart can be controlled by u {% endhighlight %} -![](Chart-Types_images/Chart-Types_img96.png) +![ASP.NET MVC Chart Types Customizing the Gap](Chart-Types_images/Chart-Types_img96.png) diff --git a/aspnetmvc/Gantt/Serial-Number.md b/aspnetmvc/Gantt/Serial-Number.md index e053738be..736a97b61 100644 --- a/aspnetmvc/Gantt/Serial-Number.md +++ b/aspnetmvc/Gantt/Serial-Number.md @@ -1,13 +1,13 @@ --- layout: post title: Sequencing Tasks | Gantt | ASP.NET MVC | Syncfusion -description: sequencing tasks +description: Learn here all about Sequencing Tasks support in Syncfusion ASP.NET MVC Gantt control, its elements and more. platform: ejmvc control: Gantt documentation: ug --- -# Sequencing Tasks +# Sequencing Tasks in ASP.NET MVC Gantt ## How to enable serial number column in Gantt? @@ -27,6 +27,6 @@ Code snippets for enabling the serial number is as follows. The following screenshot displays the Serial number column in Gantt control. -![](Serial-Number_images/Serial_img1.png) +![ASP.NET MVC Gantt displaying the Serial Number Column](Serial-Number_images/Serial_img1.png) The serial number column will be resequenced automatically on performing any actions which will change the row indexes of the tasks such as row drag and drop, deleting, adding. diff --git a/aspnetmvc/Grid/Exporting.md b/aspnetmvc/Grid/Exporting.md index 539597bdb..4c72b4851 100644 --- a/aspnetmvc/Grid/Exporting.md +++ b/aspnetmvc/Grid/Exporting.md @@ -1,13 +1,13 @@ --- layout: post title: Exporting | Grid | ASP.NET MVC | Syncfusion -description: exporting +description: Learn here all about Exporting support in Syncfusion ASP.NET MVC Grid control, its elements and more. platform: ejmvc control: Grid documentation: ug --- -# Exporting +# Exporting in ASP.NET MVC Grid The `Exporting` feature provides support to export Grid data into excel, word and PDF files. To export the grid, the `export` JavaScript method should be called with export action as parameter. To make it work from grid tool bar the `ExcelExport`, `WordExport` and `PdfExport` toolbar items needs to be added in grid tool bar using the `ToolbarItems` property of `ToolbarSettings` which are used to perform exporting. When you click the toolbar exporting icon, it internally invokes the `export` public method of grid object to export. The code sample for this is as follows. @@ -1477,7 +1477,7 @@ Also, it has `none` option which will export the grid without any theme. The de {% endtabs %} When the theme is set as none and the autoFormat is not set to the grid, then no theme is applied to the exported grid. The grid is exported without any theme as in the following screenshots: -![](Exporting_images/Customizing-Themes_img1.png) +![ASP.NET MVC Grid Customizing Themes](Exporting_images/Customizing-Themes_img1.png) ## AutoFormat class @@ -1692,7 +1692,7 @@ The background color of the alternative row of the grid content. {% endtabs %} -![](Exporting_images/Customizing-Themes_img2.png) +![ASP.NET MVC Grid Customizing Themes Autoformat class](Exporting_images/Customizing-Themes_img2.png) ## Exporting server events @@ -1860,7 +1860,7 @@ You can customize the particular cell or particular row of exporting files usin {% endtabs %} -![](Exporting_images/Exporting_Serverside_Event.png) +![ASP.NET MVC Grid Exporting Serverside Event](Exporting_images/Exporting_Serverside_Event.png) diff --git a/aspnetmvc/Grid/Responsive.md b/aspnetmvc/Grid/Responsive.md index 245818b76..b16475cf1 100644 --- a/aspnetmvc/Grid/Responsive.md +++ b/aspnetmvc/Grid/Responsive.md @@ -1,13 +1,13 @@ --- layout: post title: Responsive with Grid widget for Syncfusion EJMVC -description: How to set the grid, responsive to screen resolutions +description: Learn here all about Responsive support in Syncfusion ASP.NET MVC Grid control, its elements and more platform: ejmvc control: Grid documentation: ug --- -# Responsive +# Responsive in ASP.NET MVC Grid The Grid control has support for responsive behavior based on the client browser's width and height. To enable responsive, the `IsResponsive` property should be true. In Desktop and Tablet mode, to render scroller set `MinWidth` property. There are three modes of responsive layout is available in grid based on client width. They are. @@ -69,7 +69,7 @@ Enabling responsive row makes the grid to render the record values in vertical o {% endtabs %} -![](Responsive_images/Responsive_img1.png) +![Responsive row in ASP.NET MVC Grid](Responsive_images/Responsive_img1.png) W> IE8 and IE9 does not support responsive row. The `ejgrid.responsive.css` should be referred to display responsive row. @@ -78,31 +78,31 @@ W> IE8 and IE9 does not support responsive row. The `ejgrid.responsive.css` shou The customized layout for filtering, sorting, searching and CRUD operations in mobile device can be seen in the following screen shots. -![](Responsive_images/Responsive_img2.png) +![Responsive Customized features in ASP.NET MVC Grid](Responsive_images/Responsive_img2.png) {:caption} Responsive row with filtering , sorting and searching -![](Responsive_images/Responsive_img3.png) +![Responsive row with filtering, sorting and searching in ASP.NET MVC Grid](Responsive_images/Responsive_img3.png) {:caption} CRUD in mobile layout -![](Responsive_images/Responsive_img4.png) +![Responsive CRUD mobile layout in ASP.NET MVC Grid](Responsive_images/Responsive_img4.png) {:caption} Filtering in mobile layout -![](Responsive_images/Responsive_img5.png) +![Responsive Filtering mobile layout in ASP.NET MVC Grid](Responsive_images/Responsive_img5.png) {:caption} Filtering in mobile layout -![](Responsive_images/Responsive_img6.png) +![Responsive Filtering mobile layout in ASP.NET MVC Grid](Responsive_images/Responsive_img6.png) {:caption} Sorting in mobile layout -![](Responsive_images/Responsive_img7.png) +![Responsive Sorting mobile layout in ASP.NET MVC Grid](Responsive_images/Responsive_img7.png) {:caption} Searching in mobile layout @@ -211,12 +211,12 @@ If the client width is between 321px and 800px, then the grid will render in tab {% endhighlight %} {% endtabs %} -![](Responsive_images/Responsive_img8.png) +![Responsive Default tab layout in ASP.NET MVC Grid](Responsive_images/Responsive_img8.png) {:caption} Default tab layout -![](Responsive_images/Responsive_img9.png) +![Responsive Filtering design tab layout in ASP.NET MVC Grid](Responsive_images/Responsive_img9.png) {:caption} Filtering design in tab layout.