{"id":82,"date":"2023-07-21T17:11:01","date_gmt":"2023-07-21T09:11:01","guid":{"rendered":"https:\/\/stackproperty.sg\/blog\/?p=82"},"modified":"2023-10-02T09:01:10","modified_gmt":"2023-10-02T01:01:10","slug":"data-visualisations","status":"publish","type":"post","link":"https:\/\/stackproperty.sg\/blog\/data-visualisations\/","title":{"rendered":"Free Data Visualisation On Your Website"},"content":{"rendered":"\n<p>Hello website owners, we are making our sales and pricing data visualisations for private property projects available to relevant websites! This means that if you have a website talking about Singapore property projects, you can now easily embed sales and pricing widgets to make your website even more informative and engaging! And in case you missed the main header of this post, this is FREE!<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_55 counter-hierarchy ez-toc-counter ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-69db6d776f03e\" ><span class=\"\"><span style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-69db6d776f03e\"  type=\"checkbox\" id=\"item-69db6d776f03e\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/stackproperty.sg\/blog\/data-visualisations\/#What_information_will_the_widget_show\" title=\"What information will the widget show?\">What information will the widget show?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/stackproperty.sg\/blog\/data-visualisations\/#What_part_of_the_widget_can_be_configured\" title=\"What part of the widget can be configured?\">What part of the widget can be configured?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/stackproperty.sg\/blog\/data-visualisations\/#Whitelisting_your_website\" title=\"Whitelisting your website\">Whitelisting your website<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/stackproperty.sg\/blog\/data-visualisations\/#How_to_configure_the_widget\" title=\"How to configure the widget\">How to configure the widget<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/stackproperty.sg\/blog\/data-visualisations\/#Other_website_widgets\" title=\"Other website widgets\">Other website widgets<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_information_will_the_widget_show\"><\/span>What information will the widget show?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Last 3 years running (default, but can be configured) data for the project, always up-to-date and hands-free<\/li>\n\n\n\n<li>Sales trend + summary breakdown for &#8220;New Sale&#8221;, &#8220;Sub Sale&#8221; and &#8220;Resale&#8221;<\/li>\n\n\n\n<li>Average price and PSF trend<\/li>\n\n\n\n<li>Sales transactions records from URA<\/li>\n\n\n\n<li>Comparison of sales and PSF price trend between the selected project and <strong>4 other nearest projects (within 2km)<\/strong><\/li>\n\n\n\n<li>Comparison of rental and PSF price trend between the selected project and the <strong>same<\/strong> <strong>4 nearest projects<\/strong> mentioned above<\/li>\n\n\n\n<li>Summary table of the sales and rental data comparisons<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>Here&#8217;s an example of how it will look like for the project <a href=\"https:\/\/stackproperty.sg\/private\/resale\/project\/cyan\" target=\"_blank\" rel=\"noreferrer noopener\">Cyan @ Bukit Timah<\/a>:<\/p>\n\n\n\n<script src=\"https:\/\/stackproperty.sg\/js\/iframeResizer.min.js\"><\/script>\n<iframe id=\"stackproperty\" src=\"https:\/\/stackproperty.sg\/widgets\/private-project?site=stackproperty.sg&#038;project=Cyan&#038;cc1=786028&#038;cc2=48446e&#038;cc3=a57c1b&#038;cc4=5e569b&#038;cc5=d2980d&#038;cc6=776bcd&#038;cc7=ffb400\" style=\"width:1px;min-width:100%;border:none;\"><\/iframe>\n<script>\n  var stkp = document.querySelector('#stackproperty');\n  stkp.onload = function() { iFrameResize({log:false}, '#stackproperty'); };\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_part_of_the_widget_can_be_configured\"><\/span>What part of the widget can be configured?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The following items can be configured to suit your website.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Project name for which you want the widget to show data for<\/li>\n\n\n\n<li>Colour scheme (of 7 colours) for the bar and line charts<\/li>\n\n\n\n<li>Site domain (this is to identify the websites that have whitelisted with us to display the widget. More on this later)<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Whitelisting_your_website\"><\/span>Whitelisting your website<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Note that you will need to whitelist your site before you will be able to use the widget. Why should you whitelist your site? This is to give us an idea of which sites are using our widget. We also want to be sure that the widgets are only used on relevant websites. To whitelist your site, please reach out to us at <a rel=\"noreferrer noopener\" href=\"https:\/\/stackproperty.sg\/contact\" target=\"_blank\">https:\/\/stackproperty.sg\/contact<\/a>.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_configure_the_widget\"><\/span>How to configure the widget<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The embedding of the widget is done via <strong>iframe<\/strong> and some basic <strong>Javascript<\/strong>. Here&#8217;s a quick code sample:<\/p>\n\n\n\n<pre class=\"wp-block-code\">&lt;script src=\"https:\/\/stackproperty.sg\/js\/iframeResizer.min.js\"&gt;&lt;\/script&gt;\n&lt;iframe id=\"stackproperty\" src=\"https:\/\/stackproperty.sg\/widgets\/private-project?site=stackproperty.sg&amp;project=Cyan&amp;cc1=786028&amp;cc2=48446e&amp;cc3=a57c1b&amp;cc4=5e569b&amp;cc5=d2980d&amp;cc6=776bcd&amp;cc7=ffb400\" style=\"width:1px;min-width:100%;border:none;\"&gt;&lt;\/iframe&gt;\n&lt;script&gt;\n  var stkp = document.querySelector('#stackproperty');\n  stkp.onload = function() { iFrameResize({log:false}, '#stackproperty'); };\n&lt;\/script&gt;<\/pre>\n\n\n\n<p>The configuration is done by making changes to the iframe <code>src<\/code> URL. In line 2 of the code above, pay attention to the part after the question mark (?) as this carries the configurable options of the widget. Each configuration option is denoted by a <strong>key=value<\/strong> pair. For instance, <strong>site=stackproperty.sg<\/strong>. In this case, <strong>&#8220;site&#8221;<\/strong> is the key and <strong>&#8220;stackproperty.sg&#8221;<\/strong> is the value assigned to it.<\/p>\n\n\n\n<p>Now, let&#8217;s take a look at all the available configurable options:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Key<\/strong><\/td><td><strong>Required<\/strong>?<\/td><td><strong>Value<\/strong><\/td><\/tr><tr><td>site<\/td><td>Yes. You must <a href=\"https:\/\/stackproperty.sg\/contact\" target=\"_blank\" rel=\"noreferrer noopener\">whitelist your site<\/a> first.<\/td><td>The site domain without the &#8220;https:\/\/&#8221; part.<br>eg; stackproperty.sg<\/td><\/tr><tr><td>project<\/td><td>Yes.<\/td><td>This is the name of the private property project that you wish to show in the widget. The name should be provided as per our records. See the <a rel=\"noreferrer noopener\" href=\"https:\/\/stackproperty.sg\/private\/resale\/projects\" data-type=\"URL\" data-id=\"https:\/\/stackproperty.sg\/private\/resale\/projects\" target=\"_blank\">full list of property projects<\/a> per our records.<\/td><\/tr><tr><td>dr<\/td><td>Optional<\/td><td>This means date range for which the data should be based on. Defaults to &#8220;3y&#8221; (last running 3 years) if not set. Possible values are:<br>&#8211; 3m (means last running 3 months)<br>&#8211; 6m (means last running 6 months)<br>&#8211; 1y (means last running 1 year)<br>&#8211; 3y (means last running 3 years)<br>&#8211; 5y (means last running 5 years)<\/td><\/tr><tr><td>cc1<\/td><td>Optional<\/td><td>You can set up a scheme of 7 colours to suit the look and feel of your website. The bar and line charts will utilise the colours in order. Specify the desired hex colour code, without the &#8220;#&#8221;.<br><br>eg; 336699<br><br>This represents custom colour #1. If not set, cc1 defaults to #786028<\/td><\/tr><tr><td>cc2<\/td><td>Optional<\/td><td>This represents custom colour #2. If not set, cc2 defaults to #48446e<\/td><\/tr><tr><td>cc3<\/td><td>Optional<\/td><td>This represents custom colour #3. If not set, cc3 defaults to #a57c1b<\/td><\/tr><tr><td>cc4<\/td><td>Optional<\/td><td>This represents custom colour #4. If not set, cc4 defaults to #5e569b<\/td><\/tr><tr><td>cc5<\/td><td>Optional<\/td><td>This represents custom colour #5. If not set, cc5 defaults to #d2980d<\/td><\/tr><tr><td>cc6<\/td><td>Optional<\/td><td>This represents custom colour #6 If not set, cc6 defaults to #776bcd<\/td><\/tr><tr><td>cc7<\/td><td>Optional<\/td><td>This represents custom colour #7. If not set, cc7 defaults to #ffb400<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>That&#8217;s it! If you&#8217;ll like to whitelist your site or need some help in configuring this widget for your website, please <a rel=\"noreferrer noopener\" href=\"https:\/\/stackproperty.sg\/contact\" target=\"_blank\">reach out to us<\/a>!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Other_website_widgets\"><\/span>Other website widgets<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In case you aren&#8217;t aware, we have 70+ other self-configurable, embeddable web widgets that you can use on your website. Check them out at <a href=\"https:\/\/stackproperty.sg\/widgets\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/stackproperty.sg\/widgets<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We are making our sales and pricing data visualisations for private property projects available to relevant websites! This means that if you have a website talking about Singapore property projects, you can now easily embed sales and pricing widgets to make your website even more informative and engaging!<\/p>\n","protected":false},"author":1,"featured_media":138,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-82","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-tos"],"_links":{"self":[{"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/posts\/82","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":5,"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/posts\/82\/revisions"}],"predecessor-version":[{"id":123,"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/posts\/82\/revisions\/123"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/media\/138"}],"wp:attachment":[{"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/media?parent=82"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/categories?post=82"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stackproperty.sg\/blog\/wp-json\/wp\/v2\/tags?post=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}