{"id":17973,"date":"2021-05-28T05:27:45","date_gmt":"2021-05-27T23:57:45","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=17973"},"modified":"2026-01-20T14:40:46","modified_gmt":"2026-01-20T09:10:46","slug":"easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/","title":{"rendered":"JavaScript: Build Investment &amp; Venture Financing Dashboard 2026"},"content":{"rendered":"Keeping track of investment accounts is not an easy task. That\u2019s why investors around the world prefer to use the investment dashboard. It provides them with a quick overview of the estimated return rate. The Venture Capital firms also use the dashboard that is specifically built for their businesses. It enables them to oversee and manage all of their investments conveniently. You can help investors and venture capital firms by creating powerful investment and venture financing dashboards using FusionCharts. In this post, you will find all the details about building a <a href=\"https:\/\/www.fusioncharts.com\/dashboards\">financial dashboard<\/a>.\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><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:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#What_is_FusionCharts\" title=\"What is FusionCharts?\">What is FusionCharts?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#How_to_Build_Powerful_Investment_Financing_Dashboards_with_FusionCharts_and_Angular\" title=\"How to Build Powerful Investment Financing Dashboards with FusionCharts and Angular\">How to Build Powerful Investment Financing Dashboards with FusionCharts and Angular<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#Source_Code\" title=\"Source Code\">Source Code<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#How_to_Build_Powerful_Venture_Financing_Dashboards_with_FusionCharts_and_React\" title=\"How to Build Powerful Venture Financing Dashboards with FusionCharts and React\">How to Build Powerful Venture Financing Dashboards with FusionCharts and React<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#Source_Code-2\" title=\"Source Code\">Source Code<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#How_Can_I_Build_Beautiful_Investment_Dashboards_with_JavaScript\" title=\"How Can I Build Beautiful Investment Dashboards with JavaScript?\">How Can I Build Beautiful Investment Dashboards with JavaScript?<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_is_FusionCharts\"><\/span><strong>What is FusionCharts?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nFusionCharts is a JavaScript library for generating clean and dynamic charts, gauges, or maps in web applications. It supports over 100 charts and 2000 maps. So, you have the flexibility of visualizing the data in any way you like.\r\n<h2><span class=\"ez-toc-section\" id=\"How_to_Build_Powerful_Investment_Financing_Dashboards_with_FusionCharts_and_Angular\"><\/span><strong>How to Build Powerful Investment Financing Dashboards with FusionCharts and Angular<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nAngular is a component-based framework for building mobile and web applications. By using it with FusionCharts, you can build powerful investment financing dashboards easily. Take a look at this example:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49922\" src=\"https:\/\/www.sencha.com\/wp-content\/uploads\/2021\/05\/How-to-Build-Powerful-Investment-Financing-Dasboards-with-FusionCharts-and-Angular.png\" alt=\"How To Build Powerful Investment Financing Dasboards With FusionCharts And Angular\" width=\"1920\" height=\"1960\" \/>\r\n\r\nTo create the investment financing dashboard shown above, you have to follow these steps:\r\n\r\n1. First, you have to create the components for your dashboard. Navigate to <strong>src &gt; app<\/strong> folder. Create a new file, called <strong>app.component.ts<\/strong>. Then add these codes:\r\n<pre><code>\r\nimport { Component, AfterViewInit } from '@angular\/core';\r\nimport { Injectable } from '@angular\/core';\r\nimport { Renderer } from '@angular\/core';\r\nimport { environment } from '..\/environments\/environment';\r\nimport * as FusionCharts from 'fusioncharts';\r\nimport { PieComponent } from '..\/..\/VisualizationTemplate\/PieChart';\r\nimport { LineComponent } from '..\/..\/VisualizationTemplate\/LineChart';\r\nimport { ColumnComponent } from '..\/..\/VisualizationTemplate\/ColumnChart';\r\nimport { WorldMapComponent } from '..\/..\/VisualizationTemplate\/WorldMap';\r\nimport { ScatterChartComponent } from '..\/..\/VisualizationTemplate\/ScatterChart';\r\nimport { UiComponent } from '..\/..\/VisualizationTemplate\/UiComponent';\r\nimport { KpiComponent } from '..\/..\/VisualizationTemplate\/KPI';\r\nimport { HttpClient } from '@angular\/common\/http';\r\nimport { CommonUtils } from '..\/..\/Data\/CommonUtils';\r\n@Component({\r\n\u00a0 selector: 'app-root',\r\n\u00a0 templateUrl: '.\/app.component.html',\r\n\u00a0 styleUrls: ['.\/app.component.css']\r\n})\r\n@Injectable()\r\nexport class DataStoreComponent {\r\n\u00a0 title = 'INVESTMENT PORTFOLIO';\r\n\u00a0 lineChartHeader = 'Yearly Total Investment';\r\n\u00a0 pieChartHeader = 'Total Investment by Asstets Class';\r\n\u00a0 columnChartHeader = 'Total Investment by Rating Group';\r\n\u00a0 scatterChartHeader = 'Market Value Vs Book Value by Rating Group';\r\n\u00a0 mapHeader = 'Total Investment by Country';\r\n\u00a0 rorClass: string;\r\n\u00a0 totalInvestMent: string;\r\n\u00a0 investmentCount: number;\r\n\u00a0 rateOfReturn: string;\r\n\u00a0 countries: string[];\r\n\u00a0 allRatinggroups: string[];\r\n\u00a0 allAssetclass: string[];\r\n\u00a0 linechartdata = {};\r\n\u00a0 columnchartdata = {};\r\n\u00a0 piechartdata = {};\r\n\u00a0 scatterchartdata = {};\r\n\u00a0 worldmapdata = {};\r\n\u00a0 selectedCountry: string;\r\n\u00a0 selectedClass: string;\r\n\u00a0 selectedRatingGroup: string;\r\n\u00a0 baseUrl = environment.baseUrl;\r\n\u00a0 constructor(private httpClient: HttpClient, private renderer: Renderer) {\r\n\u00a0\u00a0\u00a0 this.selectedCountry = 'Countries(All)';\r\n\u00a0\u00a0\u00a0 this.selectedClass = 'Assets Class(All)';\r\n\u00a0\u00a0\u00a0 this.selectedRatingGroup = 'Rating Groups(All)';\r\n\u00a0\u00a0\u00a0 this.totalInvestMent = KpiComponent.TotalInvestment('', '', '');\r\n\u00a0\u00a0\u00a0 this.rateOfReturn = KpiComponent.RateOfReturn('', '', '');\r\n\u00a0\u00a0\u00a0 if (CommonUtils.NumberFormat(this.rateOfReturn) === 0) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ this.rorClass = 'fc-kpi-arrow-contaier fas fa-long-arrow-alt-neutral';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.rateOfReturn = this.rateOfReturn.replace('-', '');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.rateOfReturn = this.rateOfReturn.replace('+', '');\r\n\u00a0\u00a0\u00a0 }\/* else if (this.rateOfReturn.substring(0, 1) === '-') {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.rorClass = 'fc-kpi-arrow-contaier fas fa-long-arrow-alt-down';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.rateOfReturn = this.rateOfReturn.replace('-', '');\r\n\u00a0\u00a0\u00a0 } else {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.rorClass = 'fc-kpi-arrow-contaier fas fa-long-arrow-alt-up';\r\n\u00a0\u00a0\u00a0 } *\/\r\n\u00a0\u00a0\u00a0 this.investmentCount = KpiComponent.NumberOfInvestment('', '', '');\r\n\u00a0\u00a0\u00a0 this.countries = UiComponent.GetAllCountries();\r\n\u00a0\u00a0\u00a0 this.allRatinggroups = UiComponent.GetAllGroup();\r\n\u00a0\u00a0\u00a0 this.allAssetclass = UiComponent.GetAllClass();\r\n\u00a0\u00a0\u00a0 this.piechartdata = PieComponent.ChartJson('', '', '');\r\n\u00a0\u00a0\u00a0 this.linechartdata = LineComponent.ChartJson('', '', '');\r\n\u00a0\u00a0\u00a0 this.columnchartdata = ColumnComponent.ChartJson('', '', '');\r\n\u00a0\u00a0\u00a0 this.scatterchartdata = ScatterChartComponent.ChartJson('', '', '');\r\n\u00a0\u00a0\u00a0 this.worldmapdata = WorldMapComponent.ChartJson('', '', '');\r\n\u00a0 }\r\n\u00a0 \/\/ tslint:disable-next-line:use-lifecycle-interface\r\n\u00a0 ngAfterViewInit(): void {\r\n\u00a0\u00a0\u00a0 this.InitializeSelectedClass();\r\n\u00a0 }\r\n\u00a0 onApplyFilter(): void {\r\n\u00a0\u00a0\u00a0 this.totalInvestMent = KpiComponent.TotalInvestment(this.selectedCountry, this.selectedClass, this.selectedRatingGroup);\r\n\u00a0\u00a0\u00a0 this.investmentCount = KpiComponent.NumberOfInvestment(this.selectedCountry, this.selectedClass, this.selectedRatingGroup);\r\n\u00a0\u00a0\u00a0 this.rateOfReturn = KpiComponent.RateOfReturn(this.selectedCountry, this.selectedClass, this.selectedRatingGroup);\r\n\u00a0\u00a0\u00a0 this.piechartdata = PieComponent.ChartJson(this.selectedCountry, this.selectedClass, this.selectedRatingGroup);\r\n\u00a0\u00a0\u00a0 this.linechartdata = LineComponent.ChartJson(this.selectedCountry, this.selectedClass, this.selectedRatingGroup);\r\n\u00a0\u00a0\u00a0 this.columnchartdata = ColumnComponent.ChartJson(this.selectedCountry, this.selectedClass, this.selectedRatingGroup);\r\n\u00a0\u00a0\u00a0 this.worldmapdata = WorldMapComponent.ChartJson(this.selectedCountry, this.selectedClass, this.selectedRatingGroup);\r\n\u00a0\u00a0\u00a0 this.scatterchartdata = ScatterChartComponent.ChartJson(this.selectedCountry, this.selectedClass, this.selectedRatingGroup);\r\n\u00a0\u00a0\u00a0 if (CommonUtils.NumberFormat(this.rateOfReturn) === 0) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ this.rorClass = 'fc-kpi-arrow-contaier fas fa-long-arrow-alt-neutral';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.rateOfReturn = this.rateOfReturn.replace('-', '');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.rateOfReturn = this.rateOfReturn.replace('+', '');\r\n\u00a0\u00a0\u00a0 }\/* else if (this.rateOfReturn.substring(0, 1) === '-') {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.rorClass = 'fc-kpi-arrow-contaier fas fa-long-arrow-alt-down';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.rateOfReturn = this.rateOfReturn.replace('-', '');\r\n\u00a0\u00a0\u00a0 } else {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.rorClass = 'fc-kpi-arrow-contaier fas fa-long-arrow-alt-up';\r\n\u00a0\u00a0\u00a0 } *\/\r\n\u00a0 }\r\n\u00a0 onResetFilter(): void {\r\n\u00a0\u00a0\u00a0 this.totalInvestMent = KpiComponent.TotalInvestment('', '', '');\r\n\u00a0\u00a0\u00a0 this.investmentCount = KpiComponent.NumberOfInvestment('', '', '');\r\n\u00a0\u00a0\u00a0 this.rateOfReturn = KpiComponent.RateOfReturn('', '', '');\r\n\u00a0\u00a0\u00a0 this.piechartdata = PieComponent.ChartJson('', '', '');\r\n\u00a0\u00a0\u00a0 this.linechartdata = LineComponent.ChartJson('', '', '');\r\n\u00a0\u00a0\u00a0 this.columnchartdata = ColumnComponent.ChartJson('', '', '');\r\n\u00a0\u00a0\u00a0 this.worldmapdata = WorldMapComponent.ChartJson('', '', '');\r\n\u00a0\u00a0\u00a0 this.scatterchartdata = ScatterChartComponent.ChartJson('', '', '');\r\n\u00a0\u00a0\u00a0 this.selectedCountry = 'Countries(All)';\r\n\u00a0\u00a0\u00a0 this.selectedClass = 'Assets Class(All)';\r\n\u00a0\u00a0\u00a0 this.selectedRatingGroup = 'Rating Groups(All)';\r\n\u00a0\u00a0\u00a0 if (CommonUtils.NumberFormat(this.rateOfReturn) === 0) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ this.rorClass = 'fc-kpi-arrow-contaier fas fa-long-arrow-alt-neutral';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.rateOfReturn = this.rateOfReturn.replace('-', '');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.rateOfReturn = this.rateOfReturn.replace('+', '');\r\n\u00a0\u00a0\u00a0 }\/* else if (this.rateOfReturn.substring(0, 1) === '-') {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.rorClass = 'fc-kpi-arrow-contaier fas fa-long-arrow-alt-down';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.rateOfReturn = this.rateOfReturn.replace('-', '');\r\n\u00a0\u00a0\u00a0 } else {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.rorClass = 'fc-kpi-arrow-contaier fas fa-long-arrow-alt-up';\r\n\u00a0\u00a0\u00a0 } *\/\r\n\u00a0 }\r\n\u00a0 PieChange(chart) {\r\n\u00a0\u00a0\u00a0 if (chart === 'pie2d') {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const ctlid = 'toggle-pie';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const addClass = 'fc-pie-selected-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const removeClass = 'fc-pie-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const addClassToggle = 'fc-column-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const removeClassToggle = 'fc-column-selected-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.AddSelectedClass(ctlid, event.target, addClass, removeClass, addClassToggle, removeClassToggle);\r\n\u00a0\u00a0\u00a0 } else {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const ctlid = 'pie';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const addClass = 'fc-column-selected-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const removeClass = 'fc-column-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const addClassToggle = 'fc-pie-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const removeClassToggle = 'fc-pie-selected-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.AddSelectedClass(ctlid, event.target, addClass, removeClass, addClassToggle, removeClassToggle);\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 PieComponent.ChangeType(chart);\r\n\u00a0 }\r\n\u00a0 PieInitialized($event) {\r\n\u00a0\u00a0\u00a0 PieComponent.Initialized($event);\r\n\u00a0 }\r\n\u00a0 InitializeSelectedClass() {\r\n\u00a0\u00a0\u00a0 const controls: string[] = ['line', 'column', 'pie', 'scatter'];\r\n\u00a0\u00a0\u00a0 \/\/ tslint:disable-next-line:prefer-for-of\r\n\u00a0\u00a0\u00a0 for (let i = 0; i &lt; controls.length; i++) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const ctl = document.getElementById(controls[i]);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.renderer.setElementClass(ctl, 'fc-' + controls[i] + '-selected-icon', true);\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0 }\r\n\u00a0 AddSelectedClass(ctrl, target, addClass, removeClass, addClassToToggle, removeClassToToggle) {\r\n\u00a0\u00a0\u00a0 const ctl = document.getElementById(ctrl);\r\n\u00a0\u00a0\u00a0 this.renderer.setElementClass(event.target, addClass, true);\r\n\u00a0\u00a0\u00a0 this.renderer.setElementClass(event.target, removeClass, false);\r\n\u00a0\u00a0\u00a0 this.renderer.setElementClass(ctl, addClassToToggle, true);\r\n\u00a0\u00a0\u00a0 this.renderer.setElementClass(ctl, removeClassToToggle, false);\r\n\u00a0 }\r\n\u00a0 LineChange(chart) {\r\n\u00a0\u00a0\u00a0 if (chart === 'line') {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const ctlid = 'toggle-line';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const addClass = 'fc-line-selected-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const removeClass = 'fc-line-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const addClassToggle = 'fc-column-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const removeClassToggle = 'fc-column-selected-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.AddSelectedClass(ctlid, event.target, addClass, removeClass, addClassToggle, removeClassToggle);\r\n\u00a0\u00a0\u00a0 } else {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const ctlid = 'line';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const addClass = 'fc-column-selected-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const removeClass = 'fc-column-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const addClassToggle = 'fc-line-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const removeClassToggle = 'fc-line-selected-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.AddSelectedClass(ctlid, event.target, addClass, removeClass, addClassToggle, removeClassToggle);\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 LineComponent.ChangeType(chart);\r\n\u00a0 }\r\n\u00a0 LineInitialized($event) {\r\n\u00a0\u00a0\u00a0 LineComponent.Initialized($event);\r\n\u00a0 }\r\n\u00a0 ColumnChange(chart) {\r\n\u00a0\u00a0\u00a0 if (chart === 'column2d') {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const ctlid = 'toggle-column';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const addClass = 'fc-column-selected-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const removeClass = 'fc-column-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const addClassToggle = 'fc-pie-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const removeClassToggle = 'fc-pie-selected-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.AddSelectedClass(ctlid, event.target, addClass, removeClass, addClassToggle, removeClassToggle);\r\n\u00a0\u00a0\u00a0 } else {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const ctlid = 'column';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const addClass = 'fc-pie-selected-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const removeClass = 'fc-pie-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const addClassToggle = 'fc-column-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const removeClassToggle = 'fc-column-selected-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.AddSelectedClass(ctlid, event.target, addClass, removeClass, addClassToggle, removeClassToggle);\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 ColumnComponent.ChangeType(chart);\r\n\u00a0 }\r\n\u00a0 ColumnInitialized($event) {\r\n\u00a0\u00a0\u00a0 ColumnComponent.Initialized($event);\r\n\u00a0 }\r\n\u00a0 ScatterChange(chart) {\r\n\u00a0\u00a0\u00a0 if (chart === 'scatter') {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.scatterChartHeader = 'Market Value Vs Book Value by Rating Group';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const ctlid = 'bubble';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const addClass = 'fc-scatter-selected-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const removeClass = 'fc-scatter-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const addClassToggle = 'fc-bubble-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const removeClassToggle = 'fc-bubble-selected-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.AddSelectedClass(ctlid, event.target, addClass, removeClass, addClassToggle, removeClassToggle);\r\n\u00a0\u00a0\u00a0 } else {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.scatterChartHeader = 'Market Value,Book Value and Revenue by Rating Group';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const ctlid = 'scatter';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const addClass = 'fc-bubble-selected-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const removeClass = 'fc-bubble-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const addClassToggle = 'fc-scatter-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 const removeClassToggle = 'fc-scatter-selected-icon';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 this.AddSelectedClass(ctlid, event.target, addClass, removeClass, addClassToggle, removeClassToggle);\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 this.scatterchartdata = ScatterChartComponent.ChangeType(chart, this.selectedCountry, this.selectedClass, this.selectedRatingGroup);\r\n\u00a0 }\r\n\u00a0 ScatterInitialized($event) {\r\n\u00a0\u00a0\u00a0 ScatterChartComponent.Initialized($event);\r\n\u00a0 }\r\n}\r\n<\/code><\/pre>\r\nHere, you are defining methods for various functionalities, like displaying pie charts and line charts.\r\n\r\n2. Next, you have to create component specs. Create <strong>app.component.spec.ts<\/strong> file. Insert these lines:\r\n<pre><code>\r\nimport { TestBed, async } from '@angular\/core\/testing';\r\nimport { RouterTestingModule } from '@angular\/router\/testing';\r\nimport { DataStoreComponent } from '.\/app.component';\r\ndescribe('AppComponent', () =&gt; {\r\n\u00a0 beforeEach(async(() =&gt; {\r\n\u00a0\u00a0\u00a0 TestBed.configureTestingModule({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 imports: [\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 RouterTestingModule\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 ],\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 declarations: [\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 DataStoreComponent\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 ],\r\n\u00a0\u00a0\u00a0 }).compileComponents();\r\n\u00a0 }));\r\n\u00a0 it('should create the app', () =&gt; {\r\n\u00a0\u00a0\u00a0 const fixture = TestBed.createComponent(DataStoreComponent);\r\n\u00a0\u00a0\u00a0 const app = fixture.debugElement.componentInstance;\r\n\u00a0\u00a0\u00a0 expect(app).toBeTruthy();\r\n\u00a0 });\r\n\u00a0 it(`should have as title 'InvestmentPortfolio'`, () =&gt; {\r\n\u00a0\u00a0\u00a0 const fixture = TestBed.createComponent(DataStoreComponent);\r\n\u00a0\u00a0\u00a0 const app = fixture.debugElement.componentInstance;\r\n\u00a0\u00a0\u00a0 expect(app.title).toEqual('InvestmentPortfolio');\r\n\u00a0 });\r\n\u00a0 it('should render title in a h1 tag', () =&gt; {\r\n\u00a0\u00a0\u00a0 const fixture = TestBed.createComponent(DataStoreComponent);\r\n\u00a0\u00a0\u00a0 fixture.detectChanges();\r\n\u00a0\u00a0\u00a0 const compiled = fixture.debugElement.nativeElement;\r\n\u00a0\u00a0\u00a0 expect(compiled.querySelector('h1').textContent).toContain('Welcome to InvestmentPortfolio!');\r\n\u00a0 });\r\n});\r\n<\/code><\/pre>\r\n3. Now, you have to import the required modules for your dashboard. Create <strong>app.module.ts<\/strong> file and insert these codes:\r\n<pre><code>\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule, enableProdMode} from '@angular\/core';\r\nimport { FormsModule } from '@angular\/forms';\r\nimport { AppRoutingModule } from '.\/app-routing.module';\r\nimport { DataStoreComponent } from '.\/app.component';\r\nimport { FusionChartsModule } from 'angular-fusioncharts';\r\nimport * as FusionCharts from 'fusioncharts';\r\nimport * as Charts from 'fusioncharts\/fusioncharts.charts';\r\nimport * as FusionMaps from 'fusioncharts\/fusioncharts.maps';\r\nimport * as World from 'fusioncharts\/maps\/fusioncharts.world';\r\nimport * as FusionTheme from 'fusioncharts\/themes\/fusioncharts.theme.fusion';\r\nimport * as Countries from 'fusionmaps\/maps\/fusioncharts.worldwithcountries';\r\nimport {HttpClientModule} from '@angular\/common\/http';\r\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme, World, FusionMaps, Countries);\r\n@NgModule({\r\n\u00a0 declarations: [\r\n\u00a0\u00a0\u00a0 DataStoreComponent\r\n\u00a0 ],\r\n\u00a0 imports: [\r\n\u00a0\u00a0\u00a0 BrowserModule,\r\n\u00a0\u00a0\u00a0 HttpClientModule,\r\n\u00a0\u00a0\u00a0 AppRoutingModule,\r\n\u00a0\u00a0\u00a0 FormsModule,\r\n\u00a0\u00a0\u00a0 FusionChartsModule\r\n\u00a0 ],\r\n\u00a0 providers: [],\r\n\u00a0 bootstrap: [DataStoreComponent]\r\n})\r\nexport class AppModule { }\r\n<\/code><\/pre>\r\nHere, you are importing various modules, including FusionChartsModule and NgModule.\r\n\r\n4. Then you have to define the routing. Create the <strong>app-routing.module.ts<\/strong> file and add these codes:\r\n<pre><code>import { NgModule } from '@angular\/core';\r\nimport { Routes, RouterModule } from '@angular\/router';\r\nconst routes: Routes = [];\r\n@NgModule({\r\n\u00a0 imports: [RouterModule.forRoot(routes)],\r\n\u00a0 exports: [RouterModule]\r\n})\r\nexport class AppRoutingModule { }\r\n<\/code><\/pre>\r\n5. Create <strong>json-typings.d.ts<\/strong> file and insert these lines:\r\n<pre><code>declare module \"*.json\" {\r\n\u00a0\u00a0\u00a0 const value: any;\r\n\r\n\u00a0\u00a0\u00a0 export default value;\r\n\r\n\u00a0}\r\n<\/code><\/pre>\r\n<h3><span class=\"ez-toc-section\" id=\"Source_Code\"><\/span><strong>Source Code<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nIf you need help, you can download the source code from <a href=\"https:\/\/www.fusioncharts.com\/dashboards\/investment-portfolio\">here<\/a>.\r\n\r\nOnce the download is done, unzip the file. Then navigate through <strong>investment-portfolio &gt; src<\/strong> folder. Here, you will find the source code of the investment dashboard.\r\n<h2><span class=\"ez-toc-section\" id=\"How_to_Build_Powerful_Venture_Financing_Dashboards_with_FusionCharts_and_React\"><\/span><strong>How to Build Powerful Venture Financing Dashboards with FusionCharts and React<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nYou can utilize the power of React and FusionCharts to create Venture Financing dashboards quickly and conveniently. Take a look at this beautiful dashboard created for venture financing:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49923\" src=\"https:\/\/www.sencha.com\/wp-content\/uploads\/2021\/05\/How-to-Build-Powerful-Venture-Financing-Dashboards-with-FusionCharts-and-Angular.png\" alt=\"How To Build Powerful Venture Financing Dashboards With FusionCharts And Angular\" width=\"1920\" height=\"1918\" \/>\r\n\r\nYou can create this dashboard by simply following these steps:\r\n\r\n1. You have to create components for the Venture financing dashboard. Go to <strong>src &gt; components<\/strong> folder. Create the new Base.js file. Add the lines from the sample code.\r\n\r\n2. Create <strong>card.js<\/strong> file and insert the lines from the sample.\r\n\r\n3. Next, create <strong>FusionExport.js<\/strong> file and insert the lines from the sample.\r\n\r\n4. Now, you have to create the container for Key Performance Indicator (KPI). Create the <strong>kpi-container.js<\/strong> file. Then add the lines from the sample.\r\n<h3><span class=\"ez-toc-section\" id=\"Source_Code-2\"><\/span><strong>Source Code<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\r\nYou can get the source code from <a href=\"https:\/\/www.fusioncharts.com\/dashboards\/investment-portfolio\">here<\/a>.\r\n\r\nOnce the download is done, unzip the file. Then navigate through <strong>venture-financing-dashboard &gt; src <\/strong>folder. Here, you will find the source code of the venture financing dashboard.\r\n<h2><span class=\"ez-toc-section\" id=\"How_Can_I_Build_Beautiful_Investment_Dashboards_with_JavaScript\"><\/span>How Can I Build Beautiful Investment Dashboards with JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nNow, you have learned to build beautiful dashboards with JavaScript. Keep visiting our website to get more tutorials on building interactive web applications.\r\n\r\n<a href=\"https:\/\/www.fusioncharts.com\/fusioncharts\">Head over and check out the full FusionCharts suite and all of the examples to get started!<\/a>","protected":false},"excerpt":{"rendered":"<p>Keeping track of investment accounts is not an easy task. That\u2019s why investors around the world prefer to use the investment dashboard. It provides them with a quick overview of the estimated return rate. The Venture Capital firms also use the dashboard that is specifically built for their businesses. It enables them to oversee and [&hellip;]<\/p>\n","protected":false},"author":58,"featured_media":17981,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[722,18],"tags":[152,203,211,763],"coauthors":[762],"class_list":["post-17973","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fusioncharts","category-tutorials","tag-fusioncharts","tag-investment-dashboards","tag-javascript","tag-venture-financing-dashboards"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript: Build Investment &amp; Venture Financing Dashboard 2026<\/title>\n<meta name=\"description\" content=\"Keep track of investment accounts with ease. Learn why 2026 investors prefer using interactive dashboards for their portfolios. Manage your wealth today.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript: Build Investment &amp; Venture Financing Dashboard 2026\" \/>\n<meta property=\"og:description\" content=\"Keep track of investment accounts with ease. Learn why 2026 investors prefer using interactive dashboards for their portfolios. Manage your wealth today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-27T23:57:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:10:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/05\/Easily-Build-Powerful-Investment-and-Venture-Financing-Dashboards-With-JavaScript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1274\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Md. Ehsanul Haque Kanan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Md. Ehsanul Haque Kanan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Md. Ehsanul Haque Kanan\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/ae88ec44ff203a7e332523db874d55ac\"\n\t            },\n\t            \"headline\": \"JavaScript: Build Investment &amp; Venture Financing Dashboard 2026\",\n\t            \"datePublished\": \"2021-05-27T23:57:45+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:10:46+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/\"\n\t            },\n\t            \"wordCount\": 562,\n\t            \"commentCount\": 0,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2021\/05\/Easily-Build-Powerful-Investment-and-Venture-Financing-Dashboards-With-JavaScript.jpg\",\n\t            \"keywords\": [\n\t                \"FusionCharts\",\n\t                \"investment dashboards\",\n\t                \"javascript\",\n\t                \"venture financing dashboards\"\n\t            ],\n\t            \"articleSection\": [\n\t                \"FusionCharts\",\n\t                \"Tutorials\"\n\t            ],\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"CommentAction\",\n\t                    \"name\": \"Comment\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/\",\n\t            \"name\": \"JavaScript: Build Investment &amp; Venture Financing Dashboard 2026\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2021\/05\/Easily-Build-Powerful-Investment-and-Venture-Financing-Dashboards-With-JavaScript.jpg\",\n\t            \"datePublished\": \"2021-05-27T23:57:45+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:10:46+00:00\",\n\t            \"description\": \"Keep track of investment accounts with ease. Learn why 2026 investors prefer using interactive dashboards for their portfolios. Manage your wealth today.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2021\/05\/Easily-Build-Powerful-Investment-and-Venture-Financing-Dashboards-With-JavaScript.jpg\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2021\/05\/Easily-Build-Powerful-Investment-and-Venture-Financing-Dashboards-With-JavaScript.jpg\",\n\t            \"width\": 1920,\n\t            \"height\": 1274,\n\t            \"caption\": \"Easily-Build-Powerful-Investment-and-Venture-Financing-Dashboards-With-JavaScript\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.fusioncharts.com\/blog\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"JavaScript: Build Investment &amp; Venture Financing Dashboard 2026\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"name\": \"FusionBrew - The FusionCharts Blog\",\n\t            \"description\": \"Get tips and tricks on how to build effective Data Visualisation using FusionCharts\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\",\n\t            \"name\": \"FusionCharts\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"width\": 1,\n\t                \"height\": 1,\n\t                \"caption\": \"FusionCharts\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/ae88ec44ff203a7e332523db874d55ac\",\n\t            \"name\": \"Md. Ehsanul Haque Kanan\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/7ae312da49dc9346345542fa023bbdb2\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/165\/165757cdd99e8f3cd83366a16d591a5bx96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/165\/165757cdd99e8f3cd83366a16d591a5bx96.jpg\",\n\t                \"caption\": \"Md. Ehsanul Haque Kanan\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/ehsanulhaquekanan\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript: Build Investment &amp; Venture Financing Dashboard 2026","description":"Keep track of investment accounts with ease. Learn why 2026 investors prefer using interactive dashboards for their portfolios. Manage your wealth today.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript: Build Investment &amp; Venture Financing Dashboard 2026","og_description":"Keep track of investment accounts with ease. Learn why 2026 investors prefer using interactive dashboards for their portfolios. Manage your wealth today.","og_url":"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2021-05-27T23:57:45+00:00","article_modified_time":"2026-01-20T09:10:46+00:00","og_image":[{"width":1920,"height":1274,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2021\/05\/Easily-Build-Powerful-Investment-and-Venture-Financing-Dashboards-With-JavaScript.jpg","type":"image\/jpeg"}],"author":"Md. Ehsanul Haque Kanan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Md. Ehsanul Haque Kanan","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/"},"author":{"name":"Md. Ehsanul Haque Kanan","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/ae88ec44ff203a7e332523db874d55ac"},"headline":"JavaScript: Build Investment &amp; Venture Financing Dashboard 2026","datePublished":"2021-05-27T23:57:45+00:00","dateModified":"2026-01-20T09:10:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/"},"wordCount":562,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2021\/05\/Easily-Build-Powerful-Investment-and-Venture-Financing-Dashboards-With-JavaScript.jpg","keywords":["FusionCharts","investment dashboards","javascript","venture financing dashboards"],"articleSection":["FusionCharts","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/","url":"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/","name":"JavaScript: Build Investment &amp; Venture Financing Dashboard 2026","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2021\/05\/Easily-Build-Powerful-Investment-and-Venture-Financing-Dashboards-With-JavaScript.jpg","datePublished":"2021-05-27T23:57:45+00:00","dateModified":"2026-01-20T09:10:46+00:00","description":"Keep track of investment accounts with ease. Learn why 2026 investors prefer using interactive dashboards for their portfolios. Manage your wealth today.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2021\/05\/Easily-Build-Powerful-Investment-and-Venture-Financing-Dashboards-With-JavaScript.jpg","contentUrl":"\/blog\/wp-content\/uploads\/2021\/05\/Easily-Build-Powerful-Investment-and-Venture-Financing-Dashboards-With-JavaScript.jpg","width":1920,"height":1274,"caption":"Easily-Build-Powerful-Investment-and-Venture-Financing-Dashboards-With-JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/easily-build-powerful-investment-and-venture-financing-dashboards-with-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript: Build Investment &amp; Venture Financing Dashboard 2026"}]},{"@type":"WebSite","@id":"https:\/\/www.fusioncharts.com\/blog\/#website","url":"https:\/\/www.fusioncharts.com\/blog\/","name":"FusionBrew - The FusionCharts Blog","description":"Get tips and tricks on how to build effective Data Visualisation using FusionCharts","publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fusioncharts.com\/blog\/#organization","name":"FusionCharts","url":"https:\/\/www.fusioncharts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/","url":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","contentUrl":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","width":1,"height":1,"caption":"FusionCharts"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/ae88ec44ff203a7e332523db874d55ac","name":"Md. Ehsanul Haque Kanan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/7ae312da49dc9346345542fa023bbdb2","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/165\/165757cdd99e8f3cd83366a16d591a5bx96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/165\/165757cdd99e8f3cd83366a16d591a5bx96.jpg","caption":"Md. Ehsanul Haque Kanan"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/ehsanulhaquekanan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/17973","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/users\/58"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=17973"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/17973\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/17981"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=17973"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=17973"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=17973"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=17973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}