Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display

.jqBulletGraph('toDataURL', mimetype) method is not supported in IE6, IE7 and IE8.



Click on the button to see me
This sample demonstrates how to get jqBulletGraph image data URL with .jqBulletGraph('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>
    <!--[if IE]><script lang="javascript" type="text/javascript" src="<%: Url.Content("~/Scripts/excanvas.js") %>"></script><![endif]-->
</head>
<body>
    <b>.jqBulletGraph('toDataURL', mimetype) method is not supported in IE6, IE7 and IE8.</b>
    <br />
    <input id="button" type="button" value="Click to view the chart as an image" />
    <br />
    <br />
        <%=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()%>
            </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 = $('#jqBulletGraph').jqBulletGraph('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>
    <!--[if IE]><script lang="javascript" type="text/javascript" src="@Url.Content("~/Scripts/excanvas.js")"></script><![endif]-->
</head>
<body>
    <b>.jqBulletGraph('toDataURL', mimetype) method is not supported in IE6, IE7 and IE8.</b>
    <br />
    <input id="button" type="button" value="Click to view the chart as an image" />
    <br />
    <br />
          @(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() 
          )
            </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 = $('#jqBulletGraph').jqBulletGraph('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();
        }

    }
}