Using Syncfusion Charts in Radzen

1

Syncfusion provides a large range of controls for angular https://www.syncfusion.com/angular-ui-components

There is a community version of the controls https://www.syncfusion.com/products/communitylicense

So I played around and managed to get it working I'm not a angular developer but have used Syncfusion in Lightswitch.

Here is the steps I took you should be able to get this up and going in

  1. Have NodeJS installed
  2. Create a Radzen angular application and add a page
  3. Run the application so that it generates its code and stop it
  4. Start the command prompt and go to radzen-app-dir\client
  5. Install the Charts by running the following command npm install @syncfusion/ej2-angular-charts --save
  6. Open app.module.ts in notepad it is in the following path radzen-app-dir\client\src\app\app.module.ts
  7. Add the following to the file and save it
    At the top add

import { ChartModule ,ILoadedEventArgs, ChartComponent, ChartTheme} from '@syncfusion/ej2-angular-charts';
import { CategoryService, ColumnSeriesService, LineSeriesService,LegendService, DataLabelService, MultiLevelLabelService, SelectionService,TooltipService} from '@syncfusion/ej2-angular-charts'

under @NgModule
imports: add ,ChartModule
providers add ,CategoryService, ColumnSeriesService, LineSeriesService,LegendService, DataLabelService, MultiLevelLabelService, SelectionService,TooltipService

It should look something like this

image
image.png1771×512 18.5 KB

  1. In Radzen create a Odata dataSource and select the sample odata source
  2. Go to the page event and add a event handler to the load event and set it to Invoke data source method. Set Name to getProducts. Add the Then handler and set Type to Set property,Name to products and Value to ${result.value}.
  3. Drag and drop a Html component
  4. add the following code to it
   <e-series  [dataSource]='products'   type= 'Column'  name='Products' width='3'    xName='Id'  yName='ProductPrice' ></e-series>

   </e-series-collection>
</ejs-chart>

You now have a working Chart

image
image.png1589×651 19.3 KB

I also wanted to try setting some properties of the chart control.

Here is how you add a border

In the page events Set a property called border to { width: 2, color: '#FF0000'};

image

Paste the following code into the html control replacing what was there

<ejs-chart id="chart-container" style='display:block' align='center' [border]='border' title='Syncfusion Bar Chart' >

You should now get a red border

image
image.png1585×677 19.7 KB 

   <e-series  [dataSource]='products'   type= 'Column'  name='Products' width='3'    xName='Id'  yName='ProductPrice' ></e-series>

   </e-series-collection>
</ejs-chart>
8 Likes
2

Excellent tutorial! Thanks @alistair! :clap:

3

Really a nice tutorial, thanks for it.

4

Hi,
Great tutorial, thanks for that.
Question, does this only work with a OData datasource , could we use the Radzen datasource connected to MS SQLserver ?

5

Yes it will work with MS SQL

1 Like
6

Just to let you know , it seems not to work anymore with the data from MSSQL , something seems to be broken with the ODATA returned bij Radzen (dev localhost:5000/odata/... ) .

With the sample ODATA works ok .