Creating Flash Charts From Google Spreadsheets

With Google docs gaining popularity, it is anticipated that in the near future there will be a great demand for connecting it to external systems for various purposes such as data interchange, data visualization, etc. In this article, I will show you how to connect Flash based charts (FusionCharts) to Google Spreadsheets and plot live data using JavaScript.

Before I delve into the technicalities involved in retrieving data from Google spreadsheets, I will provide an overview to FusionCharts and begin my explanation from root level – this is for the benefit of those who have come across FusionCharts for first time. A no-restriction version of FusionCharts can be downloaded from www.fusioncharts.com/download. FusionCharts also has a totally free version at www.fusioncharts.com/free; but this article uses a lot of features from FusionCharts v3, so it is recommended to download FusionCharts v3.

All the code associated with this article (and some more examples as well) are present as a download with this article.

Quick Introduction to FusionCharts

FusionCharts is a Flash charting solution that helps you create animated & interactive charts for web pages. FusionCharts is essentially a collection of SWF files which run inside Adobe Flash player, and accept data and configuration settings in XML, thereby making it cross-script and cross-platform compatible. The XML is intuitive and it can be learnt easily with the help of an exhaustive online documentation, which can be accessed from www.fusioncharts.com/docs.

Additionally, if you're not a die-hard fan of XML, FusionCharts comes with an extensive range of API’s, which help in its implementation with all forms of web programming technologies such as ASP, ASP.NET, PHP, Ruby on Rails, Python etc.

Quick Example of Building a Chart with FusionCharts

FusionCharts SWF’s can be embedded in a HTML page either using the <object>/<embed> tags or through FusionCharts JavaScript class. Using the JavaScript class for embedding the chart is advisable, as this ensures that the charts will function smoothly on all browsers. The XML data source can be provided to the chart either as an external file, or it can be directly incorporated within the HTML page.

Let's quickly build a chart to depict the data shown in the table below.

Appliance	Units in Watt
Lighting	1200
Heater	1800
Desktop	1500
Cooler	1200
Elevator	1500
Microwave Oven	1600
Television	1500
Washing Machine	2800
Music System	2200
Cleaners	600

The following piece of code constitutes the XML data source pertaining to the data table above:


<chart numberSuffix='W' caption='Electricity Consumption' formatNumberScale='0'>
	<set label='Lighting' value='1200' />
	<set label='Heater' value='1800' />
	<set label='Desktop' value='1500' />
	<set label='Cooler' value='1200' />
	<set label='Elevator' value='1500' />
	<set label='Microwave Oven' value='1600' />
	<set label='Television' value='1500' />
	<set label='Washing Machine' value='2800' />
	<set label='Music System' value='2200' />
	<set label='Cleaners' value='600' />
</chart>

Quite simple and intuitive - isn't it? The <chart> element is the root element that contains visual and functional configuration of chart. Each <set> element represents a data item in the chart. This data structure pertains to single series charts in FusionCharts, where you've only dataset. Multiple data-sets call for multi-series XML format, which involves a couple more XML elements.

Now that the XML is ready (we've saved it as myXML.xml), we need to embed the chart into an HTML page with the help of the following code:

<script src="FusionCharts.js" type="text/javascript"></script>

	<div id="firstChartDiv">
		My Chart DIV
	</div>
	<script type="text/javascript">
		// Initialize chart
		var chart = new FusionCharts("Pie3D.swf", "firstChartId", "600", "300", "0", "0");
		
		// feed chart dta source
        chart.setDataURL("myXML.xml");
		
		// render chart into DIV
        chart.render("firstChartDiv");
		
	</script>

The code (above) creates a DIV named firstChartDiv which will serve as a container for the chart. Up next, an instance of the FusionCharts object is created using JavaScript and following parameters are passed into it.

Name of the SWF file to be used (Pie3d.swf in this case)
Name of the Chart (firstChartId in this case)
Height of the chart in pixels
Width of the chart in pixels

The subsequent line of code provides the name of the external XML data source file (myXML.xml in this case). And the final line of the JavaScript code indicates the name of the container DIV in which the chart will render. While using the JavaScript class for embedding the chart, it is necessary to create a container DIV for the chart.

The following chart is generated by the code. The image belows shows a static version; the actual chart is animated and allows interactivity like slicing of pies, rotation of chart, tool-tips etc.

Now, that we have covered the process of creating charts using static data source, let's move on to the process of rendering a chart using data obtained from Google spreadsheet.

Connecting these charts to Google Docs Spreadsheet

Google Docs spreadsheets transfer data in form of JSON feeds. So, in order to render charts using data obtained from Google spreadsheet, it is important to convert the acquired JSON feeds into XML format as required by FusionCharts.

There are multiple ways to convert JSON into XML. Either, you could write your own code to take each JSON element and convert into XML. Or, you could make use of rule based engines like JsonT to aid in this process. We'll use JsonT for this article, as it helps us do things easier and quicker. JsonT can be downloaded from http://goessner.net/articles/jsont/

Using JsonT one can easily define a rule to convert JSON data into a string of desired format. Following is an example of JSON data:

	var coffeeSalesJSON = {
		"Espresso" 		: "5000",
		"Cappuccino"		: "6000",
		"Latte"			: "7000",
		"affogato" 		: "4000",
		"Cortado" 		: "2000",
		"Macchiato"	 	: "3000",
		"Frappuccino"		: "6000"
	};

The following code converts the JSON data (displayed abve) into FusionCharts XML format and then creates a chart out of it.


	var JSONParseRules = {
	 "self" : "<chart>\n {@getData(#)}</chart>", 
	 "getData" : function(x){ 
			var c = ""; 
			for( var i in x	) 
				c += "\n<set label='" + i + "' value='" + x[i]  + "'/>"; 
			return c;
	   }
	 }

	var coffeeChartStrXML = jsonT( coffeeSalesJSON, JSONParseRules );
	
	var coffeeChart = new FusionCharts("Column3D.swf", "CoffeeChartId", "600", "350", "0", "0");
	
	coffeeChart.setDataXML( coffeeChartStrXML );		   
	
	coffeeChart.render( "coffeeChartDiv" );

For the code to work, it is essential to link jsont.js JavaScript file to the HTML page.

The code (above) builds XMLstring from JSON data with the help of a rule, that iterates through each key-value pairs of JSON data and treats key names as categories and values as data values for the chart. You may read more on JsonT rules at http://goessner.net/articles/jsont/. Next, we use that XML and build the chart.

In order to use a Google spreadsheet as a dynamic data source for the chart, it is essential to publish it for public viewing. At the time of publishing the document for public viewing – Google generates a unique key. This key is used for requesting data feeds from Google; hence it is important to preserve the key.

Please note that, in order to work with Google's JSON feeds it is essential to modify josnt.js slightly. I have made minor modifications to jsont.js in order to prevent the conflict that arises due to Jsont.js’s use of $ as an object pointer and Google generated JSON feed's use of $ as property name. I have modified Jsont.js so that it uses # as an object pointer.

For this demonstrative example I created a Google spreadsheet, which included three sheets – each of which, contained yearly sales data for the years 2006, 2007 and 2008. The spreadsheet can be viewed through the following link http://docs.google.com.

The process of creating a Google spreadsheet

The following code will help you render a chart that is plotted using data drawn from Google spreadsheet:

<script src="FusionCharts.js" type="text/javascript"></script><br /><br /><body onload="initpage();">
	<div id="coffeeChartDiv">Chart Will load up here</div>
</body>
<script type="text/javascript">
	// stores the array of spreadsheets present in the specified google spreadsheet
	var sheets;
	
	// stores the count of spreadsheets parsed 
	// When sheetCount becomes equal to the length of number of sheet 
	// I render the chart finally
	var sheetsCount = 0;
	
	// stores various chart configurations to be added in <chart> element of XML
	// you can modify these pas per your needs
	var chartConfigJSON = { rotateValues:1, placeValuesInside:1, numberPrefix:'£' };

	// store XML elements in array (later to be joined as string)
	var strXML=Array(4);

	/* 
	* Fetches Google Spreadsheet data
	* pass your spreadsheet key as parameter or the full url of the feed
	* @param 	key 		 key of Spreadsheet or the full url of the feed
	* @param	callback	 your callback function name as string
	* @param	feedtype	 can be json/json-in-script
	* @param	feedformat list/cells/spreadsheets
	*/
	function getGoogleSpreadsheetData(key, callback, feedtype,feedformat ){
		
		// default values
		feedtype = feedtype || "json-in-script";
		feedformat  = feedformat || "list" ;
		callback = callback || "gssdatafeedcallback";
		
		// build feed url
		var href;
		if( key.search("http")<0)
			href = 'http://spreadsheets.google.com/feeds/'+ feedformat + '/' + key + '/public/values';
		else
			href = key;
		
  		// create script element
		var script = document.createElement('script');
		// add spreadsheet feed as the source of the script
		script.setAttribute('src', href+'?alt='+feedtype+'&callback='+callback);
	  	script.setAttribute('id', 'jsonScript');
	  	script.setAttribute('type', 'text/javascript');
		// add script to fetch Google Spreadsheet feed
	  	document.documentElement.firstChild.appendChild(script);
	}
		
	// Callback function to parse spreadsheet data and 
	// fetch data from each spreadsheet present in the spreadsheet
	// the json data would be passed as parameter
	function parseSpreadsheet(jsonsheets){
		// get chart caption as the name of the spreadsheet
		chartConfigJSON.caption = jsonsheets.feed.title.$t;
		// get the array of all spreadsheets
		sheets =jsonsheets.feed.entry;
	
		// fetch data from each spreadsheet
		for(var i=0;i<sheets.length;i++)
			getGoogleSpreadsheetData(sheets[i].link[0].href, "parsespreadsheet", "json-in-script" );	
		
	}
	
	// This function is the actual chart data generator
	// It receives each spreadsheet JSON data feed
	// parses using jsonT into required XML
	function parsespreadsheet(gjson)
	{
		// Since one feed is received increase count by 1
		sheetsCount++;
		
		// will store JSON parsing rule as per jsonT library
		var rule;
		
		// get array of spreadsheet data
		var feedEntries = gjson.feed.entry;
		
		// get the name of the sheet as series name of the chart dataset
		var seriesName = gjson.feed.title.$t;
		
		// get the column name as per google spreadsheet's column name
		var colName;
		if( feedEntries[0])
			colName =feedEntries[0].content.$t.match(/.+(?=\:)/);

		// initializing XML building array only once.
		// Hence checking if the first element is empty
		// I also fetch the category names from the first sheet
		// This process I keep simple for demonstration 
		if (!strXML[0]){
			strXML[0]="<chart>";
			// set xAxisName (hardcode it as Google List Data 
			// API does not provide this name as yet in JSON) 
			chartConfigJSON.xAxisName= "Products";
			// Set the column name as the yAxisName
			if (feedEntries[0]) chartConfigJSON.yAxisName = colName;  
			// if so I add all chart configurations etc. (one time)
			for(var i in chartConfigJSON) {
				strXML[0]= strXML[0].replace(/(<chart[^>]*)(>)/,"$1 "+ i+"='"+chartConfigJSON[i] +"' $2");
			}
			
			strXML[3] ="</chart>";
			
			// Build JsonT rule to parse category names
			rule = {
				"self":"<categories>{#}</categories>",
				"self[*]":"<category label='{#.title.$t}'/>"
			};
			
			// store category labels in array using jsonT
			strXML[1] =  jsonT(feedEntries, rule);
			
			// initialize data storing element of the XML building array
			strXML[2] = "";
		}
		
		// From each JSON spreadsheet I would build datasets of data
		// Build jsonT rule to parse JSON data
		rule = {
				"self":"<dataset  seriesName='"+seriesName+"'>{#}</dataset>",
				"self[*]":"<set value='{#.gsx$"+colName+".$t}'/>"
		
		};
		
		// apply rule to data entries to 
		// and store in XML building array
		strXML[2]+=jsonT(feedEntries, rule);
		
		// when all charts finishes rendering 
		// i.e. sheetsCount is equal to the length of sheets array
		// enable Export button
		if(sheetsCount==sheets.length)
		{
			renderChart();
		}
	}
	
	// render chart 
	function renderChart(){
		// initialize Multiseries Column 3D chart
		var chart = new FusionCharts("MSColumn3D.swf", "CoffeeChartId", "600", "350", "0", "0");
		// set chart data
		chart.setDataXML(strXML.join(''));
		// render chart
		chart.render("coffeeChartDiv");
	}
	
	//initialize page that initializes google JSON feed 
	function initpage()
	{
		// fetch data from Google Spreadsheet
		// Pass the Key of the published spreadsheet as first parameter
		// in second parameter pass the callback function
		getGoogleSpreadsheetData('p06JfhjnK8PwEWRkmlWiiQg', "parseSpreadsheet", "json-in-script", "spreadsheets" );
	}
	
</script>

Here's how the code works:

The program initiates by declaring a variable named ‘sheets’ for storing the array of spreadsheet definitions obtained from the specified Google Spreadsheet. It then declares the ‘sheetCount’ counter variable which keeps track of number of spreadsheets from which data has been received. This counter ensures that the chart renders, once all the data has been received.
Up next, the ‘chartConfigJSON’ object is declared to store the chart configuration settings.
The XML that would be gradually built, will be stored in an array named ‘strXML’. When XML building process is finally complete, the elements of the array would be joined to form the XML string.
Moving on, the initpage() function placed in the body of the HTML is called when the onload event occurs. This function in turn calls the getGoogleSpreadsheetData() which requests for the spreadsheet data in form of JSON feeds. The getGoogleSpreadsheetData() function requests for the spreadsheet data by sending the Google generated spreadsheet key, it also specifies the feed format and handles the feed once it has been received.

1	getGoogleSpreadsheetData("p06JfhjnK8PwEWRkmlWiiQg", "parseSpreadsheet", "json-in-script", "spreadsheets" )

Once this feed has been received, a callback function parseSpreadsheet () is fired. This function gets the spreadsheet name from jsonsheets.feed.title.$t and then it loops through each spreadsheet entry. Each spreadsheet entry provides feed links to all available feed types (spreadsheet/list/cell/gViz) in the link array. After acquiring a list of feed type, getGoogleSpreadsheetData() function requests for JSON feeds from each spreadsheet.
1

getGoogleSpreadsheetData( sheets[i].link[0].href, "parsespreadsheet", "json-in-script" );
The link[0].href element contains the URL for available feed types, which is passed to the function. After the feed has been received the callback function parsespreadsheet is called and JSON data is passed to it.
Once the feed for each spreadsheet is received, the sheetCount is increased by 1.
Feeds obtained from each spreadsheet would be regarded as a dataset for the chart. Hence, the feed title is taken as the series name for each dataset.

1	var seriesName = gjson.feed.title.$t;

The configuration settings of the chart are stored in strXML[0]. Please note that the function parsespreadsheet() would be called multiple times for as many times as the number of spreadsheets contained within the Google spreadsheet. The code contains a condition which prevents further repetition of this process.
Chart categories are defined using the first spreadsheet. The list of category name is built using jsonT.

rule = { 		
"self":"<categories>{#}</categories>", 
"self[*]":"<category label='{#.title.$t}'/>" 	
};

strXML[1] =  jsonT(feedEntries, rule);

Finally, jsonT is called into action to populating the dataset values.:


rule = {
"self":"<dataset  seriesName='"+seriesName+"'>{#}</dataset>",
"self[*]":"<set value='{#.gsx$"+colName+".$t}'/>"
};

strXML[2]+=jsonT(feedEntries, rule);

When this code is executed, the following chart would be generated in your page.

The multi-series chart created using data obtained from Google spreadsheet document

Now that we've been able to generate a chart, let's take it a step further and add the ability to export it as images or PDFs. This will be very useful for emailing to your colleagues.

PDF Export

The latest version of FusionCharts (v3.1) provides comprehensive range of export features. You can export the charts as PDFs, PNGs or JPEGs - both at client-side or save them on server as well.

In our example, since we're not using any server-side scripts, we'll stick to client side export. At client side, the export feature is implemented with the help of FusionCharts Client-side export components - collective name given to FusionChartsExportComponent.js and FCExporter.swf. FCExporter.swf is the client-side export engine that allows charts to be exported. The JavaScript file provides an interface between the chart and the FCExporter.swf.

This JavaScript class facilitates rendering of the FCExporter.swf, which is the engine for export and also serves as a graphical user interface. With the help of export API's you can easily customize the appearance of the GUI. The API's also enable you to control the functional aspects of the GUI. The following code illustrates the process:

1	<script type="text/javascript" src="FusionChartsExportComponent.js"></script>
2	<div id="componentContainer"></div>


	  function loadExportComponent()
	  {
	
		// initialize FusionCharts Export Component
		// put all settings in parameters
		exportComponent = new FusionChartsExportObject('exportComponentH', 'FCExporter.swf', 
			{	
				width: '250', 
				height: '250', 
				fullMode:1, 
				saveMode:'both', 
				defaultExportFormat:"pdf" ,
				showAllowedTypes:1,
				saveAllTitle:'Save All', 
				btnSaveAllTitle:'As Single File' , 
				defaultExportFileName:"SalesReport"

			},
			{ 
				exportFormat:"PDF", 
				exportHandler:"exportComponentH", 
				exportAtClient:1
			}
		);

		exportComponent.Render('componentContainer');
	}

The code (above) configures the export GUI so that, it displays a button which triggers the export process. Additionally, each chart would be listed in the GUI panel and the user would be presented with an option to export all the charts into a single PDF file. The GUI will also allow the user to change the default export format from PDF to jpeg or png.

In order to demonstrate the export process, I have added the code for configuring the export GUI, to the code that renders a chart based on data derived from Google spreadsheet document. However, I have made some modifications to the code, so that it will now render three single-series charts instead of a single multi-series chart. Each chart will displaying data pertaining to a particular spreadsheet.

Following is the combined code:


<html>
<head>
<script type="text/javascript" src="FusionCharts.js"></script>
<script type="text/javascript" src="JSON/jsont.js"></script>
<script type="text/javascript" src="FusionChartsExportComponent.js"></script>
<script type="text/javascript">

	// stores the array of spreadsheets present in the specified google spreadsheet
	var sheets;
	// stores the count of spreadsheets and reduce count when the sheet feed is received
	// I use this to add a counter to the chart id and chart container id
	// When sheetCount becomes equal to the length of number of sheet 
	// I enable export HTML button
	var sheetsCount = 0;
	
	// stores various chart configurations to be added in <chart> element of XML
	// you can modify these pas per your needs
	var chartConfigJSON={ 
		rotateLabels	: 1, 
		rotateValues	: 1, 
		numberPrefix	: '£', 
		exportEnabled	: 1, 
		exporthandler	:'exportComponentH', 
		exportAtClient	: 1 ,
		placeValuesInside : 1 
	};
	
	// Fetching Google Spreadsheet data
	// pass your spreadsheet key as parameter or the full url of the feed
	// callback		: your callback function name as string
	// feedtype 	: can be json/json-in-script
	// feedformat : list/cells/spreadsheets
	function getGoogleSpreadsheetData(key, callback, feedtype,feedformat ){
		
		// default values
		feedtype = feedtype || "json-in-script";
		feedformat  = feedformat || "list" ;
		callback = callback || "gssdatafeedcallback";
		
		// build feed url
		var href;
		if( key.search("http")<0)
			href = 'http://spreadsheets.google.com/feeds/'+ feedformat + '/' + key + '/public/values';
		else
			href = key;
		
  		// create script element
		var script = document.createElement('script');
		// add spreadsheet feed as the source of the script
		script.setAttribute('src', href+'?alt='+feedtype+'&callback='+callback);
	  	script.setAttribute('id', 'jsonScript');
	  	script.setAttribute('type', 'text/javascript');
		// add script to fetch Google Spreadsheet feed
	  	document.documentElement.firstChild.appendChild(script);
	}
	
	// Callback function to parse spreadsheet data and 
	// fetch data from each spreadsheet present in the spreadsheet
	function parseSpreadsheet(jsonsheets){
		// get chart caption as the name of the spreadsheet
		chartConfigJSON.subCaption = jsonsheets.feed.title.$t;
		// get the array of all spreadsheets
		sheets =jsonsheets.feed.entry;
	
		// fetch data from each spreadsheet
		for(var i=0;i<sheets.length;i++)
			getGoogleSpreadsheetData(sheets[i].link[0].href, "parsespreadsheet", "json-in-script" );		
	}
	
	// This function is the actual chart data generator
	// It receives each spreadsheet JSON data feed
	// parses using jsonT into required XML
	function parsespreadsheet(gjson)
	{
		// Since one feed is received increase sheet count by 1
		sheetsCount++;

		// will store JSON parsing rule as per jsonT library
		var rule;
		
		// get array of spreadsheet data
		var strXML=Array(3);
		
		// get chart caption from spreadsheet's name
		chartConfigJSON.caption =gjson.feed.title.$t;
		
		//stores the data entries separately 
		var feedEntries = gjson.feed.entry;
	
		// set xAxisName (hardcode it as Google List Data 
		// API does not provide this name as yet in JSON) 
		chartConfigJSON.xAxisName= "Products";

		var colName;
		if( feedEntries[0]){
			// get the column name as per google spreadsheet's column name	
			// Set the column name as the yAxisName
			colName =feedEntries[0].content.$t.match(/.+(?=\:)/);
			chartConfigJSON.yAxisName = colName;  
		}

		// store chart element in XML building array
		strXML[0]="<chart>";
 
 		// iterate through chartConfigJSON and build chart attributes
		for(var i in chartConfigJSON) {
			strXML[0]= strXML[0].replace(/(<chart[^>]*)(>)/,"$1 "+ i+"='"+chartConfigJSON[i] +"' $2");
		}
		
		strXML[2] ="</chart>";

		// Build rule to parse JSON feed and add chart values in <set> element of XML
		rule = {
				"self":"{#}",
				"self[*]":"<set value='{#.gsx$"+colName+".$t}' label='{#.title.$t}'/>"
		};

		// apply the rule to JSON feed
		strXML[1]+=jsonT(feedEntries, rule);
		
		// pass the XML to chart rendering function
		renderChart(strXML.join(''));
	}
	
	// this function renders chart
	function renderChart(strXML){
	
		// create a new span
		var div = document.createElement('span');
		div.setAttribute('id','chartDivId'+sheetsCount);
		document.documentElement.lastChild.appendChild(div);
		
		// render single series column 3D chart		
		var  chart = new FusionCharts("Column3D.swf", "CoffeeChartId"+sheetsCount, "300", "300", "0", "1");
		
		// set chart data XML
		chart.setDataXML(strXML);
		
		// render chart
		chart.render('chartDivId'+sheetsCount);
	}
	
	// This function is called automatically form chart when 
	// the chart completes rendering
	function FC_Rendered(DOMId){
		
		// when all charts finishes rendering 
		// i.e. sheetsCount is equal to the length of sheets array
		// enable Export button
		if (sheetsCount==sheets.length) { 
			document.getElementById("exportButtonPDF").disabled=false; 
		}
	}

	function loadExportComponent()
	{
	
		// initialize FusionCharts Export Component
		// put all settings in parameters
		exportComponent = new FusionChartsExportObject('exportComponentH', 'FCExporter.swf', 
			{	
				width: '250', 
				height: '250', 
				fullMode:1, 
				saveMode:'both', 
				defaultExportFormat:"pdf" ,
				showAllowedTypes:1,
				saveAllTitle:'Save All', 
				btnSaveAllTitle:'As Single File' , 
				defaultExportFileName:"SalesReport"
			},
			{ 
				
				exportFormat:"PDF", 
				exportHandler:"exportComponentH", 
				exportAtClient:1
			}
		);

		exportComponent.Render('componentContainer');
	}

	// call the export all event of FusionChaRTS Export Component
	// This function finds all FusionCharts present in the page and 
	// exports all to the export component
	function exportCharts(){
		exportComponent.BeginExportAll();
	}

	function pageinit()
	{
		// initialize export button as disabled
		document.getElementById("exportButtonPDF").disabled=true;

		// fetch Google Spreadsheet data
		getGoogleSpreadsheetData('p06JfhjnK8PwEWRkmlWiiQg', "parseSpreadsheet", "json-in-script", "spreadsheets" );
		
		// load FusionCharts Export component
		loadExportComponent();	
	}
	
</script>
</head>

<body onload="pageinit();" >
       <input type="button" class="button" value="Export as PDF" onclick="exportCharts()" id="exportButtonPDF" disabled="disabled" />
      <div id="componentContainer"></div>
</body>
</html>

Following is the depiction of the export process as seen from the client side:

The charts render in the browser.

Charts are converted to bitmap when 'Export As PDF' button is clicked.

The export GUI displays a list of charts to be exported.

The charts are saved into a single PDF file when the user clicks the 'As Single PDF' button.

And with that, we end this article. There are a lot more features offered by FusionCharts that can potentially be put into use. Creating charts from data stored in Google spreadsheets is just one example of innovations which are possible with FusionCharts. Thanks for reading!