Tubular Charts are two components, the .NET Helpers to transform your
IQueryable data source
into a model that you can use later in the Tubular directives to populate ChartJS or
You should start creating your WebApi method (or using EmbedIO as well). Using the
ProvideSingleSerieChartResponse extension methods. If you need to create a single serie chart (like pie)
ProvideSingleSerieChartResponse you get a single array with a single serie as model. Otherwise the
ProvideMultipleSerieChartResponse method will group your series and send multiples arrays, for example if you want
to send sales information in City as series across the months as axis X.
In the following code, you can see how to call the extension methods directly in a
DbSet<> property from a
DbContext. By the way this code is from Tubular Sample.
Moving to the UI, you should choose between Highcharts or ChartJS and load the library using CDN or by any other
approach. Also you should load the correct module in your AngularJS application. Depending the chart library you have
tb-highcharts. Both directives has similar attributes
server-url to specified the REST endpoint and
chart-type to choose how the chart
will look. The types are equals to the chart original library.
That's all. You can check the documentation to see the attributes and configurations.