<html>
	<head>
		<title>Series comparison modes</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<script type="text/javascript" language="javascript" src="./../js/AnyChartStock.js?v=1.9.0r9317"></script>
		<script type="text/javascript" language="javascript" src="./js/jquery.min.js"></script>
		<!-- chart size settings -->
		<style type="text/css">
			#chartContainer {
				width: 800px;
				height: 550px;
				float: left;
			}
		</style>
		<script type="text/javascript" language="javascript">
			// Creating new chart object. 
			var chart = new AnyChartStock("./../swf/AnyChartStock.swf?v=1.9.0r9317", "./../swf/Preloader.swf?v=1.9.0r9317");
			// Setting XML config file.
			chart.setXMLFile("config.xml");
			// needConfig set to true allowas to work with chart objectModel
			chart.needConfig = true;
			// Writing the flash object into the page DOM.
			chart.write("chartContainer");
			
			// Current base series
			var lastSelectedSeries = "CSCO";
			
			//--------------------------------------------------------------------------------
			//		Initialization
			//--------------------------------------------------------------------------------
			
			chart.onChartDraw = function() {
				// base series selector options
				showBaseSeriesOptions();
				// series show/hide checkboxes
				showSeriesCheckboxes();
				// value scale mode
				checkValueScaleMode();
				
				chart.onChartDraw = null;
				// apply base changes
				chart.applySettingsChanges();
			}
			
			//--------------------------------------------------------------------------------
			//		Interface updating
			//--------------------------------------------------------------------------------
			
			// Base series select. Get series from objectModel and show them in <select id="baseSeries"></select>
			function showBaseSeriesOptions() {
				var seriesList = chart.getChartById("idMainChart").seriesList; // series array
				var scrollerSources = document.getElementById("baseSeries"); // target <select />
				for (var i = 0;i<seriesList.length;i++) {
					var opt = document.createElement("option"); // create <option />
					opt.innerText = seriesList[i].name; // option text is series name (for IE)
					opt.text = seriesList[i].name; // option text is series name (for other browsers)
					opt.value = seriesList[i].name; // option value is series name
					if (seriesList[i].name == lastSelectedSeries)  // selected if id is equal to lastSelectedSeries
						opt.selected = true;
					scrollerSources.appendChild(opt); // add option to <select />
				}
			}
			
			// series show/hide checkboxes
			function showSeriesCheckboxes() {
				var html = "";
				var seriesList = chart.getChartById("idMainChart").seriesList; // series array
				
				for (var i = 0;i<seriesList.length;i++) {
					if (seriesList[i].name == lastSelectedSeries) // if series is base - don't show it in checkboxes
						continue; //skip selected
					
					// create <input type='checkbox' /> for showing/hiding series
					html += "<input type='checkbox' id='"+seriesList[i].id+"' "+(seriesList[i].enabled ? "checked='true'":"")+ " onclick='showHideSeries(\""+seriesList[i].id+"\")' /><label for='"+seriesList[i].id+"'><font color='"+seriesList[i].color+"'><strong>"+seriesList[i].name+"</strong></font></label><br />";
				}
				
				// show <input />
				$("#series").html(html);
			}
			
			//--------------------------------------------------------------------------------
			//		Show/Hide series
			//--------------------------------------------------------------------------------
			
			// Function to show/hide series by id
			function showHideSeries(id) {
				chart.getSeriesById("idMainChart",id).enabled = $("#"+id).get(0).checked; // update enabled flag
				checkValueScaleMode(); // update value scale mode (comparision or values)
				chart.applySettingsChanges(); // apply changes
			}
			
			//--------------------------------------------------------------------------------
			//		Switch base
			//--------------------------------------------------------------------------------
			
			// update base series
			function switchBaseSeries() {
				chart.getSeriesById("idMainChart","id"+lastSelectedSeries+"Series").enabled = false; // hide current base series
				lastSelectedSeries = $("#baseSeries").val(); // get new base series name 
				chart.getSeriesById("idMainChart", "id"+lastSelectedSeries+"Series").enabled = true; // show new base series
				chart.objectModel.settings.scroller.dataProvider = "idScrollerDataProvider" + lastSelectedSeries; // switch scroller data provider for the new one
				
				var newSeriesList = [];
				var seriesList = chart.getChartById("idMainChart").seriesList;
				newSeriesList.push(chart.getSeriesById("idMainChart", "id"+lastSelectedSeries+"Series"));
				for (var i = 0;i<seriesList.length;i++) {
					if (seriesList[i].id != "id"+lastSelectedSeries+"Series")
						newSeriesList.push(seriesList[i]);
				}
				chart.getChartById("idMainChart").seriesList = newSeriesList;
				
				showSeriesCheckboxes(); // update series checkboxes
				checkValueScaleMode();  // check value scale mode (comparision or values)

				switchScrollerColorScheme(lastSelectedSeries); // update scroller series colors
				
				chart.applySettingsChanges(); // apply settings changes in objectModel
			}
			
			// Function to update scroller color depending on the base series.
			function switchScrollerColorScheme(seriesName) {
				
				// get object with settings
				var insideSelectedRange = chart.objectModel.settings.scroller.insideSelectedRange;
				
				// set fill opacity
				insideSelectedRange.seriesFill.opacity = 0.5;
				
				// set color and gradient
				switch (seriesName) {
					case "CSCO":
						insideSelectedRange.seriesLine.color = "#5A92D5";
						insideSelectedRange.seriesFill.gradient.keys[0].color = "#ABBDE3";
						insideSelectedRange.seriesFill.gradient.keys[1].color = "#0066DD";
						break;
					case "MSFT":
						insideSelectedRange.seriesLine.color = "#D37963";
						insideSelectedRange.seriesFill.gradient.keys[0].color = "#DFA79A";
						insideSelectedRange.seriesFill.gradient.keys[1].color = "#DC3912";
						break;
					case "ORCL":
						insideSelectedRange.seriesLine.color = "#E4AC5A";
						insideSelectedRange.seriesFill.gradient.keys[0].color = "#E9C796";
						insideSelectedRange.seriesFill.gradient.keys[1].color = "#FF9900";
						break;
					case "IBM":
						insideSelectedRange.seriesLine.color = "#5B8E10";
						insideSelectedRange.seriesFill.gradient.keys[0].color = "#B5C89A";
						insideSelectedRange.seriesFill.gradient.keys[1].color = "#5B8E10";
						break;
				}
				
			}
			
			//--------------------------------------------------------------------------------
			//		Comparision modes
			//--------------------------------------------------------------------------------
			
			// update interface
			function checkValueScaleMode() {
				var c = chart.getChartById("idMainChart"); // link to the chart
				var seriesList = c.seriesList; // list of the series
				var visibleCount = 0; // number of visible series
				for (var i = 0;i<seriesList.length;i++) 
					if (seriesList[i].enabled) visibleCount++; 

				if (visibleCount > 1) { // if there are more than one visible series
					updateComparisionMode(); // switch to comparison mode
					$("#comparisionMode").removeAttr("disabled"); // allow changing comparison modes (Changes or Percent changes)
				}else { // if there is only one series shown - set values show mode 
					// axis settings
					var primaryAxis = c.valueAxes.primary; // link to axis settings
					primaryAxis.labels.format = "{%Value}{numDecimals:2,trailingZeros:false}"; // labels format 
					primaryAxis.labels.font.color = "#333333"; // labels font color
					primaryAxis.scale.mode = "Values"; // scale mode - Values
					
					// legend labels formatting
					var focusSettings = c.legend.labels.focusSettings;
					
					// hover format
					focusSettings.mouseOver.format = "{%SeriesIcon} <b><font color=\"%Color\">{%SeriesName}</font> {%Value.Current}{numDecimals:2,trailingZeros:false}</b>  ";
					// mouse out format
					focusSettings.mouseOut.format = "{%SeriesIcon} <b><font color=\"%Color\">{%SeriesName}</font> {%Value.LastVisible}{numDecimals:2,trailingZeros:false}</b>  ";
					
					// disable comparision mode settings
					$("#comparisionMode").attr("disabled","disabled");
				}
			}
			
			// update settings depending on the mode - changes или percent changes
			function updateComparisionMode() {
				var c = chart.getChartById("idMainChart");
				
				var primaryAxis = c.valueAxes.primary; // link to axis settings
				var focusSettings = c.legend.labels.focusSettings; // legend labels formatting
				
				primaryAxis.labels.font.color = "%Color"; // color labels depending on the values - positive, negative or zero
				
				if ($("#comparisionMode").val() == "%Changes") { // Percent changes
					primaryAxis.scale.mode = "PercentChanges"; // scale mode - Percent changes
					primaryAxis.labels.format = "{%Value}{numDecimals:2,trailingZeros:false,plusSign:true}%"; // format axis labels: {%Value}{numDecimals:0}%.
					// hover format
					focusSettings.mouseOver.format = "<textformat tabstops=\"[100]\">{%SeriesIcon} <b><font color=\"%Color\">{%SeriesName}: </font><font color=\"%ChangeColor.Current\">{%PercentValueChange.Current}{numDecimals:2,plusSign:true}%</font></b><tab/></textformat>";
					// normal format
					focusSettings.mouseOut.format = "<textformat tabstops=\"[100]\">{%SeriesIcon} <b><font color=\"%Color\">{%SeriesName}: </font><font color=\"%ChangeColor.LastVisible\">{%PercentValueChange.LastVisible}{numDecimals:2,plusSign:true}%</font></b><tab/></textformat>";
				}else {
					c.valueAxes.primary.scale.mode = "Changes";  // scale mode - Changes
					c.valueAxes.primary.labels.format = "{%Value}{numDecimals:2,trailingZeros:false,plusSign:true}"; // axis labels format: {%Value}{numDecimals:0}
            		
					// hover format
					focusSettings.mouseOver.format = "<textformat tabstops=\"[80]\">{%SeriesIcon} <b><font color=\"%Color\">{%SeriesName}: </font><font color=\"%ChangeColor.Current\">{%ValueChange.Current}{numDecimals:2,plusSign:true}</font></b><tab/></textformat>";
					// normal format
					focusSettings.mouseOut.format = "<textformat tabstops=\"[80]\">{%SeriesIcon} <b><font color=\"%Color\">{%SeriesName}: </font><font color=\"%ChangeColor.LastVisible\">{%ValueChange.LastVisible}{numDecimals:2,plusSign:true}</font></b><tab/></textformat>";
				}
			}
			
			// handler comparision mode changes
			function changeComparisionMode() {
				updateComparisionMode(); // set new config to the chart
				chart.applySettingsChanges(); // apply changes
			}
			
			//---------------------------------------------------------------------------------------------------
			//		html events binding
			//---------------------------------------------------------------------------------------------------
			
			$(function() {
				$("#baseSeries").change(switchBaseSeries);
				$("#comparisionMode").change(changeComparisionMode);
			});	
		</script>
		<!-- style settings -->
		<style type="text/css">
			table.settings {
				border-style: solid;
				border-width: 1px;
				border-color: #D0CDC9;
				width: 200px;
			}

			table.settings tr th {
				font:normal 60% Verdana;
				background-color: #DCD9D5;
				font-weight:bold;
				padding-bottom:5px;
				padding-top:5px;
				padding-left:10px;
				padding-right:10px;
				text-align:left;
			}
			table.settings tr td {
				background-color: #F8F4F0;
				font:normal 70% Verdana;
				padding-bottom:2px;
				padding-top:2px;
				padding-left:10px;
				padding-right:10px;
				text-align:left;	
			}
			
			table.settings select {
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div id="chartContainer"><!-- Chart Container --></div>
		<table>
			<tr>
			<td valign="top">
				<table class="settings">
					<tr>
						<th width="60px">Compare:</th>
						<td>
							<select id="baseSeries" autocomplete="off"></select>
						</td>
					</tr>
					<tr>
						<th>To:</th>
						<td id="series"></td>
					</tr>
				</table>
				<br />
				<table class="settings">
					<tr><th>Comparison Mode:</th></tr>
					<tr>
						<td>
						<select id="comparisionMode" disabled="disabled" autocomplete="off">
							<option value="Changes" selected="selected">Changes</option>
							<option value="%Changes">%Changes</option>
						</select>
						</td>
					</tr>
				</table>
			</td>
			</tr>
		</table>
	</body>
</html>

Sample Description

How to use this sample?

Use the controls to the right of the chart to select series to compare and comparison mode.

to top

How it works

This sample shows how to make chart show so-called comparison chart, rather popular and useful way to show financial data. All controls are custom HTML controls and the chart is controlled using Object Model modifications. Let's see in details what happens here and how it is done:

When you load the chart you see four series on the chart, one of them is base and is always shown, and three others are compared to it and can be shown or hidden. Also, there is a combobox control, which allows you to change axis mode and show changes in percents or in absolute values.

Show/Hide Series to which main is Compared

Showing/hiding series is done by altering their enabled attribute (as shown in Show/Hide Series sample): getSeriesById method is used to obtain link to series and enabled attribute is set as needed.

Note: if you hide all series to compare and leave only base series displayed - chart is switched to "Changes" mode.

Change Comparison Scale

Changing scale mode is done via object model too, but includes several modifications: you need not only to change scale mode, but also have to modify legend and labels format - to make visualization proper. Illustration below marks these visual elements and how these changes are done you can see in updateComparisionMode function in source code:

Switching Main Series

Combobox is used to switch base series - when you do so switchBaseSeries function is called and several actions are performed: list of checkboxes is recreated, series list in the component is rearranged, so the base series is displayed in the legend first and Scroller Data Provider is switched to and Scroller Thumbnail series is recolored.

Scroller Data Provider

Scroller can show thumbnail series in background to make navigation easier and many more other features, which you can learn from Scroller section. In this sample scroller data provider is switched when base series is changed - to show base series thumbnail in scroller, and this thumbnail is recolored. Scroller data provider is switched in switchBaseSeries function and coloring is changed in switchScrollerColorScheme function. Illustration below shows how scroller changes when different providers and colors are set:

Note: in this sample we have made switching data provider easy with a little trick - config.xml contains four predefined and ready to use scroller data providers and we just change the name in dataProvider attribute. Read more about scroller data provider in Scroller Data Provider article and note, that this approach (creating predefined data providers) may not be applicable in real application.

to top

AnyChartStock JavaScript API

This sample uses the following methods, properties and events from AnyChartStock JavaScript API:

Item Type Description
needConfig Property (Boolean) Defines whether the access to full chart configuration object model is required.
objectModel Property (Object) Gets chart configuration as an Object.
applySettingsChanges Method Commits changes made to settings element of the objectModel.
getChartById Method Returns link to a chart object in the objectModel.
getSeriesById Method Gets series object from the object model by its id.
setXMLFile Method Sets chart XML configuration file path.
write Method Adds the chart to HTML DOM as a child of the specified container.
onChartDraw Event This event is dispatched when the AnyChart Stock is drawn.

to top

Prerequisites

This section lists all configuration, data and auxiliary files required for this sample.

Configuration file

CSV files

SWF files

  • AnyChartStock.swf - AnyChart Stock component.
  • Preloader.swf - AnyChart Stock helper component that loads the main component (AnyChartStock.swf) and displays loading progress.

JavaScript Libraries

  • jquery.min.js - A JavaScript jQuery library. Learn more at jQuery official site.
  • AnyChartStock.js - A JavaScript library that is shipped with AnyChart Stock component. It is used to embed the component into HTML DOM and to comunicate with the Flash part.

to top

The information contained in this website is for general information purposes only. All sample data provided on this site is for demonstration purposes only.

The logos and names of other companies and products mentioned on this site are copyright and/or trademarks of their respective owners.

The content on this site, including news, quotes, data and other information, is provided for your personal information only, and is intended for demonstration purposes only. Content on this site is not appropriate for the purposes of making a decision to carry out a transaction or trade. Nor does it provide any form of advice (investment, tax, legal) amounting to investment advice, or make any recommendations regarding particular financial instruments, investments or products.

In no event AnyChart will be liable for any loss or damage including without limitation, indirect or consequential loss or damage, or any loss or damage whatsoever arising from loss of data or profits arising out of, or in connection with, the use of this website.

This site may point to other Internet sites that may be of interest to you, however AnyChart does not endorse or take responsibility for the content on such other sites

Market data and News provided by and copyright RediNews, Incorporated.