Draw a bespoke chart of any data in the grid
"); strOptions.push("Choose the fields to include on the chart:
"); // Build the list of fields in the grid. The function below requires the // order of this to match the order in the grid, and to include the // first field containing the row key - though this is hidden by the following code strOptions.push("");
strOptions.push("
");
strOptions.push("");
strOptions.push("");
for (var i = 0; i < cols.getColumnCount(); i++) {
strOptions.push("
");
strOptions.push("
");
strOptions.push("Choose the style for the chart: "); strOptions.push("") strOptions.push("
"); strOptions.push(""); strOptions.push(""); document.getElementById("ChartOptionsColumnList").innerHTML = strOptions.join(""); // Need to build the list of options if (!ChartOptionsWindow) { ChartOptionsWindow = new Ext.Window({ contentEl: "ChartOptionsForm", closeAction: "hide", width: 800, height: 540, title: "Bespoke chart - " + grid.title, autoScroll: true, modal: true, bodyStyle: "background: white", resizable: false }); } ChartOptionsWindow.setTitle("Bespoke chart - " + grid.title); ChartOptionsWindow.setPagePosition(((document.body.offsetWidth - 800) / 2) + document.body.scrollLeft, ((document.body.offsetHeight - 540) / 2) + document.body.scrollTop); ChartOptionsWindow.show(); } function DrawBespokeChart() { // Get references to the grid and its columns var grid = ChartGrid; var cols = grid.getColumnModel(); // Get a list of the checkboxes for each field var arrFields = document.getElementById("ChartFieldList").getElementsByTagName("INPUT"); // Run through the field, building a list of names and also adding the data-indices to the arrFieldIds array // N.B. This expects the fields to be in the same order as the grid, including a HIDDEN first field var ctSel = 0; var arrFieldIds = new Array(); var strFieldList = ""; for (var i = 1; i < arrFields.length; i++) { if (arrFields[i].id.indexOf("cfield") == 0) { if (arrFields[i].checked) { ctSel++; if (strFieldList != "") strFieldList += "|"; var idxColumn = arrFields[i].getAttribute("columnindex"); var bIsCumulative = document.getElementById("cumulative" + idxColumn).checked; strFieldList += cols.getColumnHeader(idxColumn); arrFieldIds.push({dataIndex: cols.getDataIndex(idxColumn), cumulative: bIsCumulative}); } } } // Check that something has been selected if (!ctSel) { alert("Please select one or more fields to include on the chart"); return; } // Start building the post data var strPostData = new Array(); strPostData.push(grid.title + "|" + GetFieldValue(document.getElementById("BespokeChartStyle")) + "^"); strPostData.push(strFieldList); // Get the data var store = grid.store; // Calculate running totals var arrTotals = new Array(arrFieldIds.length); for (var iC = 0; iC < arrFieldIds.length; iC++) { arrTotals[iC] = 0; } // Run through the store getting the field values for the selected records for (var iRec = 0; iRec < store.getCount(); iRec++) { // Add a separator to the data strPostData.push("^"); // Get the nth record and start building a description of its data var Rec = store.getAt(iRec); var strRow = ""; // Get the key for the item strRow += Rec.get(cols.getDataIndex(0)); // Get the value of the selected field(s) for the item for (var iC = 0; iC < arrFieldIds.length; iC++) { var v = Rec.get(arrFieldIds[iC].dataIndex); arrTotals[iC] += v; strRow += "|" + (arrFieldIds[iC].cumulative ? arrTotals[iC] : v); } strPostData.push(strRow); } // Need to build the data to display XMLTransmission("POST", glbSiteRoot + "_BespokeChartPostback.aspx", "data=" + strPostData.join(""), OnBespokeChartPostback); } function OnBespokeChartPostback(objXML) { if (IsXmlHttpResponseSuccess(objXML)) { document.getElementById("ChartOptionsColumnList").innerHTML = "This filtering applies to all tabs of the Stats page. (You can also filter the contents of individual grids by right-clicking over cells in the grid)
"
}),
new Ext.form.ComboBox({
fieldLabel: "Date range",
triggerAction: 'all',
id:'DateRangeListCombo',
store: arrDateRanges,
width:200,
forceSelection:true,
listeners:{select: SetDateRange}
}),
new Ext.form.Label({
html: ""
}),
new Ext.form.DateField({
fieldLabel: 'Start date',
id: 'startdate',
width:190,
format: 'Y/m/d',
value: Date.parseDate(filter_startDate, "Y-m-d"),
allowBlank:true,
listeners: {render: function(c) {Ext.QuickTips.register({target: c, text: 'Choose the start date for orders to include (based on the date when orders were opened).'});}}
}),
new Ext.form.DateField({
fieldLabel: 'End date',
id: 'enddate',
width:190,
format: 'Y/m/d',
value: Date.parseDate(filter_endDate, "Y-m-d"),
allowBlank:true,
listeners: {render: function(c) {Ext.QuickTips.register({target: c, text: 'Choose the end date for orders to include (based on the date when orders were opened).'});}}
}),
new Ext.ux.form.SpinnerField({
fieldLabel: 'Min lots',
id: 'minlot',
minValue: 0,
maxValue: 1000,
allowDecimals: true,
decimalPrecision: 2,
incrementValue: 0.01,
alternateIncrementValue: 1,
accelerate: true,
value: filter_minLot,
listeners: {render: function(c) {Ext.QuickTips.register({target: c, text: 'Choose the minimum lot size of orders to include.'});}}
}),
new Ext.ux.form.SpinnerField({
fieldLabel: 'Max lots',
id: 'maxlot',
minValue: 0,
maxValue: 1000,
allowDecimals: true,
decimalPrecision: 2,
incrementValue: 0.01,
alternateIncrementValue: 1,
accelerate: true,
value: filter_maxLot,
listeners: {render: function(c) {Ext.QuickTips.register({target: c, text: 'Choose the maximum lot size of orders to include.'});}}
}),
new Ext.form.TextField({
fieldLabel: 'Symbol(s)',
id: 'symbol',
width: 250,
value: filter_symbol,
listeners: {render: function(c) {Ext.QuickTips.register({target: c, text: 'Enter a list of symbols to include, separated by commas. The list is not case-sensitive.'});}}
}),
new Ext.form.ComboBox({
fieldLabel: "Buy/sell",
triggerAction: 'all',
id:'buysellcombo',
store: arrBuySell,
width:200,
value: filter_buysell,
forceSelection:true
}),
new Ext.form.ComboBox({
fieldLabel: "Day of week",
triggerAction: 'all',
id:'dowcombo',
store: arrDoW,
width:200,
value: filter_dow,
forceSelection:true
}),
new Ext.form.TextField({
fieldLabel: 'Magic #',
id: 'magic',
width: 250,
value: filter_magic,
listeners: {render: function(c) {Ext.QuickTips.register({target: c, text: 'Enter a list of magic numbers to include, separated by commas.'});}}
})
],
buttons: [{
text: 'Filter',
handler: SaveFiltering
},{
text: 'Clear filter',
handler: ClearFiltering
},{
text: 'Cancel',
handler: function(b) {b.findParentByType("window").close();}
}]
});
var ColumnStatsWindow = new Ext.Window({
closeAction: "close",
width: 400,
height: 400,
title: 'Filter the results',
layout: 'fit',
autoScroll: true,
modal: true,
bodyStyle: "background: white",
resizable: false
});
ColumnStatsWindow.add(f);
ColumnStatsWindow.show();
}
function SaveFiltering(b)
{
var strFilter = "";
// Get the form in the filtering window
var f = b.findParentByType("form");
// Process start date filtering
var dtStart = f.get("startdate").getValue();
if (dtStart) {
strFilter += (strFilter ? "&" : "") + "start=" + DateToText(dtStart);
}
// Process end date filtering
var dtEnd = f.get("enddate").getValue();
if (dtEnd) {
strFilter += (strFilter ? "&" : "") + "end=" + DateToText(dtEnd);
}
// Minimum lot size
var vMinLot = f.get("minlot").getValue();
if (vMinLot) {
strFilter += (strFilter ? "&" : "") + "minlot=" + vMinLot;
}
// Maximum lot size
var vMaxLot = f.get("maxlot").getValue();
if (vMaxLot) {
strFilter += (strFilter ? "&" : "") + "maxlot=" + vMaxLot;
}
// Symbol
var strSymbol = f.get("symbol").getValue();
if (strSymbol) {
strFilter += (strFilter ? "&" : "") + "symbol=" + strSymbol;
}
// Magic
var strMagic = f.get("magic").getValue();
if (strMagic) {
strFilter += (strFilter ? "&" : "") + "magic=" + strMagic;
}
// Buys and sells
var strBuySell = f.get("buysellcombo").getValue();
if (strBuySell) {
strFilter += (strFilter ? "&" : "") + "buysell=" + strBuySell;
}
// Buys and sells
var strDoW = f.get("dowcombo").getValue();
if (strDoW) {
strFilter += (strFilter ? "&" : "") + "dow=" + strDoW;
}
// Get and close the filtering window
var w = b.findParentByType("window");
w.close();
var strHash = GetHashForCurrentTab();
var strUrl = RefreshableUrl(glbSiteRoot + "users/" + glbUserId + "/stats?" + strFilter) + "#" + strHash;
Goto2(strUrl);
}
function ClearFiltering()
{
var strHash = GetHashForCurrentTab();
var strUrl = RefreshableUrl(glbSiteRoot + "users/" + glbUserId + "/stats") + "#" + strHash;
Goto2(strUrl);
}
function GetHashForCurrentTab()
{
var strTabId = glbTabs.getActiveTab().getId();
return (strTabId.substr(4)); // Strip the tab_ bit leaving only the id used on initialisation
}
function DateToText(d)
{
return d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate();
}
function SetDateRange(combo, record)
{
var dStart = new Date();
dStart = new Date(Math.floor(dStart.valueOf() / 86400000) * 86400000);
var dEnd = dStart;
switch (combo.getValue()) {
case "today":
// Already set
break;
case "last3days":
dStart = new Date(dStart.valueOf() - (86400000 * 2));
break;
case "last7days":
dStart = new Date(dStart.valueOf() - (86400000 * 6));
break;
case "currentweek":
var lDow = dStart.getDay();
dStart = new Date(dStart.valueOf() - (lDow * 86400000));
break;
case "lastweek":
var lDow = dStart.getDay() + 7;
dStart = new Date(dStart.valueOf() - (lDow * 86400000));
dEnd = new Date(dStart.valueOf() + (6 * 86400000));
break;
case "currentmonth":
dStart = new Date(dStart.getFullYear(), dStart.getMonth(), 1);
break;
case "lastmonth":
var m = dStart.getMonth();
var y = dStart.getFullYear();
m--;
if (m < 0) {m += 12; y -= 1;}
dStart = new Date(y, m, 1);
dEnd = new Date(y, m, GetEndOfMonth(m + 1, y));
break;
case "currentquarter":
var m = Math.floor(dStart.getMonth() / 3) * 3;
dStart = new Date(dStart.getFullYear(), m, 1);
break;
case "lastquarter":
var m = Math.floor(dStart.getMonth() / 3) * 3;
var y = dStart.getFullYear();
m -= 3;
if (m < 0) {m += 12; y -= 1;}
dStart = new Date(y, m, 1);
dEnd = new Date(y, m + 2, GetEndOfMonth(m + 3, y));
break;
case "currentyear":
dStart = new Date(dStart.getFullYear(), 0, 1);
break;
case "lastyear":
dStart = new Date(dStart.getFullYear() - 1, 0, 1);
dEnd = new Date(dStart.getFullYear(), 11, 31);
break;
}
// Get the form in the filtering window
var f = combo.findParentByType("form");
// Get the start and end date fields
f.get("startdate").setValue(dStart);
f.get("enddate").setValue(dEnd);
}
// Gets the last day of a month. EXPECTS normal 1-12 months, not javascript 0-11
function GetEndOfMonth(m, y)
{
switch (m) {
case 4:
case 6:
case 9:
case 11:
return 30;
case 2:
if (y % 4 != 0) {
return 28;
} else {
if (y % 100 != 0) {
return 28;
} else {
return 28;
}
}
default:
return 31;
}
}
var QuickFilteredChartWindow;
var QuickFilterSelectionList;
var QuickFilterType;
function ItemChartOptions(Item)
{
var grid = Item.findParentByType("grid");
var store = grid.store;
var cols = grid.getColumnModel();
var objSelections = grid.getSelectionModel().getSelections();
if (!objSelections.length) {
alert("Please select the item(s) in the grid which you want to draw a chart for");
return false;
}
// Store the grid name for use in DrawQuickFilteredChart()
QuickFilterType = store.storeId;
// Handle the selected items
QuickFilterSelectionList = "";
switch (QuickFilterType) {
case "Symbol/Direction":
alert("Filtered charts cannot be created from the symbol/direction grid");
return;
case "Day":
case "Week":
case "Month":
// Only use the earliest and latest options
var strFirst = "zzzzzzzzz";
var strLast = " ";
for (var iRec = 0; iRec < objSelections.length; iRec++) {
var Rec = objSelections[iRec];
var date = Rec.get(cols.getDataIndex(0));
if (strLast < date) strLast = date;
if (strFirst > date) strFirst = date;
}
QuickFilterSelectionList = strFirst + "," + strLast;
break;
default:
// Normal processing where the user can select any set of options
for (var iRec = 0; iRec < objSelections.length; iRec++) {
var Rec = objSelections[iRec];
QuickFilterSelectionList += (QuickFilterSelectionList ? "," : "") + Rec.get(cols.getDataIndex(0));
}
break;
}
// Hide the chart element, and show the options
document.getElementById("QuickFilteredChartForm1").style.display = "";
document.getElementById("QuickFilteredChartForm2").style.display = "none";
if (!QuickFilteredChartWindow) {
QuickFilteredChartWindow = new Ext.Window({
contentEl: "QuickFilteredChartForm",
closeAction: "hide",
width: 800,
height: 540,
title: "Filtered chart",
autoScroll: true,
modal: true,
bodyStyle: "background: white",
resizable: false
});
}
QuickFilteredChartWindow.setTitle("Filtered chart");
QuickFilteredChartWindow.setPagePosition(((document.body.offsetWidth - 800) / 2) + document.body.scrollLeft, ((document.body.offsetHeight - 540) / 2) + document.body.scrollTop);
QuickFilteredChartWindow.show();
}
function DrawQuickFilteredChart()
{
// Get the type of chart
var strNewChart = GetFieldValue(document.getElementById("QuickFilteredChartType"));
if (!strNewChart) {alert("Please select a chart to draw");return;}
// Build the basic URL
var strUrl = glbSiteRoot + "charts/ResultChart.aspx?id=" + glbUserId + "&type=" + strNewChart;
strUrl += "&w=760&h=490";
// Need to take the list of selections and, potentially, _remove_ items in the
// global filter which refer to the same element
var RevisedGlobalFilter = glbFilterRequest;
var StartDate, EndDate, DateRange;
switch (QuickFilterType) {
case "Symbol":
strUrl += "&symbol=" + QuickFilterSelectionList;
RevisedGlobalFilter = RemoveFromGlobalFilter(RevisedGlobalFilter, "symbol");
break;
case "Direction":
strUrl += "&buysell=" + QuickFilterSelectionList;
RevisedGlobalFilter = RemoveFromGlobalFilter(RevisedGlobalFilter, "buysell");
break;
case "DoW":
case "Day of week":
strUrl += "&dow=" + QuickFilterSelectionList;
RevisedGlobalFilter = RemoveFromGlobalFilter(RevisedGlobalFilter, "buysell");
break;
case "EA":
strUrl += "&magic=" + QuickFilterSelectionList;
RevisedGlobalFilter = RemoveFromGlobalFilter(RevisedGlobalFilter, "magic");
break;
case "Username":
strUrl += "&username=" + QuickFilterSelectionList;
RevisedGlobalFilter = RemoveFromGlobalFilter(RevisedGlobalFilter, "username");
break;
case "Open-hour":
strUrl += "&hour=" + QuickFilterSelectionList;
RevisedGlobalFilter = RemoveFromGlobalFilter(RevisedGlobalFilter, "hour");
break;
case "Month":
StartDate = ConvertGridDate(QuickFilterSelectionList.split(",")[0]);
EndDate = ConvertGridDate(QuickFilterSelectionList.split(",")[1]);
// Need to force the end date to the end of the month
var NextMonthStart = new Date(EndDate.getFullYear() + (EndDate.getMonth() == 11 ? 1 : 0), (EndDate.getMonth() == 11 ? 0 : EndDate.getMonth() + 1) , 1);
EndDate = new Date(NextMonthStart.valueOf() - 86400);
strUrl += "&start=" + FormatDateForFilter(StartDate);
strUrl += "&end=" + FormatDateForFilter(EndDate);
RevisedGlobalFilter = RemoveFromGlobalFilter(RevisedGlobalFilter, "start");
RevisedGlobalFilter = RemoveFromGlobalFilter(RevisedGlobalFilter, "end");
break;
case "Week":
DateRange = QuickFilterSelectionList.split(",");
StartDate = ConvertGridDate(DateRange[0]);
EndDate = ConvertGridDate(DateRange[1]);
// Need to revise the end date
EndDate = new Date(EndDate.valueOf() + ((7 * 86400 * 1000) - 10));
strUrl += "&start=" + FormatDateForFilter(StartDate);
strUrl += "&end=" + FormatDateForFilter(EndDate);
RevisedGlobalFilter = RemoveFromGlobalFilter(RevisedGlobalFilter, "start");
RevisedGlobalFilter = RemoveFromGlobalFilter(RevisedGlobalFilter, "end");
break;
case "Day":
StartDate = ConvertGridDate(QuickFilterSelectionList.split(",")[0]);
EndDate = ConvertGridDate(QuickFilterSelectionList.split(",")[1]);
strUrl += "&start=" + FormatDateForFilter(StartDate);
strUrl += "&end=" + FormatDateForFilter(EndDate);
RevisedGlobalFilter = RemoveFromGlobalFilter(RevisedGlobalFilter, "start");
RevisedGlobalFilter = RemoveFromGlobalFilter(RevisedGlobalFilter, "end");
break;
default:
alert(QuickFilterType);
break;
}
// Add in any remaining revised global filter
if (RevisedGlobalFilter != "") {strUrl += "&" + RevisedGlobalFilter;}
// Set the chart URL
document.getElementById("ItemChart").src = RefreshableUrl(strUrl);
// Un-hide the chart
document.getElementById("QuickFilteredChartForm1").style.display = "none";
document.getElementById("QuickFilteredChartForm2").style.display = "";
}
function RemoveFromGlobalFilter(Filter, RemoveKey)
{
if (!Filter) return "";
var arrParts = Filter.split("&");
var RevisedFilter = "";
for (var iP = 0; iP < arrParts.length; iP++) {
var iEq = arrParts[iP].indexOf("=");
if (iEq >= 0) {
var strKey = arrParts[iP].substr(0, iEq);
var strVal = arrParts[iP].substr(iEq + 1);
if (strKey.toLowerCase() == RemoveKey.toLowerCase()) {
} else {
RevisedFilter += (RevisedFilter ? "&" : "") + strKey + "=" + strVal;
}
}
}
return RevisedFilter;
}
function FormatDateForFilter(vDate)
{
return vDate.getFullYear() + "/" + (vDate.getMonth() + 1) + "/" + vDate.getDate();
}
function ConvertGridDate(DateText)
{
var arrP = DateText.split("/");
switch (arrP.length) {
case 2:
return new Date(parseInt(arrP[0], 10), parseInt(arrP[1], 10) - 1, 1);
case 3:
return new Date(parseInt(arrP[0], 10), parseInt(arrP[1], 10) - 1, parseInt(arrP[2], 10));
default:
return new Date();
}
}