Getting Started - Charts

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.

// Sample method using multiple series [HttpGet, Route("chart")] public IHttpActionResult GetChart() { using (var context = new SampleDbContext(false)) { return Ok(context.Orders.ProvideMultipleSerieChartResponse( label: x => x.ShipperCity, serie: x => x.CustomerName, value: x => x.Amount)); } } // Sample method using single serie [HttpGet, Route("chartpie")] public IHttpActionResult GetChartPie() { using (var context = new SampleDbContext(false)) { return Ok(context.Orders.ProvideSingleSerieChartResponse( label: x => x.CustomerName, value: x => x.Amount, serieName: "Customers")); } }

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.