[기초강좌] 히포차트 ASP.NET MVC 5 에서 사용하기 종합 안내

히포차트4/개발 강좌 2015. 11. 5. 16:38


히포차트 웹 컨트롤을 MVC 5 환경에서 사용해보자!

 

 

먼저, Visual Studio Community 2015 를 설치하고 새 프로젝트를 시작합니다.

 

 

 

 

asp.net 웹 어플리케이션 > MVC 를 선택하고 확인을 누릅니다.

 

다음으로 아래와 같이 hippo 라는 임의의 폴더를 하나 생성하시고 웹 유저 컨트롤을 만듭니다.

 

 

 

그림에서는 2개를 만들어 놨네요 !!

 

 

 

 

 

다음으로 유저컨트롤로 이동하셔서 도구상자에 있는 히포차트 웹 컨트롤을 마우스로 폼에 끌어다 놓습니다.

도구 상자에 추가하는 방법은 히포차트 평가판 페이지에 PDF 문서를 참조하시기 바랍니다.

 

 

 

 

다음 cs 코드로 이동하셔서

 

 

 

이렇게 일반 유저컨트롤로 되어 있는 부모 클래스를

 

 

 

이렇게 MVC 유저 컨트롤로 변경해주시면 모든 작업이 끝이 납니다.

(System.Web.Mvc.ViewUserControl)

 

이렇게 하는 이유는 예전버전에서는 뷰유저컨트롤이 새 항목 추가에 있었는데 최신 버전 VS에서는 보이지 않더군요. 해서 이렇게 ASCX를 추가한 후 변경해주시는 방법을 사용합니다.

 

 

 이제부터 히포차트 코드를 삽입하여 개발을 하시면 됩니다 ^^

 

cs 코드 삽입

}
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Hippo;

namespace WebApplication3.Views.hippo
{
    public partial class hippochart1 : System.Web.Mvc.ViewUserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            SeriesList sList = new SeriesList();
            sList.ChartType = ChartType.Pie;

            SeriesList sList2 = new SeriesList();
            sList2.ChartType = ChartType.Pie;

            sList.GraphTitle.Label.Text = "내부 서버 1";

            sList2.GraphTitle.Label.Text = "외부 서버 2";

            sList.Margin = 50;
            sList2.Margin = 50;

            Random r = new Random();
            for (int i = 0; i < 2; i++)
            {
                Series sr = new Series();
                sr.Name = "Pie" + i.ToString();

                sr.UnAxisFactor.TextLocation = UnAxisFigureTextLocation.Outer;
                sr.UnAxisFactor.PieTypes = PieType.TwoDemention;
                sr.UnAxisFactor.UnAxisDisplayItemType = UnAxisDisplayItemType.Figure_Name;

                for (int x = 0; x < 8; x++)
                {
                    SeriesItem item = new SeriesItem();
                    item.Name = "item" + x.ToString();
                    item.IsShowFigureText = true;

                    item.YValue = r.Next(99);

                    sr.items.Add(item);
                }

                if (i == 0) sList.SeriesCollection.Add(sr);
                if (i == 1) sList2.SeriesCollection.Add(sr);
            }
            
            this.wHippoChart1.Titles.Label.Text = "2015년 6월 사내 Private Server Monitoring Test";
            this.wHippoChart1.LegendBox.IsDivideLine = true;
            this.wHippoChart1.LegendBox.Visible = true;
            this.wHippoChart1.Direction = GraphAreaLocation.Horizontal;
            this.wHippoChart1.SeriesListDictionary.Add(sList);
            this.wHippoChart1.SeriesListDictionary.Add(sList2);
            this.wHippoChart1.DrawChart();
        }
    }
}

 

 

 자 ~ 한 번 적용해 볼까요!!!

 

 [적용 1] Home / Index.cshtml

 

기본으로 생성되는 인덱스 페이지에 아래와 같이 삽입해봅니다.

@{
    ViewBag.Title = "Home Page";
}
@Html.Partial("~/views/hippo/hippochart1.ascx")


<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

 
<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div> 

 

 

 

[적용 2] Home / Contact.cshtml

 

여기서 문제가 발생하는데요, 이미지가 엑박? 이라고 하죠. 안뜨게 됩니다. 이는 주어진 경로가 맞지 않아서 생기는 문제인데요. cs 코드에서 이미지 경로를 지정해주면 간단히 처리됩니다.

 

@{
    ViewBag.Title = "Contact";
}
<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>


@Html.Partial("~/views/hippo/hippochart1.ascx")


<address>
    One Microsoft Way<br />
    Redmond, WA 98052-6399<br />
    <abbr title="Phone">P:</abbr>
    425.555.0100
</address>

<address>
    <strong>Support:</strong>   <a href="mailto:Support@example.com">Support@example.com</a><br />
    <strong>Marketing:</strong> <a href="mailto:Marketing@example.com">Marketing@example.com</a>
</address>

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Hippo;

namespace WebApplication3.Views.hippo
{
    public partial class hippochart1 : System.Web.Mvc.ViewUserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            SeriesList sList = new SeriesList();
            sList.ChartType = ChartType.Pie;

            SeriesList sList2 = new SeriesList();
            sList2.ChartType = ChartType.Pie;

            sList.GraphTitle.Label.Text = "내부 서버 1";

            sList2.GraphTitle.Label.Text = "외부 서버 2";

            sList.Margin = 50;
            sList2.Margin = 50;

            Random r = new Random();
            for (int i = 0; i < 2; i++)
            {
                Series sr = new Series();
                sr.Name = "Pie" + i.ToString();

                sr.UnAxisFactor.TextLocation = UnAxisFigureTextLocation.Outer;
                sr.UnAxisFactor.PieTypes = PieType.TwoDemention;
                sr.UnAxisFactor.UnAxisDisplayItemType = UnAxisDisplayItemType.Figure_Name;

                for (int x = 0; x < 8; x++)
                {
                    SeriesItem item = new SeriesItem();
                    item.Name = "item" + x.ToString();
                    item.IsShowFigureText = true;

                    item.YValue = r.Next(99);

                    sr.items.Add(item);
                }

                if (i == 0) sList.SeriesCollection.Add(sr);
                if (i == 1) sList2.SeriesCollection.Add(sr);
            }

            this.wHippoChart1.ImageURL = "/webChart1.Png";  <<====
            this.wHippoChart1.Titles.Label.Text = "2015년 6월 사내 Private Server Monitoring Test";
            this.wHippoChart1.LegendBox.IsDivideLine = true;
            this.wHippoChart1.LegendBox.Visible = true;
            this.wHippoChart1.Direction = GraphAreaLocation.Horizontal;
            this.wHippoChart1.SeriesListDictionary.Add(sList);
            this.wHippoChart1.SeriesListDictionary.Add(sList2);
            this.wHippoChart1.DrawChart();
        }
    }
}

 

 

 

 

 히포차트가 잘 나오네요 ^^

 

 기타 궁금하신 점은 히포차트 고객지원 페이지를 통해 문의해주십시오

 

 

 

 

저작자표시 비영리 변경금지
사업자 정보 표시
히포차트 | 하영대 | 경기도 성남시 수정구 복정동 631-5 401 | 사업자 등록번호 : 129-34-55719 | TEL : 031-751-6673 | Mail : hippochart@gmail.com | 통신판매신고번호 : 제 2010-경기성남-1203호 | 사이버몰의 이용약관 바로가기

'히포차트4 > 개발 강좌' 카테고리의 다른 글

hippochart c#, vb로 실시간 차트와 스크롤 기능을 동시에 구현하는 방법  (0) 2016.03.22
[기초 강좌] 히포차트 데이터베이스(DB 디비) 연동하는 방법  (0) 2015.10.28
히포차트 마커와 틱(marker and tick) 에 대한 고찰  (0) 2015.08.31
Hippochart를 WPF 윈도우 어플리케이션에 추가해보자.  (0) 2013.05.28
jQuery를 사용하여 JSON 타입의 데이터로 히포차트 그리기  (1) 2013.05.25

Posted by 리바이 병장
,
/* 다음 웹인사이드 로그 분석*/

티스토리툴바