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" );
}
}
}
|
No comments:
Post a Comment