jQuery를 사용하여 JSON 타입의 데이터로 히포차트 그리기 


이번 강좌에서는 jQuery를 사용하여 자바스크립트 환경에서 히포차트를 호출하는 방법을 알아 보겠습니다. 


1. Webform1.aspx 생성 - 자바스크립트가 있는 파일로 jQuery 코드가 드어갑니다. 

2. hippochart1.aspx - 히포차트 객체를 이용하여 ajax를 통해 전해 받은 JSON 타입의 데이터로 차트를 그리고 그 이미지 링크를 반환합니다. 


Webform1.aspx




<% @ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits ="Hippo.jQuery.Test.WebForm1" %>

<% @ Register assembly="hwebchart4" namespace="Hippo.WebForm4" tagprefix="Hippo" %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

< html xmlns ="http://www.w3.org/1999/xhtml">
< head runat ="server">
    < title> Hippochart :: jQuery Sample </title >
    < script type ="text/javascript" src ="http://code.jquery.com/jquery-1.9.1.js"></ script>
    < script type ="text/javascript" language ="javascript">  

         // =====================================================================================
         // Draw
        // =====================================================================================

        function DrawChart() {
            var XX = 0;
            var YY = 0;
            var rdata = '[' ;

            for (var i = 0; i < 10; i++) {
                XX = Math.floor(Math.random() * 4);
                YY = Math.floor(Math.random() * 7);

                rdata += '{' ;
                rdata += '"X" : "' + XX + '",' ;
                rdata += '"Y" : "' + YY + '" ' ;
                rdata += '}' ;

                if (i < 9) {
                    rdata += "," ;
                }
            }

            rdata += ']' ;

            $.ajax({
                type: "POST" ,
                async: "true" ,
                url: "hippochart1.aspx/drawchart" ,
                data: "{ 'items' : " + rdata + " }" ,
                contentType: "application/json; charset=utf-8" ,
                dataType: "JSON" ,
                success: function (data) {

                    $( "#chart1" ).attr("src" , data.d);

                },
                error: function (request, status, error) {
                    alert( "code:" + request.status + "\n" "error:" + error + "\n" "message:" + request.responseText);
                }
            });
        }

        $( function () {
            $( "#btnDraw" ).click(function () {
                DrawChart();
            });
        });
   
    </ script>
    < style type ="text/css">
    </ style>
</ head>
< body>
    < form id ="form1" runat ="server">
    < div>  
        < a id ="btnDraw" href ="javascript: ">히포차트 그리기 </ a>
        < br />
        < img src ="" id ="chart1" alt ="hippochart" />
    </ div>
    </ form>
</ body>
</ html>
  




hippochart1.aspx


 


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Configuration;
using System.Web.Script.Serialization;
using System.Web.Script.Services;
using Hippo;

namespace Hippo.jQuery.Test
{
    public class HippoPoint
    {
        public string X { getset ; }
        public string Y { getset ; }
    }

    public partial class Hippochart1 : System.Web.UI.Page
    {
        protected void Page_Load( object sender, EventArgs e)
        {
        }

        [ WebMethod ]
        public static string drawchart( List <HippoPoint > items)
        {
            WebForm4. wHippoChart w = new WebForm4. wHippoChart();

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

            Series sr = new Series();

            foreach (HippoPoint po in items)
            {
                SeriesItem item = new SeriesItem();
                item.Name = po.X;
                item.YValue = double .Parse(po.Y);
                sr.items.Add(item);
            }

            sList.SeriesCollection.Add(sr);

            w.ImageURL = "chart/hippo55.png" ;
            w.SeriesListDictionary.Add(sList);
            w.DrawChart();

            return "chart/hippo55.png?hpo=" DateTime.Now.ToString( "yyyyMMddHHmmss" );
        }
    }
}


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

Posted by 리바이 병장
,


/* 다음 웹인사이드 로그 분석*/