ComponentOne
Web API Explorer ASP.NET Web API Explorer
Wijmo5BulletGraph

Wijmo5BulletGraph

Overview

This sample demonstrates how to export a wijmo5 BulletGraph to image file.

Features

Overview
5

Settings

Export
Export Format : Height :
Width :
Export Name :

Description

This sample demonstrates how to export a wijmo5 BulletGraph to image file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApiExplorer.Models;
 
namespace WebApiExplorer.Controllers
{
    public partial class Wijmo5BulletGraphController : Controller
    {
        private readonly ImageExportOptions _bulletGaugeModel = new ImageExportOptions
        {
            Exporter = "wijmo.gauge.ImageExporter"
        };
 
        private readonly ClientSettingsModel _demoSettingsModel = new ClientSettingsModel
        {
            Settings = new Dictionary<string, object[]>
            {
                {"Direction", new object[]{"Right", "Left", "Down", "Up"}},
                {"IsReadOnly", new object[]{false, true }},
                {"Step", new object[]{0.5, 1, 2}},
                {"ShowRanges", new object[]{true, false}},
                {"ShowText", new object[]{"All", "Value", "MinMax", "None"}}
            }
        };
 
        public ActionResult Index()
        {
            ViewBag.DemoSettingsModel = _demoSettingsModel;
            ViewBag.Options = _bulletGaugeModel;
            return View();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
@using WebApiExplorer.Models
@{
    ClientSettingsModel settings = ViewBag.DemoSettingsModel;
    ImageExportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}
 
<div id="@(optionsModel.ControlId)" style="height:50px; width:600px"></div>
@section Settings{
    @Html.Partial("_ImageExportOptions", optionsModel)
}
<script>
    var gauge = new wijmo.gauge.BulletGraph("#@(optionsModel.ControlId)"),
        serverUrl = '@(System.Configuration.ConfigurationManager.AppSettings["WebAPIService"])';
 
    gauge.value = 5;
    gauge.max = 10;
    gauge.min = 0;
    gauge.format = "";
    gauge.step = 0.5;
    gauge.good = 2;
    gauge.bad = 6;
    gauge.target = 9;
    gauge.pointer.thickness = 0.5;
    gauge.isReadOnly = false;
    gauge.showText = "All";
 
    function customChangeDirection(control, value) {
        control.direction = value;
        control.invalidate();
        if (value === "Left" || value === "Right") {
            control.hostElement.style.width = "600px";
            wijmo.Control.getControl("#exportWidth").value = 600;
            control.hostElement.style.height = "50px";
            wijmo.Control.getControl("#exportHeight").value = 50;
        } else {
            control.hostElement.style.width = "50px";
            wijmo.Control.getControl("#exportWidth").value = 50;
            control.hostElement.style.height = "600px";
            wijmo.Control.getControl("#exportHeight").value = 600;
        }
    }
</script>
 
@section Description{
    @Html.Raw(Resources.Wijmo5BulletGraph.Index_Text0)
}