SyncFusion Library

# CsfWebChart

## Line Chart Demo

![](https://antwise.com/download/syncfusion-screenshots/LineChartDemo.png)

The DataFlex code for the above looks like

~~~ text

      Object oWebChart is a csfWebChart

        Set piHeight to 400

        Set piColumnSpan to 12

        Set psTitle to "demo line chart"

        Set pbTooltip to True

        Object oXAxis is a csfWebChartAxis

          Set peAxisType to chartAxisX

          Set psTitle to "X Axis"

        End_Object  

        Object oYAxis is a csfWebChartAxis

          Set peAxisType to chartAxisY

          Set psTitle to "Y Axis"

        End_Object  

        Object oFirstSeries is a csfWebChartSeries

          Object oFirstMarkers is a csfWebChartMarker

            Set pbVisible to True

            Object oFirstDataLabel is a csfWebChartDataLabel

              Set pbVisible to True

              Set psPosition to "Top"

              Set psAlignment to "Near"

            End_Object

          End_Object

          Procedure OnAddChartData

            Send AddPoint 1 2

            Send AddPoint 2 3.6

            Send AddPoint 3 7

            Send AddPoint 4 6

          End_Procedure

        End_Object  

        Object oSecondSeries is a csfWebChartSeries

          Object oSecondMarkers is a csfWebChartMarker

            Set pbVisible to True

            Set psShape   to "Diamond"

            Object oSecondDataLabel is a csfWebChartDataLabel

              Set pbVisible to True

              Set psPosition to "Bottom"

              Set psAlignment to "Far"

            End_Object

          End_Object

          Procedure OnAddChartData

            Send AddPoint 1 1

            Send AddPoint 2 3

            Send AddPoint 3 5

            Send AddPoint 4 8

          End_Procedure

        End_Object  

      End_Object

~~~

The Series object has your data.

There are markers (the diamond shapes and the dots) to indicate your data point.

There's also a DataLabel to display the actual value of your data point.

You put the marker object in your series object and customize that… then if you want to do something specific with the dataLabel you add a datalabel object in that and tweak the settings for it.

DataLabel as well as Marker objects are both optional.

This pretty much matches the JSON object definitions as is documented over at SyncFusion.

## Bar Chart Demo

![](https://antwise.com/download/syncfusion-screenshots/BarChartDemo.png)

The DataFlex code looks like:

~~~ text

      Object oWebBarChart is a csfWebChart

        Set piHeight to 400

        Set piColumnSpan to 12

        Set psTitle to "demo Bar chart"

        Set pbTooltip to True

        Object oXAxis is a csfWebChartAxis

          Set peAxisType to chartAxisX

          Set psTitle to "Food"

          Set psValueType to "Category"

        End_Object  

        Object oYAxis is a csfWebChartAxis

          Set peAxisType to chartAxisY

          Set psTitle to "Sales"

          Set psLabelFormat to "{value}B"

        End_Object  

        Object oBarArea is a csfWebChartArea

          Set psBackground to "cornSilk"

          //Set psBorderColor to "green"

          //Set piBorderWidth to 2

        End_Object  

        Object oFirstSeries is a csfWebChartSeries

          //Set psType to "Bar"

          Set psType to "Column"

          Set psName to "Imports"

          Object oFirstMarkers is a csfWebChartMarker

            Object oFirstDataLabel is a csfWebChartDataLabel

              Set pbVisible to True

              Set psPosition to "Top"

            End_Object

          End_Object

          Procedure OnAddChartData

            Send AddPoint "egg" 23

            Send AddPoint "chips" 43

            Send AddPoint "fish" 34

            Send AddPoint "tea" 16

          End_Procedure

        End_Object  

        Object oSecondSeries is a csfWebChartSeries

          //Set psType to "Bar"

          Set psType to "Column"

          Set psName to "Exports"

          Object oSecondMarkers is a csfWebChartMarker

            Object oSecondDataLabel is a csfWebChartDataLabel

              Set pbVisible to True

              Set psPosition to "Top"

              Set psFill  to "White"

            End_Object

          End_Object

          Procedure OnAddChartData

            Send AddPoint "egg" 12

            Send AddPoint "fish" 33

            Send AddPoint "chips" 44

            Send AddPoint "tea" 56

          End_Procedure

        End_Object  

      End_Object

~~~

If you set psType to "Bar' then you have a horizontal bar chart.

If you set psType to "Column" you'll get the vertical bar chart like in the picture above.

## Direct SyncFusion Links

Documentation for the API is here:

* https://ej2.syncfusion.com/documentation/api/chart/

Tips & tricks here:

* https://ej2.syncfusion.com/javascript/documentation/chart/es5-getting-started/

SyncFusion Chart control demo:

* https://ej2.syncfusion.com/javascript/demos/#/fluent2/chart/line.html