--> How To Add Charts In Your Windows Phone App? | Experience Lab - Online business creation and development guide for bloggers and startups

How To Add Charts In Your Windows Phone App?

Graphical representation is an important part of a good interface design. Often during the course of designing an interface, you will com...



Windows Phone app development

Graphical representation is an important part of a good interface design. Often during the course of designing an interface, you will come across data that needs visual representation to be more readable. This is especially the case in app development. So today, we'll show you how to add charts and line graphs in your Windows Phone application. This tutorial works for Windows Phone 8, and is based on the open source project AmCharts for WPF, Silverlight and Windows Phone, which is licensed under Apache License, Version 2.0.


AmCharts



Besides Windows Phone (7.0 and 8.0), the AmCharts API can be used with WPF (Windows Presentation Foundation) and Silverlight applications as well in a similar fashion. It is fast, lightweight and easy-to-use, and supports a variety of charting controls, including Line Charts, Bar Graphs, Area and Pie Charts.


Adding AmCharts to Win Phone app



For this Tutorial, you need Visual Studio 2013 and the Windows Phone 8.0 SDK.


Adding NuGet Packages






  • The first step is to install the NuGet Package Manager. Inside Visual Studio, go to Tools >> Extensions and Updates. Now look up NuGet, and you will see the NuGet Package Manager.










You can see that I already have this installed. If you don't, you can install or update it from here. You will need to restart Visual Studio after installing/updating this extension.


  • Open Visual Studio again, and then go to Tools >> NuGet Package Manager >> Package Manager Console.

  • You will see a console in the output window that is titled 'Package Manager Console', and it will allow you to add some text input. Go ahead and add the following line to it;




Install-Package amChartsQuickCharts




(Note: You need to do the last step while you have an app project open)




The code


Now you have the required packages, and are ready to start coding your charts :).



The XAML




Inside the XAML file where you want to add your charts, add this reference in the top Page tag.


xmlns:amCharts="clr-namespace:AmCharts.Windows.QuickCharts;assembly=AmCharts.Windows.QuickCharts.WP"


Inside the XAML, we now need to add the PieChart element.



<amCharts:PieChart


        x:Name="PC1"


        TitleMemberPath="title"


        ValueMemberPath="value" />



This tells the XAML editor to create a <amCharts:PieChart> element, and name it "PC1". For each label-value pair, the name for the label variable would be "label" and the values would be taken from the variable named "val".





That's pretty much it for the visual editor part! Now let's go over to our code-behind file, the file that is named something like 'customName.xaml.cs'.



The C#





Inside the code-behind file, the first thing you want to do is create a custom class for your data. Here's a sample class with the two variables we need defined;



public class PChart {


        public string label { get; set; }


        public double val { get; set; }


}



Notice that the names of the variables are the same we used in the XAML file. Now we are going to create a collection of PChart objects to bind to our pie chart. You can do this within the main Page class.



public ObservableCollection<PChart> Data = new ObservableCollection<PChart>() {


        new PChart() { title = "Label 1", value = 30 },


        new PChart() { title = "Label 2", value = 40 },


        new PChart() { title = "Label 3", value = 50 },


        new PChart() { title = "Label 4", value = 60 },




new PChart() { title = "Label 5", value = 70 },




};



You can implement your custom logic here to insert values into the collection. For the purpose of this tutorial, we'll keep it simple. All the above piece of code does is, create new instances of the PChart class, initialize them and then add them to a collection called 'Data'. In the next piece of code, we'll set the source of the pie chart's data to this 'Data'


PC1.DataSource = Data;


Add the above code to the PhoneApplicationPage_Loaded or OnNavigatedTo functions.





You're all done! Run the application, and voila! You'll see a pie chart like so;




Pie Charts




The exact same concept applies to Line Charts. You just need to modify the class structure to include more values;



public class LineChart {


        public string label { get; set; }


        public double val1 { get; set; }


        public double val2 { get; set; }


        public decimal val3 { get; set; }


}



And customize the data collection accordingly;



private ObservableCollection<LineChart> _data = new ObservableCollection<LineChart>() {


        new LineChart() { label = "L1", val1=5, val2=15, val3=12},


        new LineChart() { label = "L2", val1=15.2, val2=1.5, val3=2.1M},


        new LineChart() { label = "L3", val1=25, val2=5, val3=2},


        new LineChart() { label = "L4", val1=8.1, val2=1, val3=22},


        new LineChart() { label = "L5", val1=8.1, val2=1, val3=22},


        new LineChart() { label = "L6", val1=8.1, val2=1, val3=22},


        new LineChart() { label = "L7", val1=4.1, val2=4, val3=2},


        new LineChart() { label = "L8", val1=8.1, val2=1, val3=22},


        new LineChart() { label = "L9", val1=8.1, val2=1, val3=22},


        new LineChart() { label = "L10", val1=8.1, val2=1, val3=22},


        new LineChart() { label = "L11", val1=8.1, val2=1, val3=22},


        new LineChart() { label = "L12", val1=8.1, val2=1, val3=22},


        new LineChart() { label = "L13", val1=4.1, val2=4, val3=2},


        new LineChart() { label = "L14", val1=8.1, val2=1, val3=22},


        new LineChart() { label = "L15", val1=8.1, val2=1, val3=22},


        new LineChart() { label = "L16", val1=8.1, val2=1, val3=22},


};



And the XAML;


<amCharts:SerialChart BorderBrush="White" BorderThickness="3" x:Name="chart1" DataSource="{Binding Data}" CategoryValueMemberPath="cat1"
        AxisForeground="White"
        PlotAreaBackground="Black"
        MinimumCategoryGridStep="200"
        GridStroke="DarkGray" Margin="0,63,0,10">
    <amCharts:SerialChart.Graphs>
        <amCharts:LineGraph ValueMemberPath="val1" Title="Line #1" Brush="Blue" />
        <amCharts:ColumnGraph ValueMemberPath="val2" Title="Column #2" Brush="#8000FF00" ColumnWidthAllocation="0.4" />
        <amCharts:AreaGraph ValueMemberPath="val3" Title="Area #1" Brush="#80FF0000" />
    </amCharts:SerialChart.Graphs>
</amCharts:SerialChart>





Note: There are three different types of charts displayed in this XAML; Line, Bar and Area Graphs.





Example;





Line Chart



That's it! You're all done!




You can download the source code for this sample app here. If you have any questions, please feel free to ask in the comments section below - we'd love to help out. Good luck :)

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,4,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,3,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: How To Add Charts In Your Windows Phone App?
How To Add Charts In Your Windows Phone App?
http://1.bp.blogspot.com/-Vb811I9BFU0/VFuamW0wmUI/AAAAAAAAGl8/R-NFoJTKqGw/s1600/Windows%2BPhone.png
http://1.bp.blogspot.com/-Vb811I9BFU0/VFuamW0wmUI/AAAAAAAAGl8/R-NFoJTKqGw/s72-c/Windows%2BPhone.png
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2014/11/how-to-add-charts-in-your-windows-phone.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2014/11/how-to-add-charts-in-your-windows-phone.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy