Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display

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



Click on the button to see me
This sample demonstrates how to get jqLinearGauge image data URL with .jqLinearGauge('toDataURL', mimetype) method.
The jqLinearGauge 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 HTML code tab.
 
<%@ 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>.jqLinearGauge('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.JQLinearGauge().LinearGauge()
            .ID("jqLinearGauge")
            .Background("#F7F7F7")
            .Width(400)
            .Height(100)
            .Border(border =>
                             {
                                 border.LineWidth(4)
                                       .StrokeStyle("#76786A")
                                       .Padding(10);
                             })
           .Shadows(true)
           .Tooltips(tooltips =>
                                   {
                                       tooltips.Disabled(false).Highlighting(true);
                                   })
           .Animation(new TimeSpan(0,0,1))
           .Scales(scales =>
                      {
                          scales.LinearScale()
                                .Minimum(0)
                                .Maximum(100)
                                .MajorTickMarks(majorTickMarks =>
                                    {
                                       majorTickMarks.Offset(0.28)
                                                     .Length(10)
                                                     .LineWidth(2);
                                    })
                                .MinorTickMarks(minorTickMarks =>
                                    {
                                       minorTickMarks.Offset(0.32)
                                                     .Visible(true)
                                                     .Length(6)
                                                     .LineWidth(2)
                                                     .Interval(2);
                                    })
                                .Labels(labels => 
                                    {
                                        labels.Offset(0.16);
                                    })
                                 .Needles(needles =>
                                 {
                                     needles.LinearNeedle()
                                            .Value(80)
                                            .ZIndex(2)
                                            .Type(NeedleType.Pointer)
                                            .InnerOffset(0.5)
                                            .OuterOffset(1).FillStyle(gradient =>
                                            {
                                                gradient.LinearGradient(0.5, 0, 0.5, 1)
                                                        .ColorStops(colorStops =>
                                                        {
                                                            colorStops.Add(0, "#4F6169");
                                                            colorStops.Add(1, "#252E32");
                                                        });
                                            });
                                 })
                                 .Ranges(ranges =>
                                 {
                                     // Range from 0 to 40
                                     ranges.LinearRange()
                                           .ZIndex(3)
                                           .InnerOffset(0.46)
                                           .OuterStartOffset(0.64)
                                           .OuterEndOffset(0.75)
                                           .StartValue(0)
                                           .EndValue(40)
                                           .FillStyle(gradient =>
                                           {
                                               gradient.LinearGradient(0.5, 0, 0.5, 1)
                                                       .ColorStops(stops =>
                                                            {
                                                                stops.Add(0, "#C5F80B");
                                                                stops.Add(1, "#6B8901");
                                                            });
                                           });

                                     //Range from 40 to 70
                                     ranges.LinearRange()
                                           .ZIndex(3)
                                           .InnerOffset(0.46)
                                           .OuterStartOffset(0.75)
                                           .OuterEndOffset(0.84)
                                           .StartValue(40)
                                           .EndValue(70)
                                           .FillStyle(gradient =>
                                           {
                                               gradient.LinearGradient(0.5, 0, 0.5, 1)
                                                       .ColorStops(stops =>
                                                            {
                                                                stops.Add(0, "#FF3366");
                                                                stops.Add(1, "#B2183E");
                                                            });
                                           });

                                     //Range from 70 to 100
                                     ranges.LinearRange()
                                           .ZIndex(3)
                                           .InnerOffset(0.46)
                                           .OuterStartOffset(0.84)
                                           .OuterEndOffset(0.90)
                                           .StartValue(70)
                                           .EndValue(100)
                                           .FillStyle(gradient =>
                                           {
                                               gradient.LinearGradient(0.5, 0, 0.5, 1)
                                                       .ColorStops(stops =>
                                                            {
                                                                stops.Add(0, "#339CFF");
                                                                stops.Add(1, "#1F66A8");
                                                            });
                                           });
                                 });
                              
                      })
        .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 = $('#jqLinearGauge').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>
    <!--[if IE]><script lang="javascript" type="text/javascript" src="@Url.Content("~/Scripts/excanvas.js")"></script><![endif]-->
</head>
<body>
    <b>.jqLinearGauge('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.JQLinearGauge().LinearGauge()
            .ID("jqLinearGauge")
            .Background("#F7F7F7")
            .Width(400)
            .Height(100)
            .Border(border =>
                             {
                                 border.LineWidth(4)
                                       .StrokeStyle("#76786A")
                                       .Padding(10);
                             })
           .Shadows(true)
           .Tooltips(tooltips =>
                                   {
                                       tooltips.Disabled(false).Highlighting(true);
                                   })
           .Animation(new TimeSpan(0,0,1))
           .Scales(scales =>
                      {
                          scales.LinearScale()
                                .Minimum(0)
                                .Maximum(100)
                                .MajorTickMarks(majorTickMarks =>
                                    {
                                       majorTickMarks.Offset(0.28)
                                                     .Length(10)
                                                     .LineWidth(2);
                                    })
                                .MinorTickMarks(minorTickMarks =>
                                    {
                                       minorTickMarks.Offset(0.32)
                                                     .Visible(true)
                                                     .Length(6)
                                                     .LineWidth(2)
                                                     .Interval(2);
                                    })
                                .Labels(labels => 
                                    {
                                        labels.Offset(0.16);
                                    })
                                 .Needles(needles =>
                                 {
                                     needles.LinearNeedle()
                                            .Value(80)
                                            .ZIndex(2)
                                            .Type(NeedleType.Pointer)
                                            .InnerOffset(0.5)
                                            .OuterOffset(1).FillStyle(gradient =>
                                            {
                                                gradient.LinearGradient(0.5, 0, 0.5, 1)
                                                        .ColorStops(colorStops =>
                                                        {
                                                            colorStops.Add(0, "#4F6169");
                                                            colorStops.Add(1, "#252E32");
                                                        });
                                            });
                                 })
                                 .Ranges(ranges =>
                                 {
                                     // Range from 0 to 40
                                     ranges.LinearRange()
                                           .ZIndex(3)
                                           .InnerOffset(0.46)
                                           .OuterStartOffset(0.64)
                                           .OuterEndOffset(0.75)
                                           .StartValue(0)
                                           .EndValue(40)
                                           .FillStyle(gradient =>
                                           {
                                               gradient.LinearGradient(0.5, 0, 0.5, 1)
                                                       .ColorStops(stops =>
                                                            {
                                                                stops.Add(0, "#C5F80B");
                                                                stops.Add(1, "#6B8901");
                                                            });
                                           });

                                     //Range from 40 to 70
                                     ranges.LinearRange()
                                           .ZIndex(3)
                                           .InnerOffset(0.46)
                                           .OuterStartOffset(0.75)
                                           .OuterEndOffset(0.84)
                                           .StartValue(40)
                                           .EndValue(70)
                                           .FillStyle(gradient =>
                                           {
                                               gradient.LinearGradient(0.5, 0, 0.5, 1)
                                                       .ColorStops(stops =>
                                                            {
                                                                stops.Add(0, "#FF3366");
                                                                stops.Add(1, "#B2183E");
                                                            });
                                           });

                                     //Range from 70 to 100
                                     ranges.LinearRange()
                                           .ZIndex(3)
                                           .InnerOffset(0.46)
                                           .OuterStartOffset(0.84)
                                           .OuterEndOffset(0.90)
                                           .StartValue(70)
                                           .EndValue(100)
                                           .FillStyle(gradient =>
                                           {
                                               gradient.LinearGradient(0.5, 0, 0.5, 1)
                                                       .ColorStops(stops =>
                                                            {
                                                                stops.Add(0, "#339CFF");
                                                                stops.Add(1, "#1F66A8");
                                                            });
                                           });
                                 });
                              
                      })
        .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 = $('#jqLinearGauge').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();
        }

    }
}