Solved

Creating a Chart with MS Chart Control C#

Posted on 2013-12-04
6
1,060 Views
Last Modified: 2014-01-16
I need to create a horizontal chart on a webpage that is live and updates automatically every minute or so. The chart needs to display four horizontal lines each representing a line in our production facility. The line needs to be green unless the line is down, in which case it needs to be another color that represents the reason the line is down. The chart will show the previous twelve hours on a continual basis. If the line is down currently, I want to have a label or something showing that it is currently down. The full twelve hours needs to be the x-axis at probably 15 minute marked intervals but calculated down to the minute, and I think the line would be the y-axis with one bar for each line. I am using SQL Server 2005 and VS2010.

I have downloaded the Microsoft Chart Control and have it installed in VS2010, using asp.net 4.0. I'm attaching a sample of what the graph needs to resemble. I will also include some raw data. It seems like the STACKEDBAR100 style is close to what I want.

Spreadsheet attached with sample data and chart. The data on the chart does NOT match the actual data, but is simply a representation of how I want to lay this out.

I have not worked with asp.net charts at all, so I'm not sure where to even start.
samplechart.xlsx
0
Comment
Question by:Hers2keep
  • 3
  • 3
6 Comments
 
LVL 96

Expert Comment

by:Bob Learned
ID: 39697936
I am curious about what you are working with.  With 3.5, you had to download and install the charting controls, but with 4.0, they were installed with the framework.

Here is one possible place to start:

Built-in Charting Controls (VS 2010 and .NET 4 Series)
http://weblogs.asp.net/scottgu/archive/2010/02/07/built-in-charting-controls-vs-2010-and-net-4-series.aspx
0
 

Author Comment

by:Hers2keep
ID: 39727352
I'm working with the charting controls.  I just don't know where to start to show the information I want to show. I've looked at the charting controls documentation but don't see an example of what I'm looking for.
0
 
LVL 96

Expert Comment

by:Bob Learned
ID: 39727369
Would it be possible to attach a picture of how you would like the chart to look?
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:Hers2keep
ID: 39727373
It is attached to the original question.
0
 
LVL 96

Accepted Solution

by:
Bob Learned earned 500 total points
ID: 39727405
I believe that you are correct in your statement that the 100% stacked bar would be the right choice.

Comparison Chart (100% Stacked Chart)
http://msdn.microsoft.com/en-us/library/gg309515.aspx#StackedChart

<Chart Palette="None" PaletteCustomColors="149,189,66; 197,56,52; 55,118,193; 117,82,160; 49,171,204; 255,136,35; 168,203,104; 209,98,96; 97,142,206; 142,116,178; 93,186,215; 255,155,83">
      <Series>
        <Series ChartType="StackedBar100" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PointWidth=0.75, MaxPixelPointWidth=40">
          <SmartLabelStyle Enabled="True" />
        </Series>
      </Series>
      <ChartAreas>
        <ChartArea BorderColor="White" BorderDashStyle="Solid">
          <AxisY LabelAutoFitMinFontSize="8" TitleForeColor="59, 59, 59" TitleFont="{0}, 10.5px" LineColor="165, 172, 181" IntervalAutoMode="VariableCount">
            <MajorGrid LineColor="239, 242, 246" />
            <MajorTickMark LineColor="165, 172, 181" />
            <LabelStyle Font="{0}, 10.5px" ForeColor="59, 59, 59" />
          </AxisY>
          <AxisX LabelAutoFitMinFontSize="8" TitleForeColor="59, 59, 59" TitleFont="{0}, 10.5px" LineColor="165, 172, 181" IntervalAutoMode="VariableCount">
            <MajorGrid Enabled="False" />
            <MajorTickMark Enabled="False" />
            <LabelStyle Font="{0}, 10.5px" ForeColor="59, 59, 59" />
          </AxisX>
        </ChartArea>
      </ChartAreas>
      <Titles>
        <Title Alignment="TopLeft" DockingOffset="-3" Font="{0}, 13px" ForeColor="0, 0, 0" />
      </Titles>
    </Chart>

Open in new window


The trick would be converting the time intervals to a bar value.  I would think that you could get the difference between "insert_date", and "end_down" in minutes.  That would give you a series of values that you could "stack" on top of each other.
0
 

Author Comment

by:Hers2keep
ID: 39751447
I've been out of town. I will try TheLearnedOne's suggestion. Please do not close this ticket.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
Microsoft Active Directory, the widely used IT infrastructure, is known for its high risk of credential theft. The best way to test your Active Directory’s vulnerabilities to pass-the-ticket, pass-the-hash, privilege escalation, and malware attacks …

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question