From d6e3bc4e5e6b1dddf157a101f4c669b9c311803b Mon Sep 17 00:00:00 2001
From: edA-qa on MBP <edA-qa@disemia.com>
Date: Thu, 14 Dec 2017 11:58:02 +0100
Subject: [PATCH] changing to use models instead of observables

---
 Samples/Visualization/Charting/BarChart.ux    | 33 +--------------
 .../Visualization/Charting/Charting.unoproj   |  3 +-
 .../Visualization/Charting/DoubleBarChart.ux  | 35 +---------------
 .../Visualization/Charting/FullBarChart.ux    | 19 +--------
 Samples/Visualization/Charting/GroupLine.ux   | 10 +----
 Samples/Visualization/Charting/HorzLine.ux    | 23 +----------
 Samples/Visualization/Charting/MixHorzLine.ux | 14 +------
 .../Visualization/Charting/MixedBarChart.ux   | 24 +----------
 Samples/Visualization/Charting/NegHorzLine.ux | 20 +---------
 Samples/Visualization/Charting/PieChart.ux    | 30 +-------------
 .../Visualization/Charting/QuarterGroups.ux   | 27 ++-----------
 Samples/Visualization/Charting/ScatterPlot.ux | 35 +---------------
 Samples/Visualization/Charting/SpiderChart.ux | 40 +------------------
 .../Visualization/Charting/StackedBarChart.ux | 37 +----------------
 Samples/Visualization/Charting/VertLine.ux    | 16 +-------
 Samples/Visualization/Charting/VertRanges.ux  | 19 +--------
 16 files changed, 22 insertions(+), 363 deletions(-)

diff --git a/Samples/Visualization/Charting/BarChart.ux b/Samples/Visualization/Charting/BarChart.ux
index 8da5ac6..f2083f3 100644
--- a/Samples/Visualization/Charting/BarChart.ux
+++ b/Samples/Visualization/Charting/BarChart.ux
@@ -1,35 +1,4 @@
-<ChartPage Title="Vertical orientation bar chart" File="BarChart" ux:Class="BarChart" xmlns:c="Fuse.Charting">
-	<JavaScript>
-		var Observable = require("FuseJS/Observable")
-		function Item( x, y ) {
-			this.x = x
-			this.y = y
-			this.label = "" + x
-		}
-		
-		function gauss( x ) {
-			var sigma = Math.sqrt(15)
-			var a = 1 / (sigma * Math.sqrt(2 * Math.PI))
-			var b = 0
-			var c = sigma
-			return a * Math.pow( Math.E, -(x - b)*(x-b) / (2*c*c) )
-		}
-		exports.data = Observable()
-		exports.data2 = Observable()
-		for (var i=-15; i <= 15; ++i ) {
-			var item = new Item(i, gauss(i));
-			exports.data.add( item  )
-			exports.data2.add( Math.max(0, item.y + (Math.random()-0.3)*0.04) )
-		}
-		
-		exports.offset = Observable(0)
-		exports.incrOffset = function() {
-			exports.offset.value += 1
-		}
-		exports.decrOffset = function() {
-			exports.offset.value -= 1
-		}
-	</JavaScript>
+<ChartPage Title="Vertical orientation bar chart" File="BarChart" ux:Class="BarChart" xmlns:c="Fuse.Charting" Model="BarChart">
 	<AttractorConfig Unit="Normalized" Easing="SinusoidalInOut" 
 		Duration="0.3" DurationExp="0" ux:Global="plotAttract"/>
 	
diff --git a/Samples/Visualization/Charting/Charting.unoproj b/Samples/Visualization/Charting/Charting.unoproj
index c1c2ceb..242a781 100644
--- a/Samples/Visualization/Charting/Charting.unoproj
+++ b/Samples/Visualization/Charting/Charting.unoproj
@@ -5,6 +5,7 @@
     "Fuse.Charting",
   ],
   "Includes": [
-    "*"
+    "*",
+    "*.js:FuseJS",
   ]
 }
diff --git a/Samples/Visualization/Charting/DoubleBarChart.ux b/Samples/Visualization/Charting/DoubleBarChart.ux
index 11c0f63..02e4890 100644
--- a/Samples/Visualization/Charting/DoubleBarChart.ux
+++ b/Samples/Visualization/Charting/DoubleBarChart.ux
@@ -1,37 +1,4 @@
-<ChartPage Title="2-series with side-by-side bars" File="DoubeBarChart" ux:Class="DoubleBarChart" xmlns:c="Fuse.Charting">
-	<JavaScript>
-		var Observable = require("FuseJS/Observable")
-		function Item( x, y ) {
-			this.x = x
-			this.y = y
-		}
-		
-		function gauss( x, u ) {
-			var sigma = Math.sqrt(u)
-			var a = 1 / (sigma * Math.sqrt(2 * Math.PI))
-			var b = 0
-			var c = sigma
-			return a * Math.pow( Math.E, -(x - b)*(x-b) / (2*c*c) )
-		}
-		
-		function gaussItems( o, u, f ) {
-			var items = []
-			for (var i=-7; i <= 7; ++i ) {
-				items.push( new Item(i, gauss(i + o, u)*f ) )
-			}
-			return items
-		}
-		
-		exports.data1 = Observable()
-		exports.data2 = Observable()
-		exports.data1.replaceAll( gaussItems( 0, 7, 1 ) )
-		exports.data2.replaceAll( gaussItems( 5, 15, 0.5 ) )
-		
-		exports.random = function() {
-			exports.data1.replaceAll( gaussItems( Math.random() * 6 - 3, Math.random() * 6 + 4, 1 ) )
-			exports.data2.replaceAll( gaussItems( Math.random() * 6 + 1, Math.random() * 8 + 11, 0.5 ) )
-		}
-	</JavaScript>
+<ChartPage Title="2-series with side-by-side bars" File="DoubeBarChart" ux:Class="DoubleBarChart" xmlns:c="Fuse.Charting" Model="DoubleBarChart">
 	<c:Plot Margin="5,20,20,10">
 		<c:DataSeries Data="{data1}" ux:Name="series0"/>
 		<c:DataSeries Data="{data2}" ux:Name="series1"/>
diff --git a/Samples/Visualization/Charting/FullBarChart.ux b/Samples/Visualization/Charting/FullBarChart.ux
index 5d5cd35..3c0c704 100644
--- a/Samples/Visualization/Charting/FullBarChart.ux
+++ b/Samples/Visualization/Charting/FullBarChart.ux
@@ -1,21 +1,4 @@
-<ChartPage ux:Class="FullBarChart" File="FullBarChart" Title="Selectable full height bars" xmlns:c="Fuse.Charting">
-	<JavaScript>
-		var Observable = require("FuseJS/Observable")
-		
-		function Item( value, label ) {
-			this.value = value
-			this.label = label
-		}
-		exports.data = Observable( 
-			new Item(7, "2007"),
-			new Item(20, "2008"),
-			new Item(13, "2009"),
-			new Item(27, "2010"),
-			new Item(15, "2011"),
-			new Item(5, "2012"),
-			new Item(50, "2013")
-		);
-	</JavaScript>
+<ChartPage ux:Class="FullBarChart" File="FullBarChart" Title="Selectable full height bars" xmlns:c="Fuse.Charting" Model="FullBarChart">
 	<c:Plot YRange="0,60" YAxisSteps="6" Margin="20,10,50,10" ux:Name="plot">
 		<Selection/>
 		<c:DataSeries Data="{data}"/>
diff --git a/Samples/Visualization/Charting/GroupLine.ux b/Samples/Visualization/Charting/GroupLine.ux
index aff0b6d..1096bcb 100644
--- a/Samples/Visualization/Charting/GroupLine.ux
+++ b/Samples/Visualization/Charting/GroupLine.ux
@@ -1,16 +1,10 @@
-<ChartPage ux:Class="GroupLine" File="GroupLine" Title="Lots of data in groups" xmlns:c="Fuse.Charting">
+<ChartPage ux:Class="GroupLine" File="GroupLine" Title="Lots of data in groups" xmlns:c="Fuse.Charting" Model="GroupLine">
 	<JavaScript>
-		var Observable = require("FuseJS/Observable")
-
-		exports.items = Observable()
-		for (var i=0; i < 500; ++i) {
-			exports.items.add( Math.sin(i / 20.0) * Math.cos(i/40) )
-		}
-
 		//the very small step values are to show the offseting/scrolling of groups in detail
 		exports.incrOffset = function() {
 			plot.stepOffset(1)
 		}
+		
 		exports.decrOffset = function() {
 			plot.stepOffset(-1)
 		}
diff --git a/Samples/Visualization/Charting/HorzLine.ux b/Samples/Visualization/Charting/HorzLine.ux
index 1a81e71..9f68929 100644
--- a/Samples/Visualization/Charting/HorzLine.ux
+++ b/Samples/Visualization/Charting/HorzLine.ux
@@ -1,28 +1,9 @@
-<ChartPage ux:Class="HorzLine" File="HorzLine" Title="Decorated line chart" xmlns:c="Fuse.Charting">
+<ChartPage ux:Class="HorzLine" File="HorzLine" Title="Decorated line chart" xmlns:c="Fuse.Charting" Model="HorzLine">
 	<JavaScript>
-		var Observable = require("FuseJS/Observable")
-		
-		function Item( value, label ) {
-			this.value = value
-			this.label = label
-		}
-		exports.data = Observable( 
-			new Item(7, "2007"),
-			new Item(20, "2008"),
-			new Item(13, "2009"),
-			new Item(27, "2010"),
-			new Item(15, "2011"),
-			new Item(5, "2012"),
-			new Item(50, "2013"),
-			new Item(20, "2014"),
-			new Item(30, "2015"),
-			new Item(35, "2016"),
-			new Item(15, "2017")
-		);
-
 		exports.incrOffset = function() {
 			plot.stepOffset(1)
 		}
+	
 		exports.decrOffset = function() {
 			plot.stepOffset(-1)
 		}
diff --git a/Samples/Visualization/Charting/MixHorzLine.ux b/Samples/Visualization/Charting/MixHorzLine.ux
index 129d924..f214775 100644
--- a/Samples/Visualization/Charting/MixHorzLine.ux
+++ b/Samples/Visualization/Charting/MixHorzLine.ux
@@ -1,16 +1,4 @@
-<ChartPage Title="Extruded line to base" File="MixHorzLine" ux:Class="MixHorzLine" xmlns:c="Fuse.Charting">
-	<JavaScript>
-		var Observable = require("FuseJS/Observable")
-		exports.points = Observable( -10, 50,-20, 30, -35 )
-		
-		exports.random = function() {
-			var items = []
-			for (var i =0; i < 5; ++i) {
-				items.push( (Math.random() - 0.5) * 100 )
-			}
-			exports.points.replaceAll(items)
-		}
-	</JavaScript>
+<ChartPage Title="Extruded line to base" File="MixHorzLine" ux:Class="MixHorzLine" xmlns:c="Fuse.Charting" Model="MixHorzLine">
 	<c:Plot XAxisMetric="Count" RangePadding="0.1" ux:Name="plot">
 		<c:DataSeries Data="{points}"/>
 
diff --git a/Samples/Visualization/Charting/MixedBarChart.ux b/Samples/Visualization/Charting/MixedBarChart.ux
index 218ed91..583a453 100644
--- a/Samples/Visualization/Charting/MixedBarChart.ux
+++ b/Samples/Visualization/Charting/MixedBarChart.ux
@@ -1,26 +1,4 @@
-<ChartPage Title="Multi-series with pos/neg styling" File="MixedBarChart" ux:Class="MixedBarChart" xmlns:c="Fuse.Charting">
-	<JavaScript>
-		var Observable = require("FuseJS/Observable")
-		function Item( y, label ) {
-			this.y = y
-			this.label = label
-		}
-		
-		exports.data1 = Observable()
-		exports.data2 = Observable()
-		
-		exports.random = function() {
-			exports.data1.clear()
-			exports.data2.clear()
-			for (var i=0; i <= 10; ++i ) {
-				var y = (Math.random() + 0.2) * 100 * (Math.random() > 0.5 ? -1 : 1)
-				exports.data1.add( new Item( y, "#" + i ) )
-				exports.data2.add( { y: y * (Math.random() * 0.8 + 0.2) } )
-			}
-		}
-		
-		exports.random()
-	</JavaScript>
+<ChartPage Title="Multi-series with pos/neg styling" File="MixedBarChart" ux:Class="MixedBarChart" xmlns:c="Fuse.Charting" Model="MixedBarChart">
 	<c:Plot Margin="5,20,20,10" YAxisSteps="8">
 		<c:DataSeries Data="{data1}"/>
 		<c:DataSeries Data="{data2}"/>
diff --git a/Samples/Visualization/Charting/NegHorzLine.ux b/Samples/Visualization/Charting/NegHorzLine.ux
index ed8e642..52a2318 100644
--- a/Samples/Visualization/Charting/NegHorzLine.ux
+++ b/Samples/Visualization/Charting/NegHorzLine.ux
@@ -1,22 +1,4 @@
-<ChartPage Title="Negative values with in-plot ticks" File="NegHorzLine" ux:Class="NegHorzLine" xmlns:c="Fuse.Charting">
-	<JavaScript>
-		var Observable = require("FuseJS/Observable")
-		exports.pointsA = Observable( -10, -50,-20, -30, -35 )
-		exports.pointsB = Observable( -5, -40,-30, -20, -45 )
-		
-		function randomItems() {
-			var items = []
-			for (var i =0; i < 5; ++i) {
-				items.push( -Math.random() * 50 )
-			}
-			return items
-		}
-		
-		exports.random = function() {
-			exports.pointsA.replaceAll( randomItems() )
-			exports.pointsB.replaceAll( randomItems() )
-		}
-	</JavaScript>
+<ChartPage Title="Negative values with in-plot ticks" File="NegHorzLine" ux:Class="NegHorzLine" xmlns:c="Fuse.Charting" Model="NegHorzLine">
 	<AttractorConfig Unit="Normalized" Easing="CubicInOut" Duration="0.3" ux:Global="plotAttract"/>
 	<c:Plot XAxisMetric="Count" RangePadding="0.1">
 		<c:DataSeries Data="{pointsA}"/>
diff --git a/Samples/Visualization/Charting/PieChart.ux b/Samples/Visualization/Charting/PieChart.ux
index cf4e912..b958c09 100644
--- a/Samples/Visualization/Charting/PieChart.ux
+++ b/Samples/Visualization/Charting/PieChart.ux
@@ -1,32 +1,4 @@
-<ChartPage Title="Pie chart" File="PieChart" ux:Class="PieChart" xmlns:c="Fuse.Charting">
-	<JavaScript>
-		var Observable = require("FuseJS/Observable")
-		function Item( y, z, label, color ) {
-			this.y = y
-			this.z = z
-			this.label = label
-			this.color = color
-		}
-		
-		var names = [ "Vebjørn", "Annbjørg",  "Øystein", "Åslaug",  "Tormod", "Borghild" ]
-		var colors = [ "#DEF", "#DFE", "#FDE", "#EDF", "#EFD", "#FED" ]
-		exports.data1 = Observable()
-		
-		function create() {
-			var list = []
-			for (var i=0; i < names.length; ++i ) {
-				var c = Math.random() * 100 + 10
-				list.push( new Item( c, Math.random(), names[i], colors[i] ) )
-			}
-			return list
-		}
-		
-		exports.random = function() {
-			exports.data1.replaceAll( create() )
-		}
-		
-		exports.random()
-	</JavaScript>
+<ChartPage Title="Pie chart" File="PieChart" ux:Class="PieChart" xmlns:c="Fuse.Charting" Model="PieChart">
 	<AttractorConfig Unit="Normalized" Type="Elastic" ux:Global="pieAttract"/>	
 	<ChartButton Alignment="TopRight" Margin="5" Clicked="{random}" Label="✧"/>
 	<c:Plot Margin="5,20,20,10">
diff --git a/Samples/Visualization/Charting/QuarterGroups.ux b/Samples/Visualization/Charting/QuarterGroups.ux
index c879158..67c9b9e 100644
--- a/Samples/Visualization/Charting/QuarterGroups.ux
+++ b/Samples/Visualization/Charting/QuarterGroups.ux
@@ -1,31 +1,10 @@
-<ChartPage ux:Class="QuarterGroups" File="QuarterGroups" 
-	Title="Monthly data grouped into Quarters" xmlns:c="Fuse.Charting">
+<ChartPage ux:Class="QuarterGroups" File="QuarterGroups(plot)" 
+	Title="Monthly data grouped into Quarters" xmlns:c="Fuse.Charting" Model="QuarterGroups">
 	<JavaScript>
-		var Observable = require("FuseJS/Observable")
-		
-		function Item( value, quarter, month ) {
-			this.value = value
-			this.label = quarter
-		}
-		exports.data = Observable( 
-			new Item(7, "Q1", "January"),
-			new Item(20, "Q1", "February"),
-			new Item(13, "Q1", "March"),
-			new Item(27, "Q2", "April"),
-			new Item(15, "Q2", "May"),
-			new Item(5, "Q2", "June"),
-			new Item(50, "Q3", "July"),
-			new Item(20, "Q3", "August"),
-			new Item(30, "Q3", "September"),
-			new Item(35, "Q4", "October"),
-			new Item(15, "Q4", "November"),
-			new Item(20, "Q4", "December"),
-			new Item(21, "Q1", "January")
-		);
-
 		exports.incrOffset = function() {
 			plot.stepOffset(1)
 		}
+		
 		exports.decrOffset = function() {
 			plot.stepOffset(-1)
 		}
diff --git a/Samples/Visualization/Charting/ScatterPlot.ux b/Samples/Visualization/Charting/ScatterPlot.ux
index 0181498..44d2f4f 100644
--- a/Samples/Visualization/Charting/ScatterPlot.ux
+++ b/Samples/Visualization/Charting/ScatterPlot.ux
@@ -1,36 +1,5 @@
-<ChartPage Title="4-d scatter plot" File="ScatterPlot" ux:Class="ScatterPlot" xmlns:p="Fuse.Charting">
-	<JavaScript>
-		var Observable = require("FuseJS/Observable")
-		
-		function Item(x,y,z,w) {
-			this.x = x
-			this.y = y
-			this.z = z
-			this.w = w
-		}
-		exports.items = Observable()
-		
-		function genRandom() {
-			var items = []
-			var count = 25
-			for (var i=0; i < count; ++i) {
-				if (Math.random() > 0.5) {
-					continue
-				}
-				
-				var base = i / count
-				items.push( new Item( Math.random() * 10 + base * 90, Math.random() * 300 + base*700, 
-					Math.random(), Math.random() ) )
-			}
-			return items
-		}
-		
-		exports.random = function() {
-			exports.items.replaceAll( genRandom() )
-		}
-		
-		exports.random()
-	</JavaScript>
+<ChartPage Title="4-d scatter plot" File="ScatterPlot" ux:Class="ScatterPlot" xmlns:p="Fuse.Charting"
+	Model="ScatterPlot">
 	<p:Plot Margin="10" ux:Name="p" XAxisMetric="Range">
 		<p:DataSeries Data="{items}"/>
 		<!-- Adjust the number of  divisions based on the available space -->
diff --git a/Samples/Visualization/Charting/SpiderChart.ux b/Samples/Visualization/Charting/SpiderChart.ux
index cc4701f..42785d8 100644
--- a/Samples/Visualization/Charting/SpiderChart.ux
+++ b/Samples/Visualization/Charting/SpiderChart.ux
@@ -1,42 +1,4 @@
-<ChartPage Title="Spider chart" File="SpiderChart" ux:Class="SpiderChart" xmlns:c="Fuse.Charting">
-	<JavaScript>
-		var Observable = require("FuseJS/Observable")
-
-		var data = [ {
-			label: "Attention",
-			value: 54,
-		}, {
-			label: "Care",
-			value: 15,
-		}, { 
-			label: "Fight",
-			value: 68,
-		}, {
-			label: "Performance",
-			value: 74,
-		}, {
-			label: "Avoid bad experiences",
-			value: 51,
-		}, {
-			label: "Under- standing",
-			value: 90,
-		}, {
-			label: "Approval",
-			value: 58,
-		}, { 
-			label: "Sense of Duty",
-			value: 80,
-		}, {
-			label: "Dominance",
-			value: 80,
-		}, {
-			label: "Autonomy",
-			value: 51,
-		} ]
-		
-		exports.data = Observable()
-		exports.data.replaceAll( data )
-	</JavaScript>
+<ChartPage Title="Spider chart" File="SpiderChart" ux:Class="SpiderChart" xmlns:c="Fuse.Charting" Model="SpiderChart">
 	<c:Plot Margin="40,20" YRange="0,100">
 		<c:DataSeries Data="{data}"/>
 
diff --git a/Samples/Visualization/Charting/StackedBarChart.ux b/Samples/Visualization/Charting/StackedBarChart.ux
index 575d075..57e9649 100644
--- a/Samples/Visualization/Charting/StackedBarChart.ux
+++ b/Samples/Visualization/Charting/StackedBarChart.ux
@@ -1,40 +1,5 @@
 <ChartPage ux:Class="StackedBarChart" File="StackedBarChart" Title="Stacked bar ranges"
-	xmlns:c="Fuse.Charting">
-	<JavaScript>
-		var Observable = require("FuseJS/Observable")
-		
-		function Item( value, label ) {
-			this.value = value
-			this.label = label
-		}
-		exports.data1 = Observable( 
-			new Item(10, "2007"),
-			new Item(20, "2008"),
-			new Item(13, "2009"),
-			new Item(27, "2010"),
-			new Item(15, "2011"),
-			new Item(5, "2012"),
-			new Item(50, "2013")
-		);
-		exports.data2 = Observable( 
-			new Item(20, "2007"),
-			new Item(10, "2008"),
-			new Item(13, "2009"),
-			new Item(11, "2010"),
-			new Item(24, "2011"),
-			new Item(32, "2012"),
-			new Item(3, "2013")
-		);
-		exports.data3 = Observable( 
-			new Item(20, "2007"),
-			new Item(5, "2008"),
-			new Item(13, "2009"),
-			new Item(11, "2010"),
-			new Item(24, "2011"),
-			new Item(32, "2012"),
-			new Item(3, "2013")
-		);
-	</JavaScript>
+	xmlns:c="Fuse.Charting" Model="StackedBarChart">
 	<c:Plot Margin="20,10,50,10" ux:Name="plot" ZAxisMetric="MergeRange">
 		<c:DataSeries Data="{data1}"/>
 		<c:DataSeries Data="{data2}" Metric="Add"/>
diff --git a/Samples/Visualization/Charting/VertLine.ux b/Samples/Visualization/Charting/VertLine.ux
index e36f601..498016e 100644
--- a/Samples/Visualization/Charting/VertLine.ux
+++ b/Samples/Visualization/Charting/VertLine.ux
@@ -1,18 +1,4 @@
-<ChartPage Title="Transposed X/Y axes" File="VertLine" ux:Class="VertLine" xmlns:c="Fuse.Charting">
-	<JavaScript>
-		var Observable = require("FuseJS/Observable")
-		function Item( value, label ) {
-			this.x = value
-			this.label = label
-		}
-		exports.data = Observable( 
-			new Item(1, "2012"),
-			new Item(5, "2013"),
-			new Item(2, "2014"),
-			new Item(3, "2015"),
-			new Item(3.5, "2016")
-		);
-	</JavaScript>
+<ChartPage Title="Transposed X/Y axes" File="VertLine" ux:Class="VertLine" xmlns:c="Fuse.Charting" Model="VertLine">
 	<!-- This swaps the default role of the X/Y Axes, making Y the counter one and X the range. A very similar effect can be achieved by using `Orientation="Vertical"` instead, which is the recommended approach. This example is nonetheless kept for the odd situations where it might be better, or easier, to swap the axes. -->
 	<c:Plot XAxisMetric="Range" YAxisMetric="Count">
 		<c:DataSeries Data="{data}"/>
diff --git a/Samples/Visualization/Charting/VertRanges.ux b/Samples/Visualization/Charting/VertRanges.ux
index 205db63..9498284 100644
--- a/Samples/Visualization/Charting/VertRanges.ux
+++ b/Samples/Visualization/Charting/VertRanges.ux
@@ -1,21 +1,4 @@
-<ChartPage Title="Vertical layout with ranged bars" File="VertRanges" ux:Class="VertRanges" xmlns:c="Fuse.Charting">
-	<JavaScript>
-		var Observable = require("FuseJS/Observable")
-		function Item( y, z, label ) {
-			this.y = y
-			this.z = z
-			this.label = label
-		}
-		
-		var names = [ "Vebjørn", "Annbjørg",  "Øystein", "Åslaug",  "Tormod", "Borghild", "Dagfinn", "Gudrun", "Sverre", "Åshild" ];
-		exports.data1 = Observable()
-		for (var i=0; i < names.length; ++i ) {
-			var c = Math.random() * 100 -25
-			var y = c - (Math.random() + 0.2) * 50
-			var z = c + (Math.random() + 0.2) * 50
-			exports.data1.add( new Item( y, z, names[i] ) )
-		}
-	</JavaScript>
+<ChartPage Title="Vertical layout with ranged bars" File="VertRanges" ux:Class="VertRanges" xmlns:c="Fuse.Charting" Model="VertRanges">
 	<c:Plot XAxisMetric="OffsetCount" ZAxisMetric="MergeRange" Margin="5,20,20,10" Orientation="Vertical">
 		<c:DataSeries Data="{data1}"/>