{"id":9544,"date":"2014-03-12T11:00:11","date_gmt":"2014-03-12T18:00:11","guid":{"rendered":"http:\/\/blog.xamarin.com\/?p=9544"},"modified":"2014-03-12T11:00:11","modified_gmt":"2014-03-12T18:00:11","slug":"building-enterprise-dashboards-for-ipads-and-iphones-using-nuclios","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/building-enterprise-dashboards-for-ipads-and-iphones-using-nuclios\/","title":{"rendered":"Building Enterprise Dashboards on the iPhone and iPad"},"content":{"rendered":"

Over the years traditional desktop applications have excelled at rendering large amounts of data on large multi-monitor configurations by leveraging beautiful dashboard and graphing controls from .NET vendors. The enterprise landscape has evolved into a bring your own device workplace and enterprise applications have also started to evolve to adjust for this shift. It is now up to development teams to reimagine their applications from a point and click mouse experience to a beautiful touch based mobile experience that can deliver a truly native experience on each platform. Mobile users desire easy content consumption with simple touch interactions and blazingly fast native performance to fully immerse them visually. They want to get to the data they are most interested in and get to that data quickly.<\/p>\n

\u00a0\"nuclios-charts\"<\/p>\n

With Xamarin you can create beautiful native experiences for all types of mobile application including bringing these dashboards to mobile devices. We understand that mobile developers need to deliver alluring apps for enterprises and consumers by embracing native platform features while still being highly productive in their development environment. We have a rich ecosystem of components and controls to get developers up and running immediately with highly performing, visual, and customizable controls that meet business requirements. This of course includes dashboards that you can bring to your applications.<\/p>\n

\"Nuclios-Logo\"<\/p>\n

One of these controls is from Infragistics who published their NucliOS component<\/a> on the Xamarin Component Store, featuring over 40 different charts optimized for mobile. NucliOS has a wide range of controls to help visualize and analyze large volumes of data ranging from advanced scientific and financial charts, data grids, pie charts, radial gauges, and more. They even have a free iOS app to browse all of the controls featured in NucliOS, which is available on the Apple App Store<\/a>.<\/p>\n

NucliOS has tons of awesome controls, which I can’t attempt to show off in just a single post. So, for this example I am going to get you started by showing you how to make a bar chart using the IGChartView<\/em> control. You can then take it from there to completely customize it as it can render more than 40 different chart types! <\/p>\n

Getting Started<\/h2>\n

To get started with NucliOS controls you can either purchase the component from the component store or elect for the \u201cTry\u201d option to start a free trial right away.<\/p>\n

\"NucliOS-GetStarted\"<\/p>\n

After you have the component we can started by setting up a data source for the bar chart.\u00a0<\/p>\n

Identify a Data Source<\/h3>\n

We will need some sort of data source to feed into our chart. For this example I am going to use something very familiar, Microsoft\u2019s Northwind Database. Northwind is exposed as an oData Service<\/a> with all sorts of sample data including employees, customers, orders, and products. I will consume this oData feed using the Simple.oData.Client<\/a> portable class library, which handles connecting to and fetching the data to create a dashboard displaying sales for products based on their categories.<\/p>\n

Here is what my Model<\/strong> looks like for the data: <\/p>\n

\n public class SalesByCategory {\n    public SalesByCategory ()\n    {\n        ProductName = new List ();\n        ProductSales = new List ();\n\n    }\n    public List ProductName{\n        get;\n        set;\n    }\n\n    public List ProductSales{\n        get;\n        set;\n    }\n}\n<\/pre>\n
Next up I will create a simple helper method that will query Northwind and grab the top 15 selling products by category:<\/p>\n
\n async Task GetDataAsync() {\n    var client = new ODataClient("http:\/\/services.odata.org\/Northwind\/Northwind.svc\/");\n    var salesData = await client.For ("Sales_by_Categories").Top(15).OrderBy("ProductSales").FindEntriesAsync();\n\n    SalesByCategory salesByCategory = new SalesByCategory();\n    foreach (var sale in salesData) {\n        salesByCategory.ProductName.Add (NSObject.FromObject(sale["ProductName"].ToString()));\n        salesByCategory.ProductSales.Add (NSObject.FromObject(sale["ProductSales"].ToString()));\n    }\n    return salesByCategory;\n}\n<\/pre>\n
With this data I can visualize it by feeding it into an\u00a0IGChartView<\/em> with the help of IGCategorySeriesDataSourceHelper<\/em> :<\/p>\n
\nvar data = await GetDataAsync ();\n\/\/ set data source\nIGCategorySeriesDataSourceHelper barSeriesSource = new IGCategorySeriesDataSourceHelper();\nbarSeriesSource.Values = data.ProductSales.ToArray();\nbarSeriesSource.Labels = data.ProductName.ToArray();\n<\/pre>\n
Create Axises<\/h3>\n
We are going to create a 2D chart, so I will set the X and Y axis to chart the data of the product’s sales and product name respectively.<\/p>\n
\n\/\/ Create axis types and add it to the chart\nIGNumericXAxis xAxisBar = new IGNumericXAxis ("xAxis");\nIGCategoryYAxis yAxisBar = new IGCategoryYAxis ("yAxis");\n<\/pre>\n
Create Series<\/h3>\n
As mentioned earlier, I am going to plot this data in a bar series. To do this will set it’s data source from which we created earlier with the help of\u00a0IGCategorySeriesDataSourceHelper<\/em><\/p>\n
\n\/\/ decide on what series need to be displayed on the chart\nIGBarSeries barSeries= new IGBarSeries ("series");\nbarSeries.XAxis = xAxisBar;\nbarSeries.YAxis = yAxisBar;\n\/\/ set the appropriate data sources\nbarSeries.DataSource = barSeriesSource;\n<\/pre>\n
Putting it all together<\/h3>\n
Now all we have to do is set the IGChartView axis, series, and location to finalize the visualization our data.<\/p>\n
\nvar chart = new IGChartView(this.View.Bounds);\nchart.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth;\nchart.AddAxis(xAxisBar);\nchart.AddAxis(yAxisBar);\nchart.AddSeries(barSeries);\n this.View.Add(chart);\n<\/pre>\n
That\u2019s it! We now have a beautiful visualization of our data. <\/p>\n
\"NucliOS-Chart-SalesData\"<\/p>\n
The IGChartView<\/em> can be completely customized and changed with just a few lines of code. In fact, I can change this into a Column Series by simply changing my X and Y axis and setting up the chart as an IGColumnSeries<\/em>:<\/p>\n
\nvar xAxisBar = new IGCategoryXAxis ("xAxis");\nvar yAxisBar = new IGNumericYAxis ("yAxis");\n\nvar columnSeries = new IGColumnSeries ("series");\ncolumnSeries.XAxis = xAxisBar;\ncolumnSeries.YAxis = yAxisBar;\n<\/pre>\n
\"Column<\/p>\n
You can download all of this source code to try it for yourself from GitHub.<\/a><\/p>\n
Discuss this blog post in the Xamarin Forums<\/em><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Over the years traditional desktop applications have excelled at rendering large amounts of data on large multi-monitor configurations by leveraging beautiful dashboard and graphing controls from .NET vendors. The enterprise landscape has evolved into a bring your own device workplace and enterprise applications have also started to evolve to adjust for this shift. It is […]<\/p>\n","protected":false},"author":547,"featured_media":39167,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,3],"tags":[6,4],"class_list":["post-9544","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","category-enterprise","tag-ios","tag-xamarin-platform"],"acf":[],"blog_post_summary":"
Over the years traditional desktop applications have excelled at rendering large amounts of data on large multi-monitor configurations by leveraging beautiful dashboard and graphing controls from .NET vendors. The enterprise landscape has evolved into a bring your own device workplace and enterprise applications have also started to evolve to adjust for this shift. It is […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/9544","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/547"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=9544"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/9544\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/39167"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=9544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=9544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=9544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}