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
Highcharts.
You should start creating your WebApi method (or using EmbedIO as well). Using the ProvideMultipleSerieChartResponse
or ProvideSingleSerieChartResponse
extension methods. If you need to create a single serie chart (like pie)
with 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
two directives: tb-chartjs
or tb-highcharts
. Both directives has similar attributes
like 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.