FlexChart
FlexChart
Bubble
Features
Sample
Description
Bubble
This view shows how to create bubble charts using the FlexChart control.
Bubble charts are similar to other chart types, except in addition to X and Y you must specify a binding for the bubble size. This is done by setting the Binding property to a comma-delimited string that specifies the name of the properties to be used for the Y and size values for each bubble.
In this example, the chart is bound to a list containing objects with "X", "Y", and "Size" properties. The chart contains a single series and its Binding property is set to the string "Y,Size".
Source
BubbleController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcExplorer.Models;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
namespace MvcExplorer.Controllers
{
public partial class FlexChartController : Controller
{
public ActionResult Bubble()
{
List<Dot> bubbles = new List<Dot>();
var rand = new Random(0);
for (int i = 0; i < 30; i++)
{
double x = i;
double y = rand.Next(1, 10);
double size = rand.Next(1, 10);
bubbles.Add(new Dot { X = x, Y = y * 10, Size = size * 100 });
}
return View(bubbles);
}
}
}
Bubble.cshtml
@model IEnumerable<Dot>
<div id="flexChart" style="height: 300px"></div>
@(Html.C1().FlexChart("#flexChart").ChartType(C1.Web.Mvc.Chart.ChartType.Bubble).Bind("X", Model).Series(sers =>
{
sers.Add().Binding("Y,Size");
}))
@section Description{
<h3>
@Html.Raw(Resources.FlexChart.Bubble_Bubble)
</h3>
<p>@Html.Raw(Resources.FlexChart.Bubble_Text0)</p>
<p>@Html.Raw(Resources.FlexChart.Bubble_Text1)</p>
<p>@Html.Raw(Resources.FlexChart.Bubble_Text2)</p>
}
Documentation