var root_path = 'http://www.pricearc.com/';
//Chain loads the javascript so that dependencies load first
function IncludeJavascriptChain(jsFiles, index) {
if (index < jsFiles.length) {
var html_doc = document.getElementsByTagName('head').item(0);
var js = document.createElement('script');
js.setAttribute('language', 'javascript');
js.setAttribute('type', 'text/javascript');
//MSIE doesn't support onload, so we use onreadystatechange if necessary
if (navigator.appName == 'Microsoft Internet Explorer') {
js.onreadystatechange = function () {
if (this.readyState == 'complete' || this.readyState == 'loaded' || this.readyState == 'interactive') {
IncludeJavascriptChain(jsFiles, index + 1);
}
}
}
js.onload = function () {
IncludeJavascriptChain(jsFiles, index + 1);
};
js.setAttribute('src', root_path + jsFiles[index]);
html_doc.appendChild(js);
}
else {
load_embedded_chart();
}
}
//The list of javascript to load in order
var jsFiles = ['Scripts/SecurityUtils.js', 'Scripts/RelatedEntitiesUtils.js', 'Scripts/FilterUtils.js',
'Scripts/QuestionFormUtils.js', 'Scripts/DataValidation.js', 'Scripts/ChartExplorerUtils.js',
'Scripts/DataManipUtils.js', 'Scripts/URLUtils.js', 'Scripts/UIUtils.js',
'App_Themes/Standard/js/BubbleChartStyles.js', 'Scripts/jquery-1.4.2/jquery-1.4.2.min.js',
'Scripts/ext-3.2.0/adapter/jquery/ext-jquery-adapter.js', 'Scripts/ext-3.2.0/ext-all.js',
'Scripts/flot-r245/jquery.flot.js', 'Scripts/flot-r245/jquery.flot.image.custom.js',
'Scripts/extflot-0.10/jquery.flot.navigate.animate.js', 'Scripts/extflot-0.10/jquery.flot.navigate.animate.js',
'Scripts/extflot-0.10/PersistentToolTip.js', 'Scripts/extflot-0.10/Flot.js'];
//MSIE doesn't support excanvas, so load excanvas if needed
if (navigator.appName == 'Microsoft Internet Explorer')
jsFiles.push('Scripts/flot-r245/excanvas.min.js');
IncludeJavascriptChain(jsFiles, 0);
//This is the HTML that frames the chart widget
var embed_html = "
";
document.write(embed_html);
var members = null;
var varopts = null;
var hasnodata = true;
var highlight = null;
var hasservicevars = false;
var xdatatype = 'count';
var charttypeid = 3;
var flt = '';
var chartinfoloaded = false;
var selectedXMetricValue = -1;
var selectedYMetricValue = -1;
var selectedYMetricLabel = '';
var selectedVariationLabel = '';
var chartupdated = false;
var activeview = 'chart';
var bchart = null;
var lastSelectedItem = null;
var max_related_charts = 3;
///ON PAGE LOADvar
var searchGeoName = null;
var searchLat = null;
var searchLon = null;
function content_onload(cid) {
////////////////////////
if (cid) {
chartStore = new Ext.data.JsonStore({
//General JsonStore options
autoDestroy: true,
//Setup JSON parsing options
root: 'chartembed',
fields: [
{ name: 'chartname', mapping: 'chartconfig.chart.chartname' },
{ name: 'chartdescr', mapping: 'chartconfig.chart.chartdescr' },
{ name: 'chartlogo', mapping: 'chartconfig.chart.chartlogo' },
{ name: 'members', type: 'int', mapping: 'chartconfig.chart.members' },
{ name: 'varopts', mapping: 'chartconfig.chart.varopts' },
{ name: 'xaxis', mapping: 'chartconfig.chart.xaxis' },
{ name: 'yaxis', mapping: 'chartconfig.chart.yaxis' },
//Member properties
{name: 'memberData', type: 'object', mapping: 'chartconfig.members' }
],
//Set up the HTTP request for the JSON
proxy: new Ext.data.ScriptTagProxy({
url: root_path + 'HttpHandlers/ChartEmbedHandler.ashx'
}),
baseParams: {
cid: cid,
evt: 'qgeo',
geo: '',
searchLat: '',
searchLon: '',
rad: '',
unit: '',
meet: '',
vw: ''
}
});
//This function is called when chart data comes back from the server
chartStore.load({ callback: function (r, options, success) {
if (success) {
var chartRecord = r[0];
var chartId = chartRecord.id;
var chartName = chartRecord.get('chartname');
var chartDescr = chartRecord.get('chartdescr');
var chartLogo = chartRecord.get('chartlogo');
this.members = chartRecord.get('members');
var varopts = chartRecord.get('varopts');
var xaxis = chartRecord.get('xaxis');
var yaxis = chartRecord.get('yaxis');
var memberData = chartRecord.get('memberData');
var chart_link = root_path + 'Viewer/ChartExplorer.aspx?cid=' + cid;
//Load the chart information into the HTML
$('#chart_name').text(chartName).attr('href', chart_link);
$('#chart_logo').attr('src', root_path + 'imgdisp/RenderImage.aspx?defimg=chart&imgid=' + chartLogo);
$('#chart_logo_link').attr('href', chart_link);
$('#chart_descr').html(getTruncatedText(chartDescr, 100, 'chart_descr'));
$('#xlabel').text(xaxis.label);
$('#join_link').attr('href', root_path + 'secure_member/Create/JoinChart.aspx?cid=' + cid);
var ddlymetrics = document.getElementById('vertical_line');
if (ddlymetrics && yaxis) {
//add metrics
for (i = 0; i < yaxis.length; i++) {
var yoption = document.createElement('option');
yoption.text = yaxis[i].label;
yoption.value = yaxis[i].id;
try {
ddlymetrics.add(yoption, null);
}
catch (e) {
ddlymetrics.add(yoption, true);
}
}
}
var ddlvariations = document.getElementById('select_variations');
var vars = varopts.variations;
if (ddlvariations && vars) {
//add variations
for (i = 0; i < vars.length; i++) {
var variation = document.createElement('option');
variation.text = vars[i].name;
variation.value = vars[i].id;
try {
ddlvariations.add(variation, null);
}
catch (e) {
ddlvariations.add(variation, true);
}
}
}
//Display the number of members in the chart
$('#members').html((new Number(memberData.length)).toString().concat(' members').italics());
var xid = 0;
if (ddlvariations && ddlvariations.options.length > 0) {
xid = parseInt(ddlvariations.options[ddlvariations.selectedIndex].value);
}
var yid = 0;
if (ddlymetrics && ddlymetrics.options.length > 0) {
yid = parseInt(ddlymetrics.options[ddlymetrics.selectedIndex].value);
}
//Load the data
var displayData = getSelectedDataSeries(xid, yid, memberData);
//Load the chart after all the data is loaded
loadChartEmbed(displayData);
}
}
});
}
}
//This is the function that loads the chart after all the data is loaded from the server
function loadChartEmbed(displayData) {
$('#FlotChart').empty();
//Create the ExtFlot bubble chart object
bchart = new Ext.Panel({
id: 'flot',
applyTo: 'FlotChart',
items: [{
xtype: 'flot',
cls: 'x-panel-body',
width: 400,
height: 370,
xaxis: {
autoscaleMargin: 0.1,
tickFormatter: chartXTickFormatter
},
yaxis: {
autoscaleMargin: 0.1,
tickFormatter: chartYTickFormatter
},
data: displayData,
tooltip: function (o) {
if (!this.tipTemplate) { this.tipTemplate = new Ext.XTemplate('{label}'); }
return this.tipTemplate.apply(o);
},
miniTooltip: function (o) {
if (!this.tipTemplate) { this.tipTemplate = new Ext.XTemplate('
{label}
'); }
return this.tipTemplate.apply(o);
},
tooltipEvent: 'plotclick',
lines: { show: false },
points: { fill: 1,
fillColor: false,
radius: 5
},
series: { images: { show: true} },
grid: {
color: gridColor,
backgroundColor: gridBackgroundColor,
borderColor: gridBorderColor,
borderWidth: 1,
autoHighlight: true,
mouseActiveRadius: 8,
tickColor: gridTickColor,
clickable: true,
hoverable: true
},
legend: { show: false
},
selection: {
mode: 'xy',
color: bubbleSelectionFillColor
},
zoom: {
interactive: true,
animate: true,
amount: 1.25
},
pan: {
interactive: true,
animate: true
},
contextMenu: false
}]
});
bchart.show();
chartupdated = true;
return true;
}
//Format the horizontal axis ticks
function chartXTickFormatter(val, axis) {
if (charttypeid != 3) {
if (xdatatype == 'money')
return String.format('{0}%', formatScaledNumber(val.toFixed(axis.tickDecimals)));
else
return String.format('${0}', formatScaledNumber(val.toFixed(axis.tickDecimals)));
}
else {
return String.format('{0}', formatScaledNumber(val.toFixed(axis.tickDecimals)));
}
}
//Format the vertical axis ticks
function chartYTickFormatter(val, axis) {
return String.format("{1}", selectedYMetricLabel, formatScaledNumber(val.toFixed(axis.tickDecimals)));
}
//Get member data from the server response and format it for the bubble chart
function getSelectedDataSeries(xid, yid, members) {
var dataSeries = [];
for (var i = 0; i < members.length; i++) {
var currentMember = members[i];
var x;
var currentXSeries = currentMember.xseries;
for (var j = 0; j < currentXSeries.length; j++) {
if (currentXSeries[j].id == xid) {
x = currentXSeries[j].value;
break;
}
}
var y;
var currentYSeries = currentMember.yseries;
for (j = 0; j < currentYSeries.length; j++) {
if (currentYSeries[j].id == yid) {
y = currentYSeries[j].value;
break;
}
}
if (x && y) {
var memberId = currentMember.id;
var htmlinfo = currentMember.htmlinfo;
var shortinfo = currentMember.shortinfo;
var xseries = currentMember.xseries;
var yseries = currentMember.yseries;
var radius = currentMember.radius;
var fillColor = currentMember.fillcolor;
var borderColor = currentMember.bordercolor;
var bubble_icon = currentMember.icon;
var dataArray, showPoints = false, showImages = false;
if (bubble_icon) {
dataArray = [[x, y, 20, 20, String.format('{0}imgdisp/RenderIcon.aspx?iconid={1}', root_path, bubble_icon)]];
showImages = true;
showColor = '#F89829';
}
else {
dataArray = [[x, y]];
showPoints = true;
showColor = '#F89829';
}
dataSeries.push({ label: htmlinfo, shortLabel: shortinfo, color: showColor, shadowSize: 4, points: { show: showPoints, radius: radius }, images: { show: showImages, mode: 'data' }, data: dataArray });
}
}
return dataSeries;
}
//Function called to redraw the chart when the chart's parameters are adjusted
function refreshBubbles() {
var xid = 0;
var ddlvariations = document.getElementById('select_variations');
if (ddlvariations && ddlvariations.options.length > 0) {
xid = parseInt(ddlvariations.options[ddlvariations.selectedIndex].value);
}
var yid = 0;
var ddlymetrics = document.getElementById('vertical_line');
if (ddlymetrics && ddlymetrics.options.length > 0) {
yid = parseInt(ddlymetrics.options[ddlymetrics.selectedIndex].value);
}
var displayData = getSelectedDataSeries(xid, yid, members);
loadChartEmbed(displayData);
}
![chart logo](" + root_path + "App_Themes/Standard/images/default_chart_logo.gif){kind=logo}
![Join this chart](" + root_path + "App_Themes/Standard/images/empty_chart_animation.gif "Join this chart")
![](" + root_path + "App_Themes/Standard/images/pricearc_logo.png){kind=logo}