This sample displays a Bubble chart that uses different shapes for the bubble.
For detailed implementation, please take a look at the Aspx code tab.
<%@ Page Language="C#" %>
<%@ Register assembly="JQChart.Web" namespace="JQChart.Web.UI.WebControls" tagprefix="jqChart" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="~/Content/jquery.jqChart.css" />
<link rel="stylesheet" type="text/css" href="~/Content/themes/le-frog/jquery-ui-1.8.20.css" />
<script src="<% = ResolveUrl("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script>
<script src="<% = ResolveUrl("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script>
</head>
<body>
<form runat="server">
<asp:ObjectDataSource ID="ObjectDataSource1"
runat="server"
SelectMethod="GetData"
TypeName="SamplesBrowser.Models.BubbleChartData"></asp:ObjectDataSource>
<jqChart:Chart ID="Chart1" Width="500px" Height="300px" runat="server" DataSourceID="ObjectDataSource1">
<Title Text="Bubble Chart"></Title>
<Animation Enabled="True" Duration="00:00:01" />
<Shadows Enabled="true" />
<Series>
<jqChart:BubbleSeries XValuesField="ValueX1" YValuesField="ValueY1" SizeValuesField="ValueSize1"
Title="Series 1">
<FillStyle Color="#418CF0">
</FillStyle>
<Markers LineWidth="1" StrokeStyle="Black"></Markers>
</jqChart:BubbleSeries>
<jqChart:BubbleSeries XValuesField="ValueX1" YValuesField="ValueY2" SizeValuesField="ValueSize2"
Title="Series 2">
<FillStyle Color="#FCB441">
</FillStyle>
<Markers LineWidth="1" StrokeStyle="Black" MarkerType="Rectangle"></Markers>
</jqChart:BubbleSeries>
</Series>
</jqChart:Chart>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SamplesBrowser.Models
{
public class BubbleChartData
{
public static List<BubbleChartData> GetData()
{
var data = new List<BubbleChartData>();
data.Add(new BubbleChartData(1, 15, 8, 1, 9, 15));
data.Add(new BubbleChartData(2, 18, 4, 2, 8, 24));
data.Add(new BubbleChartData(3, 15, 8, 3, 12, 10));
data.Add(new BubbleChartData(4, 16, 13, 4, 9, 14));
data.Add(new BubbleChartData(5, 14, 11, 5, 7, 12));
return data;
}
public BubbleChartData(double valueX1, double valueY1, double valueSize1,
double valueX2, double valueY2, double valueSize2)
{
this.ValueX1 = valueX1;
this.ValueY1 = valueY1;
this.ValueSize1 = valueSize1;
this.ValueX2 = valueX2;
this.ValueY2 = valueY2;
this.ValueSize2 = valueSize2;
}
public double ValueX1 { get; set; }
public double ValueY1 { get; set; }
public double ValueSize1 { get; set; }
public double ValueX2 { get; set; }
public double ValueY2 { get; set; }
public double ValueSize2 { get; set; }
}
}