OSS で利用できる機能
ズームバー - 概要
igZoombar は jQuery UI のズーム スライダー コントロールです。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
ズームバーはスライダーのようなコントロールです。最小値および最大値を表す 2 つのハンドルがあります。igDataChart と使用すると、データのサブセットを表示できます。サンプルをすべて表示するには、メニューを参照してください。
コード ビュー
クリップボードへコピー
<div id="chartOverview"></div>
<div id="zoomOverview"></div>
<div id="buttonset" class="buttonset">
<input type="radio" id="day" name="radio"></input><label for="day">日</label>
<input type="radio" id="week" name="radio"></input><label for="week">週</label>
<input type="radio" id="month" name="radio"></input><label for="month">月</label>
</div>
<div id="date">
</div>
<div id="popoverLeft"></div>
<div id="popoverRight"></div>
.buttonset
{
position: absolute;
top: 0px;
left: 50px;
z-index: 10000;
}
.buttonset > label
{
width: 60px;
height: 26px;
margin-right: -4px!important;
}
.tooltip{
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<style type="text/css">
.buttonset
{
position: absolute;
top: 0px;
left: 50px;
z-index: 10000;
}
.buttonset > label
{
width: 60px;
height: 26px;
margin-right: -4px!important;
}
.tooltip{
font-weight: bold;
}
</style>
<script id="tooltipTemplate" type="text/x-jquery-tmpl">
<span class="tooltip">${item.DateString}</span><br />
<span class="tooltip">始値: </span><span>${item.Open}</span><br />
<span class="tooltip">安値: </span><span>${item.Low}</span><br />
<span class="tooltip">高値: </span><span>${item.High}</span><br />
<span class="tooltip">終値: </span><span>${item.Close}</span><br />
</script>
</head>
<body>
<div id="chartOverview"></div>
<div id="zoomOverview"></div>
<div id="buttonset" class="buttonset">
<input type="radio" id="day" name="radio" /><label for="day">日</label>
<input type="radio" id="week" name="radio" /><label for="week">週</label>
<input type="radio" id="month" name="radio" /><label for="month">月</label>
</div>
<div id="date">
</div>
<div id="popoverLeft"></div>
<div id="popoverRight"></div>
<script src="/data-files/financial-data-random.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var chartOverview = $("#chartOverview"),
zoombarOverview = $("#zoomOverview"),
popoverTimeout = 0,
popoverLeft,
popoverRight,
lastTarget,
currentlyDragged,
zoomParams;
chartOverview.igDataChart({
width: "100%",
height: "300px",
axes: [
{
name: "xAxis",
type: "categoryDateTimeX",
dataSource: financialData1,
dateTimeMemberPath: "Date",
labelVisibility: "visible"
},
{
name: "yAxis",
type: "numericY"
}
],
series: [
{
name: "series1",
dataSource: financialData1,
title: "価格シリーズ",
type: "financial",
isTransitionInEnabled: true,
displayType: "ohlc",
xAxis: "xAxis",
yAxis: "yAxis",
openMemberPath: "Open",
highMemberPath: "High",
lowMemberPath: "Low",
showTooltip: true,
tooltipTemplate: "tooltipTemplate",
closeMemberPath: "Close",
thickness: 2,
trendLineBrush: "rgba(68, 172, 214, .8)",
trendLineThickness: 5,
trendLineType: "exponentialAverage",
negativeBrush: "rgba(198, 45, 54, .8)"
},
{
name: "series2",
dataSource: financialData2,
title: "価格シリーズ",
type: "financial",
isTransitionInEnabled: true,
xAxis: "xAxis",
yAxis: "yAxis",
openMemberPath: "Open",
highMemberPath: "High",
lowMemberPath: "Low",
closeMemberPath: "Close",
thickness: 2,
showTooltip: true,
tooltipTemplate: "tooltipTemplate",
trendLineBrush: "rgba(73, 73, 73, .8)",
trendLineThickness: 5,
trendLineType: "exponentialAverage",
negativeBrush: "rgba(198, 45, 54, .8)",
displayType: "ohlc"
}
],
horizontalZoomable: true,
verticalZoomable: false,
windowResponse: "immediate",
refreshCompleted: function (e, ui) {
if ($("#chartOverview")[0] !== undefined && $("#chartOverview")[0] !== null) {
var viewport = ui.chart.gridAreaRect,
leftMostValue = $("#chartOverview").igDataChart("unscaleValue", "xAxis", viewport.left),
rightMostValue = $("#chartOverview").igDataChart("unscaleValue", "xAxis", viewport.left + viewport.width);
// get the dates corresponding to the values
leftMostValue = new Date(leftMostValue);
rightMostValue = new Date(rightMostValue);
// set the dates to the popover
if (popoverLeft.data("igPopover")) {
popoverLeft.igPopover("setContent", $.ig.formatter(leftMostValue, "date", "date"));
}
if (popoverRight.data("igPopover")) {
popoverRight.igPopover("setContent", $.ig.formatter(rightMostValue, "date", "date"));
}
zoomParams = {
left: ui.chart.actualWindowRect ? ui.chart.actualWindowRect.left : 0.35,
width: ui.chart.actualWindowRect ? ui.chart.actualWindowRect.width : 0.30
}
}
}
});
$("#zoomOverview").igZoombar({
target: "#chartOverview",
zoomWindowMinWidth: 1.2,
windowResized: function (evt, ui) {
var target = $(evt.originalEvent.target),
handle = target.hasClass("ui-igzoombar-window-handle") ?
target : lastTarget,
handle = handle.igPopover({
direction: "top"
}),
container =handle ? handle.igPopover("container").parent().parent(): null;
if (target.hasClass("ui-igzoombar-window-handle")) {
lastTarget = target;
}
if (currentlyDragged && handle[0] !== currentlyDragged[0]) {
currentlyDragged.igPopover("hide");
}
// show the popover if it's not already visible
if (container && !container.is(":visible")) {
handle.igPopover("show");
}
if (handle) {
// update popovers position
handle.igPopover("setCoordinates", {
top: handle.offset().top - container.outerHeight(),
left: handle.offset().left - container.outerWidth() / 2 + 5
});
currentlyDragged = handle;
if (popoverTimeout > 0) {
clearTimeout(popoverTimeout);
}
popoverTimeout = setTimeout(function () {
popoverLeft.igPopover("hide");
popoverRight.igPopover("hide");
popoverTimeout = 0;
}, 2000);
// finally reset the buttonset
$("#buttonset input").removeAttr("checked");
$("#buttonset").buttonset("refresh");
}
}
});
var lastSelectedButton;
function onClick(button, label) {
var newWidth,
activeCss = "ui-state-active",
viewport = chartOverview.igDataChart("option", "gridAreaRect"),
leftMostValue = chartOverview.igDataChart("unscaleValue", "xAxis", viewport.left);
if (button === "day") {
newWidth = 24 * 60 * 60 * 1000;
} else if (button === "week") {
newWidth = 7 * 24 * 60 * 60 * 1000;
} else if (button === "month") {
newWidth = 30 * 24 * 60 * 60 * 1000;
}
// do not process same selected button twice
if (!newWidth || lastSelectedButton === button)
return;
lastSelectedButton = button;
newWidth = chartOverview.igDataChart("scaleValue", "xAxis", new Date(leftMostValue + newWidth));
zoombarOverview.igZoombar("zoom", zoomParams.left * 100, (newWidth * zoomParams.width / viewport.width) * 100);
// verify/fix appearance of active button
if (label) {
setTimeout(function () {
// condition when mouse-click of buttonset failed
if (label.className.indexOf(activeCss) < 0) {
var old = $("#buttonset").find("." + activeCss);
old.removeClass(activeCss).removeClass("ui-state-focus");
label.className += " " + activeCss;
}
}, 40);
}
}
// Note: buttonset has a bug with raising click events.
// To get around, use mouseup with check for "LABEL.htmlFor"
$("#buttonset").buttonset().click(function (evt) {
onClick(evt.target.id);
}).mouseup(function(evt) {
var label = evt.target;
if (label.nodeName !== "LABEL")
label = label.parentNode;
onClick(label.htmlFor, label);
});
popoverLeft = $("#zoomOverview_zoombar_mask_left_handle");
popoverRight = $("#zoomOverview_zoombar_mask_right_handle");
popoverLeft.igPopover({
direction: "top",
showOn: "focus"
});
popoverRight.igPopover({
direction: "top",
showOn: "focus"
});
});
</script>
</body>
</html>
var financialData1 = [{
"Index": 0,
"Open": 1000,
"High": 1025.25,
"Low": 970.25,
"Close": 1025,
"Volume": 1982.25,
"Date": new Date(1262408400000),
"DateString": "1/2/2010",
"Category": null,
"Change": 25,
"ChangePerCent": 2.5
}, {
"Index": 1,
"Open": 1025,
"High": 1062.25,
"Low": 1006.25,
"Close": 1057,
"Volume": 1981.5,
"Date": new Date(1262494800000),
"DateString": "1/3/2010",
"Category": null,
"Change": 32,
"ChangePerCent": 3.1219512195121952
}, {
"Index": 2,
"Open": 1057,
"High": 1078.5,
"Low": 1019,
"Close": 1058,
"Volume": 1963.25,
"Date": new Date(1262581200000),
"DateString": "1/4/2010",
"Category": null,
"Change": 1,
"ChangePerCent": 0.0946073793755913
}, {
"Index": 3,
"Open": 1058,
"High": 1079.75,
"Low": 1027.5,
"Close": 1072,
"Volume": 1986.25,
"Date": new Date(1262667600000),
"DateString": "1/5/2010",
"Category": null,
"Change": 14,
"ChangePerCent": 1.3232514177693762
}, {
"Index": 4,
"Open": 1072,
"High": 1098,
"Low": 1048,
"Close": 1056,
"Volume": 1972,
"Date": new Date(1262754000000),
"DateString": "1/6/2010",
"Category": null,
"Change": -16,
"ChangePerCent": -1.4925373134328357
}, {
"Index": 5,
"Open": 1056,
"High": 1072.5,
"Low": 1026.75,
"Close": 1043,
"Volume": 1969,
"Date": new Date(1262840400000),
"DateString": "1/7/2010",
"Category": null,
"Change": -13,
"ChangePerCent": -1.231060606060606
}, {
"Index": 6,
"Open": 1043,
"High": 1062.5,
"Low": 1024.25,
"Close": 1029,
"Volume": 1956.75,
"Date": new Date(1262926800000),
"DateString": "1/8/2010",
"Category": null,
"Change": -14,
"ChangePerCent": -1.3422818791946309
}, {
"Index": 7,
"Open": 1029,
"High": 1063.5,
"Low": 999.5,
"Close": 1011,
"Volume": 1967,
"Date": new Date(1263013200000),
"DateString": "1/9/2010",
"Category": null,
"Change": -18,
"ChangePerCent": -1.749271137026239
}, {
"Index": 8,
"Open": 1011,
"High": 1037.75,
"Low": 996,
"Close": 1027,
"Volume": 1995,
"Date": new Date(1263099600000),
"DateString": "1/10/2010",
"Category": null,
"Change": 16,
"ChangePerCent": 1.5825914935707219
}, {
"Index": 9,
"Open": 1027,
"High": 1062,
"Low": 997,
"Close": 1026,
"Volume": 1969.75,
"Date": new Date(1263186000000),
"DateString": "1/11/2010",
"Category": null,
"Change": -1,
"ChangePerCent": -0.097370983446932818
}, {
"Index": 10,
"Open": 1026,
"High": 1041.5,
"Low": 998.5,
"Close": 1006,
"Volume": 1958.25,
"Date": new Date(1263272400000),
"DateString": "1/12/2010",
"Category": null,
"Change": -20,
"ChangePerCent": -1.9493177387914229
}, {
"Index": 11,
"Open": 1006,
"High": 1035.25,
"Low": 978.5,
"Close": 1018,
"Volume": 1947.75,
"Date": new Date(1263358800000),
"DateString": "1/13/2010",
"Category": null,
"Change": 12,
"ChangePerCent": 1.1928429423459244
}, {
"Index": 12,
"Open": 1018,
"High": 1035.75,
"Low": 990,
"Close": 1020,
"Volume": 1946,
"Date": new Date(1263445200000),
"DateString": "1/14/2010",
"Category": null,
"Change": 2,
"ChangePerCent": 0.19646365422396855
}, {
"Index": 13,
"Open": 1020,
"High": 1050,
"Low": 1003.25,
"Close": 1049,
"Volume": 1940.5,
"Date": new Date(1263531600000),
"DateString": "1/15/2010",
"Category": null,
"Change": 29,
"ChangePerCent": 2.8431372549019609
}, {
"Index": 14,
"Open": 1049,
"High": 1062.75,
"Low": 1027.5,
"Close": 1034,
"Volume": 1953.25,
"Date": new Date(1263618000000),
"DateString": "1/16/2010",
"Category": null,
"Change": -15,
"ChangePerCent": -1.4299332697807436
}, {
"Index": 15,
"Open": 1034,
"High": 1054.5,
"Low": 1011.75,
"Close": 1022,
"Volume": 1926.25,
"Date": new Date(1263704400000),
"DateString": "1/17/2010",
"Category": null,
"Change": -12,
"ChangePerCent": -1.1605415860735011
}, {
"Index": 16,
"Open": 1022,
"High": 1046,
"Low": 994.25,
"Close": 1021,
"Volume": 1956.25,
"Date": new Date(1263790800000),
"DateString": "1/18/2010",
"Category": null,
"Change": -1,
"ChangePerCent": -0.097847358121330719
}, {
"Index": 17,
"Open": 1021,
"High": 1056.25,
"Low": 982.75,
"Close": 1001,
"Volume": 1955.25,
"Date": new Date(1263877200000),
"DateString": "1/19/2010",
"Category": null,
"Change": -20,
"ChangePerCent": -1.9588638589618024
}, {
"Index": 18,
"Open": 1001,
"High": 1017,
"Low": 979,
"Close": 1014,
"Volume": 1976.25,
"Date": new Date(1263963600000),
"DateString": "1/20/2010",
"Category": null,
"Change": 13,
"ChangePerCent": 1.2987012987012987
}, {
"Index": 19,
"Open": 1014,
"High": 1037.75,
"Low": 982.25,
"Close": 1008,
"Volume": 1966.25,
"Date": new Date(1264050000000),
"DateString": "1/21/2010",
"Category": null,
"Change": -6,
"ChangePerCent": -0.591715976331361
}, {
"Index": 20,
"Open": 1008,
"High": 1021,
"Low": 983.5,
"Close": 984,
"Volume": 1949.75,
"Date": new Date(1264136400000),
"DateString": "1/22/2010",
"Category": null,
"Change": -24,
"ChangePerCent": -2.3809523809523809
}, {
"Index": 21,
"Open": 984,
"High": 1018.75,
"Low": 949.5,
"Close": 994,
"Volume": 1921.25,
"Date": new Date(1264222800000),
"DateString": "1/23/2010",
"Category": null,
"Change": 10,
"ChangePerCent": 1.0162601626016259
}, {
"Index": 22,
"Open": 994,
"High": 1018,
"Low": 970.75,
"Close": 971,
"Volume": 1948.5,
"Date": new Date(1264309200000),
"DateString": "1/24/2010",
"Category": null,
"Change": -23,
"ChangePerCent": -2.3138832997987926
}, {
"Index": 23,
"Open": 971,
"High": 998.25,
"Low": 948.5,
"Close": 981,
"Volume": 1946.75,
"Date": new Date(1264395600000),
"DateString": "1/25/2010",
"Category": null,
"Change": 10,
"ChangePerCent": 1.0298661174047374
}, {
"Index": 24,
"Open": 981,
"High": 995.5,
"Low": 947,
"Close": 991,
"Volume": 1930.5,
"Date": new Date(1264482000000),
"DateString": "1/26/2010",
"Category": null,
"Change": 10,
"ChangePerCent": 1.019367991845056
}, {
"Index": 25,
"Open": 991,
"High": 1024,
"Low": 962,
"Close": 970,
"Volume": 1905,
"Date": new Date(1264568400000),
"DateString": "1/27/2010",
"Category": null,
"Change": -21,
"ChangePerCent": -2.119071644803229
}, {
"Index": 26,
"Open": 970,
"High": 990.75,
"Low": 942.5,
"Close": 977,
"Volume": 1903.5,
"Date": new Date(1264654800000),
"DateString": "1/28/2010",
"Category": null,
"Change": 7,
"ChangePerCent": 0.72164948453608246
}, {
"Index": 27,
"Open": 977,
"High": 993,
"Low": 947.5,
"Close": 992,
"Volume": 1899.75,
"Date": new Date(1264741200000),
"DateString": "1/29/2010",
"Category": null,
"Change": 15,
"ChangePerCent": 1.5353121801432956
}, {
"Index": 28,
"Open": 992,
"High": 1009.5,
"Low": 960.5,
"Close": 979,
"Volume": 1889.25,
"Date": new Date(1264827600000),
"DateString": "1/30/2010",
"Category": null,
"Change": -13,
"ChangePerCent": -1.310483870967742
}, {
"Index": 29,
"Open": 979,
"High": 1011.75,
"Low": 956.5,
"Close": 994,
"Volume": 1896.75,
"Date": new Date(1264914000000),
"DateString": "1/31/2010",
"Category": null,
"Change": 15,
"ChangePerCent": 1.5321756894790604
}, {
"Index": 30,
"Open": 994,
"High": 1027.25,
"Low": 967.25,
"Close": 972,
"Volume": 1875.5,
"Date": new Date(1265000400000),
"DateString": "2/1/2010",
"Category": null,
"Change": -22,
"ChangePerCent": -2.2132796780684103
}, {
"Index": 31,
"Open": 972,
"High": 992.75,
"Low": 953,
"Close": 958,
"Volume": 1860.25,
"Date": new Date(1265086800000),
"DateString": "2/2/2010",
"Category": null,
"Change": -14,
"ChangePerCent": -1.440329218106996
}, {
"Index": 32,
"Open": 958,
"High": 994,
"Low": 933,
"Close": 972,
"Volume": 1876.5,
"Date": new Date(1265173200000),
"DateString": "2/3/2010",
"Category": null,
"Change": 14,
"ChangePerCent": 1.4613778705636742
}, {
"Index": 33,
"Open": 972,
"High": 981,
"Low": 947.75,
"Close": 970,
"Volume": 1885.5,
"Date": new Date(1265259600000),
"DateString": "2/4/2010",
"Category": null,
"Change": -2,
"ChangePerCent": -0.205761316872428
}, {
"Index": 34,
"Open": 970,
"High": 1005.5,
"Low": 948.75,
"Close": 955,
"Volume": 1886.25,
"Date": new Date(1265346000000),
"DateString": "2/5/2010",
"Category": null,
"Change": -15,
"ChangePerCent": -1.5463917525773196
}, {
"Index": 35,
"Open": 955,
"High": 984,
"Low": 932,
"Close": 958,
"Volume": 1895.25,
"Date": new Date(1265432400000),
"DateString": "2/6/2010",
"Category": null,
"Change": 3,
"ChangePerCent": 0.31413612565445026
}, {
"Index": 36,
"Open": 958,
"High": 972.25,
"Low": 918.5,
"Close": 967,
"Volume": 1901.25,
"Date": new Date(1265518800000),
"DateString": "2/7/2010",
"Category": null,
"Change": 9,
"ChangePerCent": 0.93945720250521914
}, {
"Index": 37,
"Open": 967,
"High": 992,
"Low": 937.5,
"Close": 960,
"Volume": 1889.75,
"Date": new Date(1265605200000),
"DateString": "2/8/2010",
"Category": null,
"Change": -7,
"ChangePerCent": -0.72388831437435364
}, {
"Index": 38,
"Open": 960,
"High": 981.25,
"Low": 935.25,
"Close": 941,
"Volume": 1866,
"Date": new Date(1265691600000),
"DateString": "2/9/2010",
"Category": null,
"Change": -19,
"ChangePerCent": -1.9791666666666665
}, {
"Index": 39,
"Open": 941,
"High": 974.5,
"Low": 913.25,
"Close": 916,
"Volume": 1866,
"Date": new Date(1265778000000),
"DateString": "2/10/2010",
"Category": null,
"Change": -25,
"ChangePerCent": -2.6567481402763016
}, {
"Index": 40,
"Open": 916,
"High": 933.5,
"Low": 899,
"Close": 904,
"Volume": 1874.5,
"Date": new Date(1265864400000),
"DateString": "2/11/2010",
"Category": null,
"Change": -12,
"ChangePerCent": -1.3100436681222707
}, {
"Index": 41,
"Open": 904,
"High": 928.5,
"Low": 886.75,
"Close": 901,
"Volume": 1873.75,
"Date": new Date(1265950800000),
"DateString": "2/12/2010",
"Category": null,
"Change": -3,
"ChangePerCent": -0.33185840707964603
}, {
"Index": 42,
"Open": 901,
"High": 942.5,
"Low": 874,
"Close": 916,
"Volume": 1857.25,
"Date": new Date(1266037200000),
"DateString": "2/13/2010",
"Category": null,
"Change": 15,
"ChangePerCent": 1.6648168701442843
}, {
"Index": 43,
"Open": 916,
"High": 929.75,
"Low": 887.25,
"Close": 894,
"Volume": 1880.75,
"Date": new Date(1266123600000),
"DateString": "2/14/2010",
"Category": null,
"Change": -22,
"ChangePerCent": -2.4017467248908297
}, {
"Index": 44,
"Open": 894,
"High": 908.5,
"Low": 866.75,
"Close": 869,
"Volume": 1868.75,
"Date": new Date(1266210000000),
"DateString": "2/15/2010",
"Category": null,
"Change": -25,
"ChangePerCent": -2.796420581655481
}, {
"Index": 45,
"Open": 869,
"High": 898.75,
"Low": 846.25,
"Close": 894,
"Volume": 1884,
"Date": new Date(1266296400000),
"DateString": "2/16/2010",
"Category": null,
"Change": 25,
"ChangePerCent": 2.8768699654775602
}, {
"Index": 46,
"Open": 894,
"High": 922.5,
"Low": 871.25,
"Close": 904,
"Volume": 1898.5,
"Date": new Date(1266382800000),
"DateString": "2/17/2010",
"Category": null,
"Change": 10,
"ChangePerCent": 1.1185682326621924
}, {
"Index": 47,
"Open": 904,
"High": 921,
"Low": 879.25,
"Close": 893,
"Volume": 1873,
"Date": new Date(1266469200000),
"DateString": "2/18/2010",
"Category": null,
"Change": -11,
"ChangePerCent": -1.2168141592920354
}, {
"Index": 48,
"Open": 893,
"High": 917.5,
"Low": 855,
"Close": 882,
"Volume": 1885.5,
"Date": new Date(1266555600000),
"DateString": "2/19/2010",
"Category": null,
"Change": -11,
"ChangePerCent": -1.2318029115341544
}, {
"Index": 49,
"Open": 882,
"High": 913,
"Low": 864.25,
"Close": 886,
"Volume": 1872,
"Date": new Date(1266642000000),
"DateString": "2/20/2010",
"Category": null,
"Change": 4,
"ChangePerCent": 0.45351473922902497
}];
var financialData2 = [{
"Index": 0,
"Open": 1000,
"High": 1021.5,
"Low": 963.75,
"Close": 1020,
"Volume": 1989,
"Date": new Date(1262408400000),
"DateString": "1/2/2010",
"Category": null,
"Change": 20,
"ChangePerCent": 2
}, {
"Index": 1,
"Open": 1020,
"High": 1044,
"Low": 988.5,
"Close": 1029,
"Volume": 1980,
"Date": new Date(1262494800000),
"DateString": "1/3/2010",
"Category": null,
"Change": 9,
"ChangePerCent": 0.88235294117647056
}, {
"Index": 2,
"Open": 1029,
"High": 1055.5,
"Low": 1001,
"Close": 1043,
"Volume": 1984.75,
"Date": new Date(1262581200000),
"DateString": "1/4/2010",
"Category": null,
"Change": 14,
"ChangePerCent": 1.3605442176870748
}, {
"Index": 3,
"Open": 1043,
"High": 1075,
"Low": 1025,
"Close": 1054,
"Volume": 1972,
"Date": new Date(1262667600000),
"DateString": "1/5/2010",
"Category": null,
"Change": 11,
"ChangePerCent": 1.0546500479386385
}, {
"Index": 4,
"Open": 1054,
"High": 1081.25,
"Low": 1034.75,
"Close": 1044,
"Volume": 1991.75,
"Date": new Date(1262754000000),
"DateString": "1/6/2010",
"Category": null,
"Change": -10,
"ChangePerCent": -0.94876660341555974
}, {
"Index": 5,
"Open": 1044,
"High": 1056.25,
"Low": 1025,
"Close": 1048,
"Volume": 2014,
"Date": new Date(1262840400000),
"DateString": "1/7/2010",
"Category": null,
"Change": 4,
"ChangePerCent": 0.38314176245210724
}, {
"Index": 6,
"Open": 1048,
"High": 1067.75,
"Low": 1009.75,
"Close": 1026,
"Volume": 2020,
"Date": new Date(1262926800000),
"DateString": "1/8/2010",
"Category": null,
"Change": -22,
"ChangePerCent": -2.0992366412213741
}, {
"Index": 7,
"Open": 1026,
"High": 1048,
"Low": 996.5,
"Close": 1014,
"Volume": 2017.5,
"Date": new Date(1263013200000),
"DateString": "1/9/2010",
"Category": null,
"Change": -12,
"ChangePerCent": -1.1695906432748537
}, {
"Index": 8,
"Open": 1014,
"High": 1032,
"Low": 980.5,
"Close": 1022,
"Volume": 2011.75,
"Date": new Date(1263099600000),
"DateString": "1/10/2010",
"Category": null,
"Change": 8,
"ChangePerCent": 0.78895463510848129
}, {
"Index": 9,
"Open": 1022,
"High": 1050.25,
"Low": 989.5,
"Close": 1036,
"Volume": 2013,
"Date": new Date(1263186000000),
"DateString": "1/11/2010",
"Category": null,
"Change": 14,
"ChangePerCent": 1.36986301369863
}, {
"Index": 10,
"Open": 1036,
"High": 1054.25,
"Low": 1021.25,
"Close": 1044,
"Volume": 2005.75,
"Date": new Date(1263272400000),
"DateString": "1/12/2010",
"Category": null,
"Change": 8,
"ChangePerCent": 0.77220077220077221
}, {
"Index": 11,
"Open": 1044,
"High": 1062.5,
"Low": 1012.75,
"Close": 1024,
"Volume": 2024.25,
"Date": new Date(1263358800000),
"DateString": "1/13/2010",
"Category": null,
"Change": -20,
"ChangePerCent": -1.9157088122605364
}, {
"Index": 12,
"Open": 1024,
"High": 1049.25,
"Low": 1001.25,
"Close": 1006,
"Volume": 2020,
"Date": new Date(1263445200000),
"DateString": "1/14/2010",
"Category": null,
"Change": -18,
"ChangePerCent": -1.7578125
}, {
"Index": 13,
"Open": 1006,
"High": 1013.75,
"Low": 983.5,
"Close": 1007,
"Volume": 2011.75,
"Date": new Date(1263531600000),
"DateString": "1/15/2010",
"Category": null,
"Change": 1,
"ChangePerCent": 0.09940357852882703
}, {
"Index": 14,
"Open": 1007,
"High": 1034.25,
"Low": 986.75,
"Close": 1027,
"Volume": 1986.25,
"Date": new Date(1263618000000),
"DateString": "1/16/2010",
"Category": null,
"Change": 20,
"ChangePerCent": 1.9860973187686197
}, {
"Index": 15,
"Open": 1027,
"High": 1048,
"Low": 995,
"Close": 996,
"Volume": 1969.75,
"Date": new Date(1263704400000),
"DateString": "1/17/2010",
"Category": null,
"Change": -31,
"ChangePerCent": -3.0185004868549172
}, {
"Index": 16,
"Open": 996,
"High": 1020,
"Low": 976.75,
"Close": 976,
"Volume": 1945.25,
"Date": new Date(1263790800000),
"DateString": "1/18/2010",
"Category": null,
"Change": -20,
"ChangePerCent": -2.0080321285140563
}, {
"Index": 17,
"Open": 976,
"High": 999.5,
"Low": 955.75,
"Close": 979,
"Volume": 1938.75,
"Date": new Date(1263877200000),
"DateString": "1/19/2010",
"Category": null,
"Change": 3,
"ChangePerCent": 0.30737704918032788
}, {
"Index": 18,
"Open": 979,
"High": 997.75,
"Low": 957.5,
"Close": 975,
"Volume": 1948.25,
"Date": new Date(1263963600000),
"DateString": "1/20/2010",
"Category": null,
"Change": -4,
"ChangePerCent": -0.40858018386108275
}, {
"Index": 19,
"Open": 975,
"High": 987.75,
"Low": 938.25,
"Close": 949,
"Volume": 1960.5,
"Date": new Date(1264050000000),
"DateString": "1/21/2010",
"Category": null,
"Change": -26,
"ChangePerCent": -2.666666666666667
}, {
"Index": 20,
"Open": 949,
"High": 970.5,
"Low": 924,
"Close": 946,
"Volume": 1972.75,
"Date": new Date(1264136400000),
"DateString": "1/22/2010",
"Category": null,
"Change": -3,
"ChangePerCent": -0.31612223393045313
}, {
"Index": 21,
"Open": 946,
"High": 972.75,
"Low": 927,
"Close": 944,
"Volume": 1970.75,
"Date": new Date(1264222800000),
"DateString": "1/23/2010",
"Category": null,
"Change": -2,
"ChangePerCent": -0.21141649048625794
}, {
"Index": 22,
"Open": 944,
"High": 975.5,
"Low": 930.25,
"Close": 960,
"Volume": 1948.75,
"Date": new Date(1264309200000),
"DateString": "1/24/2010",
"Category": null,
"Change": 16,
"ChangePerCent": 1.6949152542372881
}, {
"Index": 23,
"Open": 960,
"High": 999.25,
"Low": 925.5,
"Close": 957,
"Volume": 1965,
"Date": new Date(1264395600000),
"DateString": "1/25/2010",
"Category": null,
"Change": -3,
"ChangePerCent": -0.3125
}, {
"Index": 24,
"Open": 957,
"High": 991.5,
"Low": 928.75,
"Close": 949,
"Volume": 1948,
"Date": new Date(1264482000000),
"DateString": "1/26/2010",
"Category": null,
"Change": -8,
"ChangePerCent": -0.8359456635318705
}, {
"Index": 25,
"Open": 949,
"High": 968.5,
"Low": 924,
"Close": 929,
"Volume": 1956.25,
"Date": new Date(1264568400000),
"DateString": "1/27/2010",
"Category": null,
"Change": -20,
"ChangePerCent": -2.1074815595363541
}, {
"Index": 26,
"Open": 929,
"High": 948.25,
"Low": 899,
"Close": 905,
"Volume": 1950,
"Date": new Date(1264654800000),
"DateString": "1/28/2010",
"Category": null,
"Change": -24,
"ChangePerCent": -2.5834230355220669
}, {
"Index": 27,
"Open": 905,
"High": 917.25,
"Low": 888.25,
"Close": 900,
"Volume": 1937.25,
"Date": new Date(1264741200000),
"DateString": "1/29/2010",
"Category": null,
"Change": -5,
"ChangePerCent": -0.55248618784530379
}, {
"Index": 28,
"Open": 900,
"High": 923.75,
"Low": 885,
"Close": 905,
"Volume": 1955.5,
"Date": new Date(1264827600000),
"DateString": "1/30/2010",
"Category": null,
"Change": 5,
"ChangePerCent": 0.55555555555555558
}, {
"Index": 29,
"Open": 905,
"High": 922,
"Low": 889.5,
"Close": 920,
"Volume": 1967.25,
"Date": new Date(1264914000000),
"DateString": "1/31/2010",
"Category": null,
"Change": 15,
"ChangePerCent": 1.6574585635359116
}, {
"Index": 30,
"Open": 920,
"High": 950.75,
"Low": 893.75,
"Close": 941,
"Volume": 1968.75,
"Date": new Date(1265000400000),
"DateString": "2/1/2010",
"Category": null,
"Change": 21,
"ChangePerCent": 2.2826086956521738
}, {
"Index": 31,
"Open": 941,
"High": 951,
"Low": 911,
"Close": 935,
"Volume": 1973,
"Date": new Date(1265086800000),
"DateString": "2/2/2010",
"Category": null,
"Change": -6,
"ChangePerCent": -0.6376195536663124
}, {
"Index": 32,
"Open": 935,
"High": 944.5,
"Low": 924.5,
"Close": 924,
"Volume": 1982.75,
"Date": new Date(1265173200000),
"DateString": "2/3/2010",
"Category": null,
"Change": -11,
"ChangePerCent": -1.1764705882352942
}, {
"Index": 33,
"Open": 924,
"High": 943.5,
"Low": 909.25,
"Close": 923,
"Volume": 2001.25,
"Date": new Date(1265259600000),
"DateString": "2/4/2010",
"Category": null,
"Change": -1,
"ChangePerCent": -0.10822510822510822
}, {
"Index": 34,
"Open": 923,
"High": 949,
"Low": 895,
"Close": 929,
"Volume": 2000.75,
"Date": new Date(1265346000000),
"DateString": "2/5/2010",
"Category": null,
"Change": 6,
"ChangePerCent": 0.65005417118093178
}, {
"Index": 35,
"Open": 929,
"High": 957.75,
"Low": 906.25,
"Close": 935,
"Volume": 1987.25,
"Date": new Date(1265432400000),
"DateString": "2/6/2010",
"Category": null,
"Change": 6,
"ChangePerCent": 0.64585575888051672
}, {
"Index": 36,
"Open": 935,
"High": 965.25,
"Low": 913,
"Close": 927,
"Volume": 1973.25,
"Date": new Date(1265518800000),
"DateString": "2/7/2010",
"Category": null,
"Change": -8,
"ChangePerCent": -0.85561497326203206
}, {
"Index": 37,
"Open": 927,
"High": 953.25,
"Low": 913.5,
"Close": 944,
"Volume": 1974.25,
"Date": new Date(1265605200000),
"DateString": "2/8/2010",
"Category": null,
"Change": 17,
"ChangePerCent": 1.8338727076591153
}, {
"Index": 38,
"Open": 944,
"High": 957.75,
"Low": 923.75,
"Close": 923,
"Volume": 1962,
"Date": new Date(1265691600000),
"DateString": "2/9/2010",
"Category": null,
"Change": -21,
"ChangePerCent": -2.2245762711864407
}, {
"Index": 39,
"Open": 923,
"High": 951.25,
"Low": 903.5,
"Close": 912,
"Volume": 1970.5,
"Date": new Date(1265778000000),
"DateString": "2/10/2010",
"Category": null,
"Change": -11,
"ChangePerCent": -1.1917659804983749
}, {
"Index": 40,
"Open": 912,
"High": 929.75,
"Low": 888.25,
"Close": 896,
"Volume": 1959.25,
"Date": new Date(1265864400000),
"DateString": "2/11/2010",
"Category": null,
"Change": -16,
"ChangePerCent": -1.7543859649122806
}, {
"Index": 41,
"Open": 896,
"High": 921.75,
"Low": 885.5,
"Close": 915,
"Volume": 1942.5,
"Date": new Date(1265950800000),
"DateString": "2/12/2010",
"Category": null,
"Change": 19,
"ChangePerCent": 2.1205357142857144
}, {
"Index": 42,
"Open": 915,
"High": 926,
"Low": 883.25,
"Close": 902,
"Volume": 1937.5,
"Date": new Date(1266037200000),
"DateString": "2/13/2010",
"Category": null,
"Change": -13,
"ChangePerCent": -1.4207650273224044
}, {
"Index": 43,
"Open": 902,
"High": 923.5,
"Low": 868,
"Close": 897,
"Volume": 1941.25,
"Date": new Date(1266123600000),
"DateString": "2/14/2010",
"Category": null,
"Change": -5,
"ChangePerCent": -0.55432372505543237
}, {
"Index": 44,
"Open": 897,
"High": 922,
"Low": 877.5,
"Close": 920,
"Volume": 1927,
"Date": new Date(1266210000000),
"DateString": "2/15/2010",
"Category": null,
"Change": 23,
"ChangePerCent": 2.5641025641025639
}, {
"Index": 45,
"Open": 920,
"High": 961.5,
"Low": 903.25,
"Close": 923,
"Volume": 1923.25,
"Date": new Date(1266296400000),
"DateString": "2/16/2010",
"Category": null,
"Change": 3,
"ChangePerCent": 0.32608695652173914
}, {
"Index": 46,
"Open": 923,
"High": 948.25,
"Low": 891.25,
"Close": 934,
"Volume": 1940.25,
"Date": new Date(1266382800000),
"DateString": "2/17/2010",
"Category": null,
"Change": 11,
"ChangePerCent": 1.1917659804983749
}, {
"Index": 47,
"Open": 934,
"High": 958.75,
"Low": 915,
"Close": 932,
"Volume": 1946,
"Date": new Date(1266469200000),
"DateString": "2/18/2010",
"Category": null,
"Change": -2,
"ChangePerCent": -0.21413276231263384
}, {
"Index": 48,
"Open": 932,
"High": 948,
"Low": 903,
"Close": 938,
"Volume": 1942.25,
"Date": new Date(1266555600000),
"DateString": "2/19/2010",
"Category": null,
"Change": 6,
"ChangePerCent": 0.64377682403433478
}, {
"Index": 49,
"Open": 938,
"High": 965.25,
"Low": 923.25,
"Close": 947,
"Volume": 1905.5,
"Date": new Date(1266642000000),
"DateString": "2/20/2010",
"Category": null,
"Change": 9,
"ChangePerCent": 0.95948827292110883
}];
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
</head>
<body>
<my-app>Loading...</my-app>
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.dv.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<script src="/js-data/financial-data-random"></script>
<style type="text/css">
.buttonset {
position: absolute;
top: 0px;
left: 50px;
z-index: 10000;
}
.buttonset > label {
width: 60px;
height: 26px;
margin-right: -4px !important;
}
.tooltip {
font-weight: bold;
}
</style>
<script id="tooltipTemplate" type="text/x-jquery-tmpl">
<span class="tooltip">${item.DateString}</span>
<br />
<span class="tooltip">始値: </span>
<span>${item.Open}</span>
<br />
<span class="tooltip">安値: </span>
<span>${item.Low}</span>
<br />
<span class="tooltip">高値: </span>
<span>${item.High}</span>
<br />
<span class="tooltip">終値: </span>
<span>${item.Close}</span>
<br />
</script>
<div id="date">
</div>
<div id="popoverLeft"></div>
<div id="popoverRight"></div>
<script src="/js-data/financial-data-random"></script>
<script>
System.config( {
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
'rxjs': 'npm:rxjs'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
rxjs: {
defaultExtension: 'js'
},
'igniteui-angular-wrappers': {
main: './index.js',
defaultExtension: 'js'
}
},
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }
} );
System.import('financial-chart.ts').then(null, console.error.bind(console));
</script>
</body>
</html>
import { Component, NgModule, ViewChild } from '@angular/core';
import { IgDataChartComponent, IgZoombarComponent, IgPopoverComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
declare var jQuery: any;
@Component({
selector: 'my-app',
template: `<ig-data-chart [(options)]="chartOpts" #chart (refreshCompleted)="chartRefreshCompleted($event)" [widgetId]='"chart"'></ig-data-chart>
<ig-zoombar [(options)]="zoombarOpts" (windowResized)="zoombarWindowResized($event)" [widgetId]='"zoom"' #zoom></ig-zoombar>
<div id="buttonset" class="buttonset" #buttonset>
<input type="radio" id="day" name="radio" /><label for="day">日</label>
<input type="radio" id="week" name="radio" /><label for="week">週</label>
<input type="radio" id="month" name="radio" /><label for="month">月</label>
</div>
<div id="date">
</div>
<ig-popover widgetId="popoverLeft" #popoverLeft [options]="popOpts1"></ig-popover>
<ig-popover widgetId="popoverRight" #popoverRight [options]="popOpts2"></ig-popover>`
})
export class AppComponent implements ngAfterViewInit{
private data: any;
private chartOpts: any;
private zoombarOpts: any;
private popOpts1: any;
private popOpts2: any;
private zoomParams: object = {};
private popoverTimeout: number = 0;
private $lastSelectedButton;
private $currentlyDragged;
private $lastTarget;
@ViewChild("buttonset") buttonset: ElementRef;
@ViewChild("chart") chart: IgDataChartComponent;
@ViewChild("zoom") zoombar: IgZoombarComponent;
@ViewChild("popoverLeft") popoverLeft: IgPopoverComponent;
@ViewChild("popoverRight") popoverRight: IgPopoverComponent;
ngAfterViewInit() {
var self = this;
this.$chart = jQuery("#chart");
this.$zoombar = jQuery(this.zoombar.nativeElement);
jQuery(this.buttonset.nativeElement).buttonset()
.click(function (evt) {
self.onClick(evt.target.id);
}).mouseup(function (evt) {
var label = evt.target;
label = (label.nodeName !== "LABEL") ? label.parentNode : label;
self.onClick(label.htmlFor, label);
});
}
onClick(button, label) {
var newWidth,
activeCss = "ui-state-active",
viewport = this.chart.option("gridAreaRect"),
leftMostValue = this.chart.unscaleValue("xAxis", viewport.left);
if (button === "day") {
newWidth = 24 * 60 * 60 * 1000;
} else if (button === "week") {
newWidth = 7 * 24 * 60 * 60 * 1000;
} else if (button === "month") {
newWidth = 30 * 24 * 60 * 60 * 1000;
}
// do not process same selected button twice
if (!newWidth || this.$lastSelectedButton === button)
return;
this.$lastSelectedButton = button;
newWidth = this.chart.scaleValue("xAxis", new Date(leftMostValue + newWidth));
this.zoombar.zoom(this.zoomParams.left * 100, (newWidth * this.zoomParams.width / viewport.width) * 100);
// verify/fix appearance of active button
if (label) {
setTimeout(function () {
// condition when mouse-click of buttonset failed
if (label.className.indexOf(activeCss) < 0) {
var old = jQuery("#buttonset").find("." + activeCss);
old.removeClass(activeCss).removeClass("ui-state-focus");
label.className += " " + activeCss;
}
}, 40);
}
}
zoombarWindowResized($event) {
var target = jQuery($event.event.originalEvent.target),
handle = target.hasClass("ui-igzoombar-window-handle") ?
target : this.$lastTarget,
self = this,
container = handle ? handle.igPopover("container").parent().parent() : null;
if (target.hasClass("ui-igzoombar-window-handle")) {
this.$lastTarget = target;
}
if (this.$currentlyDragged && handle[0] !== this.$currentlyDragged[0]) {
this.$currentlyDragged.igPopover("hide");
}
// show the popover if it's not already visible
if (container && !container.is(":visible")) {
handle.igPopover("show");
}
if (handle) {
// update popovers position
handle.igPopover("setCoordinates", {
top: handle.offset().top - container.outerHeight(),
left: handle.offset().left - container.outerWidth() / 2 + 5
});
this.$currentlyDragged = handle;
if (this.popoverTimeout > 0) {
clearTimeout(this.popoverTimeout);
}
this.popoverTimeout = setTimeout(function () {
popoverLeft.igPopover("hide");
popoverRight.igPopover("hide");
self.popoverTimeout = 0;
}, 2000);
// finally reset the buttonset
jQuery("#buttonset input").removeAttr("checked");
jQuery("#buttonset").buttonset("refresh");
}
}
constructor() {
this.buttonset
this.popOpts1 = {
direction: "top",
showOn: "focus"
}
this.popOpts2 = {
direction: "top",
showOn: "focus"
}
this.chartOpts = {
width: "100%",
height: "300px",
axes: [
{
name: "xAxis",
type: "categoryDateTimeX",
dataSource: financialData1,
dateTimeMemberPath: "Date",
labelVisibility: "visible"
},
{
name: "yAxis",
type: "numericY"
}
],
series: [
{
name: "series1",
dataSource: financialData1,
title: "価格シリーズ",
type: "financial",
isTransitionInEnabled: true,
displayType: "ohlc",
xAxis: "xAxis",
yAxis: "yAxis",
openMemberPath: "Open",
highMemberPath: "High",
lowMemberPath: "Low",
showTooltip: true,
tooltipTemplate: "tooltipTemplate",
closeMemberPath: "Close",
thickness: 2,
trendLineBrush: "rgba(68, 172, 214, .8)",
trendLineThickness: 5,
trendLineType: "exponentialAverage",
negativeBrush: "rgba(198, 45, 54, .8)"
},
{
name: "series2",
dataSource: financialData2,
title: "価格シリーズ",
type: "financial",
isTransitionInEnabled: true,
xAxis: "xAxis",
yAxis: "yAxis",
openMemberPath: "Open",
highMemberPath: "High",
lowMemberPath: "Low",
closeMemberPath: "Close",
thickness: 2,
showTooltip: true,
tooltipTemplate: "tooltipTemplate",
trendLineBrush: "rgba(73, 73, 73, .8)",
trendLineThickness: 5,
trendLineType: "exponentialAverage",
negativeBrush: "rgba(198, 45, 54, .8)",
displayType: "ohlc"
}
],
horizontalZoomable: true,
verticalZoomable: false,
windowResponse: "immediate"
};
this.zoombarOpts = {
target: "#chart",
zoomWindowMinWidth: 1.2,
};
}
chartRefreshCompleted ($event) {
var viewport = this.chart.option("gridAreaRect"),
leftMostValue = this.chart.unscaleValue("xAxis", viewport.left),
rightMostValue = this.chart.unscaleValue("xAxis", viewport.left + viewport.width);
// get the dates corresponding to the values
leftMostValue = new Date(leftMostValue);
rightMostValue = new Date(rightMostValue);
// set the dates to the popover
this.popoverLeft.setContent(jQuery.ig.formatter(leftMostValue, "date", "date"));
this.popoverRight.setContent(jQuery.ig.formatter(rightMostValue, "date", "date"));
this.zoomParams = {
left: $event.ui.chart.actualWindowRect ? $event.ui.chart.actualWindowRect.left : 0.35,
width: $event.ui.chart.actualWindowRect ? $event.ui.chart.actualWindowRect.width : 0.30
}
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent, IgDataChartComponent, IgZoombarComponent, IgPopoverComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.dv.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<!-- ReactJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<!-- Ignite UI for jQuery ReactJS Files -->
<script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
<style type="text/css">
.buttonset
{
position: absolute;
top: 0px;
left: 50px;
z-index: 10000;
}
.buttonset > label
{
width: 60px;
height: 26px;
margin-right: -4px!important;
}
.tooltip{
font-weight: bold;
}
</style>
<script id="tooltipTemplate" type="text/x-jquery-tmpl">
<span class="tooltip">${item.DateString}</span><br />
<span class="tooltip">始値: </span><span>${item.Open}</span><br />
<span class="tooltip">安値: </span><span>${item.Low}</span><br />
<span class="tooltip">高値: </span><span>${item.High}</span><br />
<span class="tooltip">終値: </span><span>${item.Close}</span><br />
</script>
</head>
<body>
<script src="/js-data/financial-data-random"></script>
<div id="app">
<!--Sample JSON Data-->
<script type="text/babel">
var chart, zoombar, popoverLeft, popoverRight,
popoverTimeout = 0, lastTarget,
currentlyDragged,
zoomParams;
var lastSelectedButton;
function onClick(button, label) {
var newWidth,
activeCss = "ui-state-active",
viewport = chart.igDataChart("option", "gridAreaRect"),
leftMostValue = chart.igDataChart("unscaleValue", "xAxis", viewport.left);
if (button === "day") {
newWidth = 24 * 60 * 60 * 1000;
} else if (button === "week") {
newWidth = 7 * 24 * 60 * 60 * 1000;
} else if (button === "month") {
newWidth = 30 * 24 * 60 * 60 * 1000;
}
// do not process same selected button twice
if (!newWidth || lastSelectedButton === button)
return;
lastSelectedButton = button;
newWidth = chart.igDataChart("scaleValue", "xAxis", new Date(leftMostValue + newWidth));
zoombar.igZoombar("zoom", zoomParams.left * 100, (newWidth * zoomParams.width / viewport.width) * 100);
// verify/fix appearance of active button
if (label) {
setTimeout(function () {
// condition when mouse-click of buttonset failed
if (label.className.indexOf(activeCss) < 0) {
var old = $("#buttonset").find("." + activeCss);
old.removeClass(activeCss).removeClass("ui-state-focus");
label.className += " " + activeCss;
}
}, 40);
}
}
var IgButtonset = React.createClass({
render: function () {
return <div id={this.props.id} className="buttonset">
<input type="radio" id="day" name="radio" /><label htmlFor="day">日</label>
<input type="radio" id="week" name="radio" /><label htmlFor="week">週</label>
<input type="radio" id="month" name="radio" /><label htmlFor="month">月</label>
</div>
},
componentDidMount: function () {
$("#buttonset").buttonset()
.click(function (evt) {
onClick(evt.target.id);
}).mouseup(function(evt) {
var label = evt.target;
if (label.nodeName !== "LABEL")
label = label.parentNode;
onClick(label.htmlFor, label);
});
}
});
var App = React.createClass({
componentDidMount: function () {
popoverLeft = $("#popoverLeft");
popoverRight = $("#popoverRight");
chart = $("#chart");
zoombar = $("#zoom");
},
render: function () {
return <div>
<IgDataChart id="chart"
width="100%"
height="300px"
axes={[
{
name: "xAxis",
type: "categoryDateTimeX",
dataSource: financialData1,
dateTimeMemberPath: "Date",
labelVisibility: "visible"
},
{
name: "yAxis",
type: "numericY"
}
]}
series={[
{
name: "series1",
dataSource: financialData1,
title: "価格シリーズ",
type: "financial",
isTransitionInEnabled: true,
displayType: "ohlc",
xAxis: "xAxis",
yAxis: "yAxis",
openMemberPath: "Open",
highMemberPath: "High",
lowMemberPath: "Low",
showTooltip: true,
tooltipTemplate: "tooltipTemplate",
closeMemberPath: "Close",
thickness: 2,
trendLineBrush: "rgba(68, 172, 214, .8)",
trendLineThickness: 5,
trendLineType: "exponentialAverage",
negativeBrush: "rgba(198, 45, 54, .8)"
},
{
name: "series2",
dataSource: financialData2,
title: "価格シリーズ",
type: "financial",
isTransitionInEnabled: true,
xAxis: "xAxis",
yAxis: "yAxis",
openMemberPath: "Open",
highMemberPath: "High",
lowMemberPath: "Low",
closeMemberPath: "Close",
thickness: 2,
showTooltip: true,
tooltipTemplate: "tooltipTemplate",
trendLineBrush: "rgba(73, 73, 73, .8)",
trendLineThickness: 5,
trendLineType: "exponentialAverage",
negativeBrush: "rgba(198, 45, 54, .8)",
displayType: "ohlc"
}
]}
horizontalZoomable={true} verticalZoomable={false} windowResponse="immediate"
refreshCompleted={function (e, ui) {
if (chart && chart.igDataChart) {
var viewport = chart.igDataChart("option", "gridAreaRect"),
leftMostValue = chart.igDataChart("unscaleValue", "xAxis", viewport.left),
rightMostValue = $("#chart").igDataChart("unscaleValue", "xAxis", viewport.left + viewport.width);
// get the dates corresponding to the values
leftMostValue = new Date(leftMostValue);
rightMostValue = new Date(rightMostValue);
// set the dates to the popover
if (popoverLeft.data("igPopover")) {
popoverLeft.igPopover("setContent", $.ig.formatter(leftMostValue, "date", "date"));
}
if (popoverRight.data("igPopover")) {
popoverRight.igPopover("setContent", $.ig.formatter(rightMostValue, "date", "date"));
}
zoomParams = {
left: ui.chart.actualWindowRect ? ui.chart.actualWindowRect.left : 0.35,
width: ui.chart.actualWindowRect ? ui.chart.actualWindowRect.width : 0.30
}
}
}} />
<IgZoombar id="zoom" target="#chart" zoomWindowMinWidth={1.2}
windowResized={function (evt, ui) {
var target = $(evt.originalEvent.target),
handle = target.hasClass("ui-igzoombar-window-handle") ?
target : lastTarget,
container =handle ? handle.igPopover("container").parent().parent(): null;
if (target.hasClass("ui-igzoombar-window-handle")) {
lastTarget = target;
}
if (currentlyDragged && handle[0] !== currentlyDragged[0]) {
currentlyDragged.igPopover("hide");
}
// show the popover if it's not already visible
if (container && !container.is(":visible")) {
handle.igPopover("show");
}
if (handle) {
// update popovers position
handle.igPopover("setCoordinates", {
top: handle.offset().top - container.outerHeight(),
left: handle.offset().left - container.outerWidth() / 2 + 5
});
currentlyDragged = handle;
if (popoverTimeout > 0) {
clearTimeout(popoverTimeout);
}
popoverTimeout = setTimeout(function () {
popoverLeft.igPopover("hide");
popoverRight.igPopover("hide");
popoverTimeout = 0;
}, 2000);
// finally reset the buttonset
$("#buttonset input").removeAttr("checked");
$("#buttonset").buttonset("refresh");
}
}}/>
<IgButtonset id="buttonset"></IgButtonset>
<div id="date"></div>
<IgPopover id="popoverLeft" direction="top" showOn="focus"/>
<IgPopover id="popoverRight" direction="top" showOn="focus"/>
</div>
}
});
ReactDOM.render(
<App />,
document.getElementById("app"));
</script>
</div>
</body>
</html>