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

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 { get; set ; }         public string Y { get; set ; }     }     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" );         }     } }