C# Charts Part 2: Axes & Scaling

Summary

Highlights

• The video is a continuation from Part 1, emphasizing dynamic chart creation in C# Windows Forms applications. 📈
• Real-time data logging from an Arduino over COM port is demonstrated. 🕒
• The concept of major and minor grids, as well as axis intervals, is thoroughly explored. 🎨
• Viewers are shown how to set up a simple class for easy configuration of charts. 📚
• Chart customization tips include changing chart types, axis intervals, and line styles. ✨
• The tutorial covers stripping unnecessary legends and adjusting grid intervals for better clarity. 🎛️
• A sneak peek into how to set up a scrolling window of data visualization is provided. 🔄

Key Takeaways

• Understanding chart axes and scaling is crucial for creating dynamic data visualizations in C#. 📊
• Major and minor grid lines help in organizing chart data but can be tricky to set up. 🎯
• Custom classes can streamline chart creation and management. 💡
• There's a distinct terminology used by Microsoft for chart properties that can be confusing. 📚
• Learning how to customize axes with intervals can optimize data readability. 🔍

Overview

Chapters

• 00:00 - 00:30: Introduction and Series Overview This chapter serves as the second part in a series focused on understanding charts within C# Windows Forms applications. It encourages viewers to refer to part one for foundational concepts, which may be confusing and poorly documented. The current video delves into advanced features of charts, building on the logger application initiated in the previous session.
• 00:30 - 01:30: Developing Logger Application and Real-time Data Charting The chapter focuses on developing a logger application that logs data in real-time and visualizes it through charting. It involves receiving data from an Arduino device via the COM port and plotting this data in real-time. Key topics include creating real-time updating charts and understanding chart elements such as major and minor grids.
• 01:30 - 02:30: Chart Configuration and Class Implementation The chapter discusses scaling axes and managing data over time by creating a scrolling window of data. It demonstrates a method to maintain a 60-minute data view by scrolling and removing older data beyond this time frame. The focus is on displaying the most recent data in a real-time scrolling window.
• 02:30 - 04:00: Understanding Chart Axes and Intervals In this chapter, the focus is on understanding chart axes and intervals. The chapter provides guidance on creating a simple class to streamline the process of working with charts. It addresses the repetitive and monotonous task of generating code for configuring charts, offering a solution to simplify the setup by using a customizable class.
• 04:00 - 07:00: Setting Minimum and Maximum Values on Axes The chapter discusses how to configure a chart, specifically focusing on setting minimum and maximum values for axes. The process is simplified by using a line graph class. By feeding it data, the class automatically sets up the scaling and configuration needed for many typical charts, such as a simple line chart that is frequently used. This approach is especially useful for those who do a lot of charting, as it allows for easy setup and customization with minimal code.
• 07:00 - 09:30: Customizing Chart Appearance The chapter delves into the customization of chart appearances focusing initially on the understanding of chart axes terminologies. It uses a simple line chart to illustrate the different components as termed by Microsoft. The chapter identifies and describes the vertical axis as the y-axis and the horizontal as the x-axis. Furthermore, it touches on the presence of grid lines, suggesting further exploration into the customization of these elements.
• 09:30 - 12:30: Adding Points to Chart and Running Application In this chapter, the focus is on enhancing the visual representation of data within a chart by adding various grid lines. It begins by distinguishing between major and minor grid lines on the y-axis. Major grid lines are solid, whereas minor grid lines, which appear between the major grids, are dashed. The reader is guided on how to enable these minor grid lines, a step that improves the readability and interpretation of the chart.
• 12:30 - 16:30: Specifying Line Chart Type and Chart's Default Behavior This chapter discusses the specification of line chart types and default chart behaviors, focusing on how intervals are defined on the chart's axis. It raises questions about what constitutes an interval, such as determining if it is based on the numerical difference between grid lines like 0.1 to 0.2, and what parameters are used to specify these intervals.
• 16:30 - 18:30: Specifying Minimum and Maximum on Axes The chapter titled 'Specifying Minimum and Maximum on Axes' discusses how to set intervals on axes in graph-related software. It emphasizes the importance of understanding these settings by referring to Microsoft documentation for further details about units and intervals. The use of the axis.interval property is highlighted, noting it as a double value that represents the axis interval. It also mentions that the interval can default to 'auto' if not specified by the user.
• 18:30 - 27:00: Customizing Major and Minor Grid Lines The chapter delves into the customization of major and minor grid lines in a graphical interface. It starts by discussing the confusion often encountered with setting values for grids, particularly why a value of zero might be used and how it affects minor grids. The discussion points out the lack of clarity on the process of specifying minor grids. The chapter promises to provide a detailed explanation to clarify this confusion. Additionally, there is mention of other components related to axes beyond grid lines and intervals.
• 27:00 - 30:00: Conclusion and Preview of Next Video The chapter concludes by summarizing key points on how to add axis labels, setting minimum and maximum values, and adding labels to grid lines in data visualization. The chapter also touches on the use of major and minor grid lines, explaining how tick marks can be added between major grids to indicate sub-divisions. The discussion serves as a transition to the topics that will be covered in the next video.

C# Charts Part 2: Axes & Scaling Transcription

• 00:00 - 00:30 okay so welcome back this is part two in our series where we help you to understand charts in c-sharp windows forms applications how to work with them and i encourage you to look at part one where we talk about some of the basic concepts behind charts can be kind of confusing the documentation is often very unhelpful and in this video we're going to look at the next set of features of charts you can see we have here in a logger application we started a series
• 00:30 - 01:00 on recently show you how to develop this logger application that logs data in real time and charts it you can see we've got about a little over 30 minutes worth of data that's coming from an arduino over the com port and we're plotting it in real time you can maybe see that it's updating here and we're plotting out the data and we're going to show you how to do charts like this we're going to talk about things like major and minor grids can get kind of confusing we're going to
• 01:00 - 01:30 talk about scaling the axes again it can get kind of confusing we're going to talk about how to make a scrolling window of data for example i've got here i've got it set so when it gets to be 60 minutes of data it's going to start scrolling and knock off the the anything over 60 minutes and just show you the last 60 minutes of data in a in a real time scrolling window we'll show you how to do that
• 01:30 - 02:00 we're also going to show you how to make a simple class that will help you very much to work with charts now if you look at the code you're going to need to generate to just to configure your charts you're going to see a lot of this here where it can get really monotonous and a whole lot of repeats of information just to set up the charts and we're going to show you how to set up a simple class that you can access
• 02:00 - 02:30 and then once you've got that set up you can for example configure your chart with just one line of code you just reference this i've got a line graph class and i just feed it a bunch of data and it will automatically set up the scaling and a lot of what we need so if you do a lot of uh charting you use some very typical charts like this is a simple line chart that i use all the time you can set up a class and just
• 02:30 - 03:00 feed it some data and we'll go through and do all of that monotonous work behind the scenes okay so now let's focus on the chart axes and try to understand the terminology associated with them so i have here a simple line chart i've marked out some of the different components based on the terminology that microsoft uses here is on the the vertical axis which is the y-axis and of course the horizontal is the x-axis then there are the grid lines you
• 03:00 - 03:30 can see these cross-hatched lines the terminology is for the major grid line is axis y major grid you can see it's a solid line here but i've also enabled what's called the minor grid which you can show other grid lines between the major grids but you have to enable them so this is a xsy minor grid and i've set it to be dashed and then there's one other aspect of the
• 03:30 - 04:00 axis and that is what's called the interval and the interval specifies an interval between the major grid lines now you might think well wait a minute what what interval what is it is it an is it a like in this case 0.1 to 0.2 how do i specify the interval is it like 0.1 because there's an interval of 0.1 between the two or is there something else i specify as
• 04:00 - 04:30 a percentage or so if you are confused then all you have to do is go to the microsoft documentation and they will explain to you what this means and what are the units and everything else and if you go to the axis.interval property you can scroll down here and it clearly explains it's a double value that represents the interval of an axis so the interval is the interval right there's nothing to say you can default it to auto which
• 04:30 - 05:00 means you set it to a value of zero um unfortunately what they don't tell you is well how does that affect the minor grids and do i use this to specify minor grids and really it's very confusing so we're going to go into this in a little bit of detail to show you how you can set up these axes now there are other elements to the axes behind the besides the grid lines in the interval and they're listed down here
• 05:00 - 05:30 you can see we've got axis labels which are these labels i've specified the minimum and maximum and it adds labels to each grid line and of course we talked about the major and minor grid lines we talked about you can also specify tick marks i don't have them here but in between the major grids you can have little tick marks to show where the sub numbers are between the major grids and you can also specify minor grids with those tick marks and you can also specify what are called
• 05:30 - 06:00 strip lines now i don't have strip lines here i believe they are basically just a rectangular area to highlight part of your chart you can play with those if you want but those are the basic elements of the axis okay so now let's open a blank c sharp windows forms application which you can see here and we're going to start to look at the basics of how the charts are laid out and how we can configure a chart for our needs so i've got a blank form i'm going to go into the toolbox
• 06:00 - 06:30 and i can either search for chart or i can scroll down to the data and you can see i've got a chart here click left click drag and drop and here i've got my basic chart now as we said in the first video the terminology is that this box here that i just dragged is a chart inside it it's got a chart area and inside that it's got one or more chart series so if you look over here
• 06:30 - 07:00 at the properties if i select the chart it's chart one and it's got series and it's got chart areas let's go to the areas chart areas we explained in the previous video and it's a collection of chart areas and by default it gives you chart area 1 and it will also give you series 1 inside that chart area so we know that if we're going to start to build the chart we've already
• 07:00 - 07:30 got a pre-configured chart area 1 and series 1 that we can start to use we can add to that go down here to add and the same thing with the series but there's already one set up for us to use so what we're going to do is i'm going to click on this and hit f7 and it brings us to the windows forms application where we can start entering our data so now let's start this up and see what we get with the default chart area in default series
• 07:30 - 08:00 so i press the start button you can see we get a blank chart there's no data it already has series 1 available for us we can just start filling in data but it has nothing here so we're going to have to start giving it some data and see what it does so we said in the previous video that we have a series which specifies the data that we're going to chart so here we've got series 1 which is the default and what we want to do is we want to add points
• 08:00 - 08:30 so we can access the points and use add x y and then specify the points so let's say we want 0 comma 10 for our first point in our chart so now that we've got that let's start and see what we get aha now it automatically has taken that value of 10 and it's given us this one point it's
• 08:30 - 09:00 giving us a bar chart and it has shown us a value of 10 for the first point now you can see we specified zero but it puts it at 1. and it gives us an automatic maximum of 12 and it goes from 0 to 2 in the x axis so let's say we don't like this so now we're going to learn about how to set up the axes the minimum and the maximum the grid lines
• 09:00 - 09:30 and to make it look more like what we want so now let's say we want a line chart instead of a bar chart well we know that the chart type for each specific chart we're going to do is associated with the series right so you can have different chart types for each series we've only got one series so what we're going to do is we're going to enter the series chart type and we're going to call it seriescharttype.line now we get a squiggly here because we
• 09:30 - 10:00 don't have a using statement for the charting so we can do using system windows forms data visualization starting and we can add that and now it will be happy with our line chart so now that we've specified we want a line chart let's start it again and see what we get now we have a chart but it doesn't show any data but actually there is a point on this chart for this first point we added so to prove that let's add another point
• 10:00 - 10:30 i'll do a control d to duplicate and i'll go to 1 and 20 and re-run it and see what we get okay so now we have it started out at zero and it's giving us an automatic scaling on the x-axis of minus one to two it just decided to to do that so we've got our point uh 0 10 and 120
• 10:30 - 11:00 and it's automatically scaled up to 25. so now we want to personalize and customize this so it's the way we want so let's say we don't want to start at zero and let's say we want to have fixed maximum and minimums on these axes and maybe we want to add some minor grid lines so let's see how we can customize this to make it the way we want using the microsoft terminology
• 11:00 - 11:30 so now let's say i want to specify the minimum and maximum on the x-axis how do i do that well before we add these points to the chart i'm going to go in here and i'm going to copy and paste some code and i'm going to set the minimum as 0 instead of -1 and the maximum is going to be let's say five all right so now i've specified i wanted
• 11:30 - 12:00 to go from zero to five let's run that and you can see it started out at zero and goes to five so now let's say i want to do the same thing for the y axis well i can control d and then ctrl d and then click alt and then drag and change this to y and now i can set the y axis maximum
• 12:00 - 12:30 minimum and let's say i want to go from minimum to 10 and maximum to 20. now i can run that and now we specify from 10 to 20 and from 0 to 5. now again you're probably going to want to think about doing this with your charts now we also want to get rid of this legend so to get rid of the legend we can just enter this chart one legends dot clear and we can start that up
• 12:30 - 13:00 and you can see it got rid of the legends so now let's say we're not happy with the thickness of this line we want something a little bit thicker well how do you do that well as we mentioned in another video unfortunately the terminology here is not very good what they use is called the border with so you access the series series one border width and that is an integer starting at one so we can say three
• 13:00 - 13:30 is the border width which means we're going to get a thick line so we'll start again and you can see now we have a width of three again very unfortunate terminology but that's the way microsoft is so now we've got that what else are we going to want to do so now let's say okay we set the minimum and maximum to 10 and 20. but now we want to have major grid lines
• 13:30 - 14:00 instead of every two units maybe every one unit so how are we going to tell uh windows forms to give us every one unit between the major grids well we said there is a property called the interval so um what does that mean does that mean the interval if we wanted every one unit we tell it one or is it in percentage of the difference between the two or you know what is this interval so let's
• 14:00 - 14:30 take a look at the interval and then see you know maybe we want to add some minor grids how does the interval affect that so let's go back here and try and figure out what kind of interval we should pick well we know that it is associated with the chart area the interval and it's with the axis so what we're going to do is we're going to paste in this chart 1 chart areas chart area 1 axis y interval and we're going to set that so
• 14:30 - 15:00 let's let's assume that it's got to be in the same units as the maximum scale so now we want to have the interval right before it was an interval of 2 now we want to set it to an interval of 1. let's see if that works we'll start it up and aha so it worked so that interval value is in the same units as the minimum and maximum
• 15:00 - 15:30 so now we know that these um the interval is in the same units as the scaling of the axis all right so we went from 10 to 20 and now we're saying in units of one all right so now let's say instead of having so many major grids let's say we just want to have an interval of maybe five so it'll go 10 15 and 20. and the others we want to have as minor
• 15:30 - 16:00 grids all right like little dashed lines or something so how we going to do that well we can set this back to an interval of 5. and run that and there we got five so now we want to fill this in with maybe minor grids every unit of one so how do we do that well the minor grid is not enabled by default so the first thing we're going to have to do is we're going to have to enable the minor grid for the y-axis so here's
• 16:00 - 16:30 the code chart area 1 axis y minor grid enabled equals true right so we've now enabled it so let's run it and see what it does aha so now it has automatically 10 11 12 13 14 15. it has already automatically put in grids there but they're not there's no labels associated with them and they're kind of solid lines but they are at the interval that we wanted they're like every one unit
• 16:30 - 17:00 now we can change that but for now let's just take a look at changing this grid so it looks more like a minor grid instead of a major grid so maybe we want it to be like a dashed line or something so to specify a dashed line we will put this code and it is the minor minor grid line dash style equals chart dash style dot dash okay
• 17:00 - 17:30 kind of confusing and we're going to try to make this a lot easier in a little bit where we're going to make a class that has all this data behind the scenes and we just have to specify the settings but for now we will show you what the code is for that we'll run it and now we can see we've got dashed lines between the major grid lines we could also change the color of those grid lines to make them less visible
• 17:30 - 18:00 how would we do that well to change the color we could use a line like this that says minorgrid.line color equals color dot say dark gray and keep in mind we've got the using system drawing so that we can specify this color so let's say actually let's make it a light gray and we'll run it and we can say yeah you can just barely see the grid lines maybe that's okay maybe not
• 18:00 - 18:30 but you get the point you can have the grid lines here and then we can change the interval of the grid lines say we want the minor interval every two units how are we going to set the interval of the minor grid well as you can imagine it's going to look something like axis y minor grid something so we'll paste it and it's minor grid dot interval now um what is the interval we've already set the interval for the major grid so
• 18:30 - 19:00 what is the minor grid interval well in fact it is a function of the major grid interval so let's say um i want to set an interval that is half the major grid interval we could set major grid interval divided by two right so what we're saying is to set the minor grid interval we'll just take the major grid interval and
• 19:00 - 19:30 divide by two and we'll run that now you might look at this and say wait a minute the minor grids are not at an interval of one half of the major grids they're still at an interval of one so 10 11 12 13 14 15. so what's going on here well with the minor grid intervals it can be very confusing what you need to do is you need to set it to the axis y interval not the major
• 19:30 - 20:00 grid interval so if we remove this major grid and just have the axis y interval divided by two we'll start it up and you can see here's the minor grids hopefully you can see it on youtube but there is uh one minor grid between the each major grid uh just as we specified so be very careful you got to make sure you're doing the axis y interval not the major grid okay well this video is getting a
• 20:00 - 20:30 little bit long and since nobody watches more than about four minutes of tech training videos i'll wait for the next video we'll talk about data binding and adding data to charts and we'll also talk about a moving window of data so you can set up a window of maybe the last 30 or 60 minutes worth of data that just keeps scrolling um anyway if you like any of these videos i appreciate it if you hit the like button and subscribe hit the bell notifications and most of all please let others know that we're here so we get
• 20:30 - 21:00 some more views really appreciate it otherwise take care have a really good day thanks