SyncFusion Library

# CsfWebChart

## Line Chart Demo


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


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/#/material/chart/line.html