How do i develop attached chart in asp.net c#

I have attached an image of chart . i need help how to develop this chart in asp. net c# 4.5 version.

Thanks in advance.
rnsrAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rnsrAuthor Commented:
attachment.
chart.png
0
Nirmalan NagenthiranCommented:
In a same chart control you need to add two different chart types. Check this link for more explanation

http://www.carlosag.net/Tools/WebChart/sample-column-chart
0
rnsrAuthor Commented:
looks great . I will revert back
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

Robert SchuttSoftware EngineerCommented:
You can do the same with the built-in chart control, there's no real need for an external component.

Since you didn't specify what exactly you needed help with, I assumed it was everything... ;-)

I've been fiddling around with this for a while last night, it can be quite a challenge to get all visual properties looking the same as in the provided picture. I haven't bothered with fonts and spacing yet. Here's what I came up with. Put this in the code-behind of a new aspx page with just a "form1" on it, for example in the Page_Load method:
            // create some random test data
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[] { new DataColumn("date", typeof(double)), new DataColumn("count1", typeof(int)), new DataColumn("count2", typeof(int)), new DataColumn("perc1", typeof(int)), new DataColumn("perc2", typeof(int)) });
            Random rnd = new Random();
            DateTime d = new DateTime(2015, 08, 25).AddDays(-29);
            for (int i = 0; i < 30; i++) {
                dt.Rows.Add(d.ToOADate(), rnd.Next(0, 100), rnd.Next(0, 100), rnd.Next(0, 22), rnd.Next(0, 2));
                d = d.AddDays(1);
            }

            // create the chart object
            Chart ch1 = new Chart();
            ch1.ImageStorageMode = ImageStorageMode.UseImageLocation;
            ch1.Width = 1150;
            ch1.Height = 300;

            // add stacked columns first, show behind the lines
            ch1.Series.Add("s3");
            ch1.Series["s3"].ChartType = SeriesChartType.StackedColumn;
            ch1.Series["s3"].Color = Color.FromArgb(255, 141, 255, 230);
            ch1.Series["s3"].XValueMember = "date";
            ch1.Series["s3"].XValueType = ChartValueType.Date;
            ch1.Series["s3"].YValueMembers = "perc1";
            ch1.Series["s3"].CustomProperties = "PixelPointWidth=15";
            ch1.Series["s3"].BorderWidth = 1;
            ch1.Series["s3"].BorderColor = Color.White;

            ch1.Series.Add("s4");
            ch1.Series["s4"].ChartType = SeriesChartType.StackedColumn;
            ch1.Series["s4"].Color = Color.FromArgb(255, 169, 202, 241);
            ch1.Series["s4"].XValueMember = "date";
            ch1.Series["s4"].XValueType = ChartValueType.Date;
            ch1.Series["s4"].YValueMembers = "perc2";
            ch1.Series["s4"].CustomProperties = "PixelPointWidth=15";
            ch1.Series["s4"].BorderWidth = 1;
            ch1.Series["s4"].BorderColor = Color.White;

            // lines next, using secondary Y axis (on the right)
            ch1.Series.Add("s1");
            ch1.Series["s1"].ChartType = SeriesChartType.Line;
            ch1.Series["s1"].MarkerStyle = MarkerStyle.Circle;
            ch1.Series["s1"].MarkerSize = 8;
            ch1.Series["s1"].Color = Color.FromArgb(255, 24, 99, 78);
            ch1.Series["s1"].BorderWidth = 2;
            ch1.Series["s1"].XValueMember = "date";
            ch1.Series["s1"].XValueType = ChartValueType.Date;
            ch1.Series["s1"].YValueMembers = "count1";
            ch1.Series["s1"].YAxisType = AxisType.Secondary;

            ch1.Series.Add("s2");
            ch1.Series["s2"].ChartType = SeriesChartType.Line;
            ch1.Series["s2"].MarkerStyle = MarkerStyle.Circle;
            ch1.Series["s2"].MarkerSize = 8;
            ch1.Series["s2"].Color = Color.FromArgb(255, 184, 66, 66);
            ch1.Series["s2"].BorderWidth = 2;
            ch1.Series["s2"].XValueMember = "date";
            ch1.Series["s2"].XValueType = ChartValueType.Date;
            ch1.Series["s2"].YValueMembers = "count2";
            ch1.Series["s2"].YAxisType = AxisType.Secondary;

            // create the chartArea and set properties to match the posted picture
            ch1.ChartAreas.Add("ca1");
            //ch1.ChartAreas["ca1"].AxisX.Title = "Date";
            ch1.ChartAreas["ca1"].AxisX.LineColor = Color.FromArgb(255, 192, 208, 224);
            ch1.ChartAreas["ca1"].AxisX.MajorGrid.Enabled = false;
            ch1.ChartAreas["ca1"].AxisX.MajorTickMark.LineColor = Color.FromArgb(255, 192, 208, 224);
            ch1.ChartAreas["ca1"].AxisX.MajorTickMark.Size = (10 / (float)ch1.Height.Value) * 100;
            ch1.ChartAreas["ca1"].AxisX.Interval = 2;
            ch1.ChartAreas["ca1"].AxisX.IntervalType = DateTimeIntervalType.Days;
            ch1.ChartAreas["ca1"].AxisX.IntervalOffset = 2;
            ch1.ChartAreas["ca1"].AxisX.IntervalOffsetType = DateTimeIntervalType.Days;
            ch1.ChartAreas["ca1"].AxisX.LabelStyle.Format = "dd. MMM";
            ch1.ChartAreas["ca1"].AxisX.LabelStyle.Interval = 2;
            ch1.ChartAreas["ca1"].AxisX.LabelStyle.IntervalType = DateTimeIntervalType.Days;
            ch1.ChartAreas["ca1"].AxisX.LabelStyle.IntervalOffset = 2;
            ch1.ChartAreas["ca1"].AxisX.LabelStyle.IntervalOffsetType = DateTimeIntervalType.Days;
            ch1.ChartAreas["ca1"].AxisY.Title = "Count";
            ch1.ChartAreas["ca1"].AxisY.LineColor = Color.Transparent;
            ch1.ChartAreas["ca1"].AxisY.MajorTickMark.Enabled = false;
            ch1.ChartAreas["ca1"].AxisY.Maximum = 25;
            ch1.ChartAreas["ca1"].AxisY.Interval = 5;
            ch1.ChartAreas["ca1"].AxisY.MajorGrid.Enabled = false;
            ch1.ChartAreas["ca1"].AxisY2.Title = "Percentage";
            ch1.ChartAreas["ca1"].AxisY2.LineColor = Color.Transparent;
            ch1.ChartAreas["ca1"].AxisY2.MajorTickMark.LineColor = Color.FromArgb(255, 192, 192, 192);
            ch1.ChartAreas["ca1"].AxisY2.MajorGrid.LineColor = Color.FromArgb(255, 192, 192, 192);
            ch1.ChartAreas["ca1"].AxisY2.Maximum = 100;
            ch1.ChartAreas["ca1"].AxisY2.Interval = 25;
            ch1.ChartAreas["ca1"].AxisY2.LabelStyle.Format = @"0 \%";

            // bind the data to the chart object
            ch1.DataSource = dt;
            ch1.DataBind();

            // add the chart object to the form to show it on the page
            this.form1.Controls.Add(ch1);

Open in new window

generated chart
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
rnsrAuthor Commented:
I am lucky to find both comments useful . if I have capacity I would give 2000 marks. Excellent.
0
rnsrAuthor Commented:
Sorry , it is creating image file of chart. I do not require image .  Any Idea how to use HighChart for this.
0
Robert SchuttSoftware EngineerCommented:
Frankly that makes it a completely different question. The chart will then be generated client-side. You will probably need an expert with specific knowledge of that plugin to get it to look like that, although simply using the web-docs should get you a long way (and you may be able to use my code to determine what to look for).

Biggest challenge is often how to get the data from the server to the client. There's 2 options usually:

1) generate a javascript variable on your page (transforming the data set to an array in the code behind);
2) use a webservice or similar construct (can be included in your existing web project) to deliver data real-time (eg in json format) to the chart plugin.

PS: a number of things are  possible even when using an image, like data-specific tooltips and click-through URLs on different parts of the image. But other things (if you want to make the chart really 'pop') you probably do need client-side scripting for.
0
rnsrAuthor Commented:
May be helpful to others.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.