|
This sample demonstrates how to change a specific bullet graph options. With .jqBulletGraph("option", optionName, [value]) method you can get or set any jqBulletGraph option. If no value is specified, will act as a getter.
For detailed implementation, please take a look at the Aspx, Razor and Controller code tabs.
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Import Namespace="JQChart.Web.Mvc" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="~/Content/jquery.jqGauges.css" />
<script src="<%: Url.Content("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.jqGauges.min.js") %>" type="text/javascript"></script>
<body>
<div>
<%=Html.JQBulletGraph().BulletGraph()
.ID("jqBulletGraph")
.Orientation(GaugeOrientation.Horizontal)
.Width(400)
.Height(80)
.Border(border =>
{
border.LineWidth(0);
})
.Tooltips(tooltips =>
{
tooltips.Disabled(false).Highlighting(false);
})
.Animation(new TimeSpan(0,0,1))
.QuantitativeScale(scale =>
{
scale.Minimum(0)
.Maximum(100)
.Title("Main Scale")
.Background(gradient =>
{
gradient.LinearGradient(0, 1, 0, 0).ColorStops(colorStops =>
{
colorStops.Add(0, "#A4D020");
colorStops.Add(1, "#BFFE01");
});
})
.Labels(labels =>
{
labels.Offset(0.95);
})
.QualitativeRanges(ranges =>
{
ranges.QualitativeRange()
.Value(47)
.FillStyle(gradient =>
{
gradient.LinearGradient(0, 0, 0, 1).ColorStops(colorStops =>
{
colorStops.Add(0, "#61B603");
colorStops.Add(1, "#448100");
});
});
ranges.QualitativeRange()
.Value(70)
.FillStyle(gradient =>
{
gradient.LinearGradient(0, 1, 0, 0).ColorStops(colorStops =>
{
colorStops.Add(0, "#87B202");
colorStops.Add(1, "#A6DC01");
});
});
});
})
.ComparativeMeasures(comparativeMeasures =>
{
comparativeMeasures.ComparativeMeasure()
.Title("Comparative Measure")
.Value(80)
.FillStyle(gradient =>
{
gradient.LinearGradient(0, 0, 1, 0).ColorStops(colorStops =>
{
colorStops.Add(0, "#E4E4E4");
colorStops.Add(0.552, "#FFFFFF");
});
});
})
.FeaturedMeasures(featuredMeasures =>
{
featuredMeasures.FeaturedMeasure()
.Title("Featured Measure")
.Value(90)
.InnerOffset(0.4)
.OuterOffset(0.6)
.FillStyle(gradient =>
{
gradient.LinearGradient(0, 0, 0, 1).ColorStops(colorStops =>
{
colorStops.Add(0, "#BABABA");
colorStops.Add(0.495, "#FFFFFF");
});
});
})
.Render()%>
</div>
<br />
<input id="buttonBackground" type="button" value="Change Background" />
<input id="buttonRandomValue" type="button" value="Change needle value" />
<br />
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#buttonBackground').click(function () {
$('#jqBulletGraph').jqBulletGraph('option', 'background', '#FF3366');
});
$('#buttonRandomValue').click(function () {
var featuredMeasures = $('#jqBulletGraph').jqBulletGraph('option', 'featuredMeasures');
featuredMeasures[0].value = Math.random() * 100;
$('#jqBulletGraph').jqBulletGraph('update');
});
$('#jqLinearGauge').jqLinearGauge('update');
});
</script>
</body>
</html>
@using JQChart.Web.Mvc
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="~/Content/jquery.jqGauges.css" />
<script src="@Url.Content("~/Scripts/jquery-1.11.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGauges.min.js")" type="text/javascript"></script>
<body>
<div>
@(Html.JQBulletGraph().BulletGraph()
.ID("jqBulletGraph")
.Orientation(GaugeOrientation.Horizontal)
.Width(400)
.Height(80)
.Border(border =>
{
border.LineWidth(0);
})
.Tooltips(tooltips =>
{
tooltips.Disabled(false).Highlighting(false);
})
.Animation(new TimeSpan(0,0,1))
.QuantitativeScale(scale =>
{
scale.Minimum(0)
.Maximum(100)
.Title("Main Scale")
.Background(gradient =>
{
gradient.LinearGradient(0, 1, 0, 0).ColorStops(colorStops =>
{
colorStops.Add(0, "#A4D020");
colorStops.Add(1, "#BFFE01");
});
})
.Labels(labels =>
{
labels.Offset(0.95);
})
.QualitativeRanges(ranges =>
{
ranges.QualitativeRange()
.Value(47)
.FillStyle(gradient =>
{
gradient.LinearGradient(0, 0, 0, 1).ColorStops(colorStops =>
{
colorStops.Add(0, "#61B603");
colorStops.Add(1, "#448100");
});
});
ranges.QualitativeRange()
.Value(70)
.FillStyle(gradient =>
{
gradient.LinearGradient(0, 1, 0, 0).ColorStops(colorStops =>
{
colorStops.Add(0, "#87B202");
colorStops.Add(1, "#A6DC01");
});
});
});
})
.ComparativeMeasures(comparativeMeasures =>
{
comparativeMeasures.ComparativeMeasure()
.Title("Comparative Measure")
.Value(80)
.FillStyle(gradient =>
{
gradient.LinearGradient(0, 0, 1, 0).ColorStops(colorStops =>
{
colorStops.Add(0, "#E4E4E4");
colorStops.Add(0.552, "#FFFFFF");
});
});
})
.FeaturedMeasures(featuredMeasures =>
{
featuredMeasures.FeaturedMeasure()
.Title("Featured Measure")
.Value(90)
.InnerOffset(0.4)
.OuterOffset(0.6)
.FillStyle(gradient =>
{
gradient.LinearGradient(0, 0, 0, 1).ColorStops(colorStops =>
{
colorStops.Add(0, "#BABABA");
colorStops.Add(0.495, "#FFFFFF");
});
});
})
.Render()
)
</div>
<br />
<input id="buttonBackground" type="button" value="Change Background" />
<input id="buttonRandomValue" type="button" value="Change needle value" />
<br />
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#buttonBackground').click(function () {
$('#jqBulletGraph').jqBulletGraph('option', 'background', '#FF3366');
});
$('#buttonRandomValue').click(function () {
var featuredMeasures = $('#jqBulletGraph').jqBulletGraph('option', 'featuredMeasures');
featuredMeasures[0].value = Math.random() * 100;
$('#jqBulletGraph').jqBulletGraph('update');
});
$('#jqLinearGauge').jqLinearGauge('update');
});
</script>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SamplesBrowser.Models;
namespace GaugesSamplesBrowser.Controllers
{
public class GaugeController : Controller
{
public ActionResult ChangeOptions()
{
return View();
}
}
}
|
Follow us on Twitter