Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display




Click on the button to see me
This sample demonstrates how to get jqSegmentedDisplay image data URL with .jqSegmentedDisplay('toDataURL', mimetype) method.
The jqBulletGraph can export its image to a data URL (e.g., data:image/png;base64,iVBORw0KGg...). This data may then be rendered in the browser, which could then be saved.

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>
    <input id="button" type="button" value="Click to view the display as an image" />
    <br />
    <br />
    <%=Html.JQSegmentedDisplay().SegmentedDisplay()
                .ID("jqSegmentedDisplay")
                .Width(500)
                .Height(100)
                .Background("#DCDCDC")
                .Digits(10)
                .SegmentMode(SegmentMode.SevenSegment)
                .Text("0123456789")
                .TextForeground("#333333")
                .TextForegroundUnlit("rgba(201, 201, 201, 0.5)")
                .Border(border =>
                    {
                        border.StrokeStyle("#76786A").Padding(10).LineWidth(4);
                    })
        .Render()%>
    <br />
    <img src="" id="canvasImg" alt="Click on the button to see me" />
    <script lang="javascript" type="text/javascript">
        $(document).ready(function () {

            $('#button').click(function () {
                var dataURL = $('#jqSegmentedDisplay').jqLinearGauge('todataurl', 'image/png');
                document.getElementById("canvasImg").src = dataURL;
            });
        });
    </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>
    <input id="button" type="button" value="Click to view the display as an image" />
    <br />
    <br />
      @(Html.JQSegmentedDisplay().SegmentedDisplay()
                .ID("jqSegmentedDisplay")
                .Width(500)
                .Height(100)
                .Background("#DCDCDC")
                .Digits(10)
                .SegmentMode(SegmentMode.SevenSegment)
                .Text("0123456789")
                .TextForeground("#333333")
                .TextForegroundUnlit("rgba(201, 201, 201, 0.5)")
                .Border(border =>
                    {
                        border.StrokeStyle("#76786A").Padding(10).LineWidth(4);
                    })
        .Render() 
          )
    <br />
    <img src="" id="canvasImg" alt="Click on the button to see me" />
    <script lang="javascript" type="text/javascript">
        $(document).ready(function () {

            $('#button').click(function () {
                var dataURL = $('#jqSegmentedDisplay').jqLinearGauge('todataurl', 'image/png');
                document.getElementById("canvasImg").src = dataURL;
            });
        });
    </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 GetImageDataUrl()
        {
            return View();
        }

    }
}