{"id":28359015,"url":"https://github.com/quickcorp/qcobjects-charts","last_synced_at":"2025-07-22T03:36:40.548Z","repository":{"id":51946939,"uuid":"252866828","full_name":"QuickCorp/qcobjects-charts","owner":"QuickCorp","description":"QCObjects Dashboard \u0026 Charts Template App","archived":false,"fork":false,"pushed_at":"2021-05-08T21:11:08.000Z","size":5861,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-21T08:36:11.822Z","etag":null,"topics":["dashboard","qcobjects","template"],"latest_commit_sha":null,"homepage":"https://quickcorp.github.io/qcobjects-charts","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/QuickCorp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-03T23:45:26.000Z","updated_at":"2020-12-28T04:23:45.000Z","dependencies_parsed_at":"2022-08-23T22:50:57.800Z","dependency_job_id":null,"html_url":"https://github.com/QuickCorp/qcobjects-charts","commit_stats":null,"previous_names":[],"tags_count":12,"template":true,"template_full_name":null,"purl":"pkg:github/QuickCorp/qcobjects-charts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuickCorp%2Fqcobjects-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuickCorp%2Fqcobjects-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuickCorp%2Fqcobjects-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuickCorp%2Fqcobjects-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QuickCorp","download_url":"https://codeload.github.com/QuickCorp/qcobjects-charts/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QuickCorp%2Fqcobjects-charts/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266420839,"owners_count":23926004,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dashboard","qcobjects","template"],"created_at":"2025-05-28T09:08:46.180Z","updated_at":"2025-07-22T03:36:40.537Z","avatar_url":"https://github.com/QuickCorp.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![logo](https://qcobjects.dev/qcobjects_01.png)\n\n# QCObjects Charts Template App\n\nLearn more about QCObjects framework in [https://qcobjects.com](https://qcobjects.com)\n\nThis is a custom template to create a PWA with examples using chart components. This templates uses [Highcharts](https://www.highcharts.com) and [Fusioncharts](fusioncharts.com) to render the charts.\n\n## License\n\nPlease read the [QCObjects License](https://github.com/QuickCorp/QCObjects/blob/master/LICENSE.txt) before you proceed.\n\n## Third Party License\n\nYou are responsible to buy or be granted of any third party used in this template and tutorial.\n\nPlease read and buy the [license of Highcharts](https://shop.highsoft.com/highcharts) and the [license of FusionCharts](https://www.fusioncharts.com/buy) before to start.\n\n## Live Demo\n\nTo check out the [live demo](https://quickcorp.github.io/qcobjects-charts/) of this template, please click [here](https://quickcorp.github.io/qcobjects-charts/)\n\n![demo](img/screenshots/qcobjects-charts-screenshot-demo.png)\n![demo2](img/screenshots/qcobjects-charts-screenshot3.png)\n\n## Quick Start\n\n1.- First, create a new progressive web app usign this template. Inside a project folder, Type:\n\n```shell\n\u003e qcobjects create mynewapp --custom=qcobjects-charts\n```\n\n2.- Now, you can test your new app usign npm test:\n\n\u003e npm i --save-dev jasmine \u0026\u0026 npm test\n\n3.- If everything is ok, you can view your app in a browser by launching with the QCObjects Built-In Server:\n\n\u003e qcobjects launch mynewapp\n\n4.- Go to your browser and navigate to https://localhost\n\n# Dashboard Tutorial\n\n## Placing chart components\n\nGo to templates/components/charts folder and place a new chart template, for css normalising purposes, it is recomended to enclose your template in a **\u003carticle\u003e\u003c/article\u003e** tag:\n\nHere is an example:\n\n```html\n\u003carticle\u003e\n\u003c!-- Your template goes here --\u003e\n\u003cstyle\u003e\n        @import url(\"./css/components/card.css\");\n        @import url(\"./css/components/highcharts.css\");\n\u003c/style\u003e\n\n\u003cdiv class=\"card\"\u003e\n    \u003cfigure class=\"highcharts-figure\"\u003e\n      \u003cdiv class=\"container\" id=\"areachart\"\u003e\n        Loading chart...\n      \u003c/div\u003e\n      \u003cp class=\"highcharts-description\"\u003e\n          Demonstrating a basic area chart, also known as a mountain chart.\n          Area charts are similar to line charts, but commonly used to visualize\n          volumes.\n      \u003c/p\u003e\n    \u003c/figure\u003e\n\u003c/div\u003e\n\u003c!-- this is the end of your template --\u003e\n\u003c/article\u003e\n```\n\nNow that you have created the chart template, you can use it on any component you want, just name it as the template. Example: if the name of your template is: **basicareachart.tpl.html** then the name you have to use it in the component is **basicareachart**. Name attributes of the components in QCObjects are not unique, so you can use the same name for many components without having issues.\n\n```html\n\u003c!--\n  As the component template is placed inside a charts subfolder (templates/components/charts)\n  Then the name needs to start with \"charts/\" prefix as a direct reference to the subfolder path\n--\u003e\n\u003ccomponent name=\"charts/fc-barcodechart\"\u003e\u003c/component\u003e\n```\n\nThe result of this is just inserting the html code of the template **templates/components/charts/basicareachart.tpl.html** into the component that you have placed in your main html page\n\nNOTE: check out the prebuilt example in **templates/components/pages/page1.tpl.html**\n\n## Adding behaviour using Controllers\n\nNow you have to add some behaviour to have the new chart loaded into the component and not just dead html tag elements:\n\nFirst, create a new **QCObjects Controller**, to do so, go to **js/packages/** folder and open\nthe file **org.example.mycharts.js** to create your custom controllers package:\n\nHere is an example of a Bar Chart by using FusionCharts:\n\n```javascript\n'use strict';\n// js/packages/org.example.mycharts.js\n\n'use strict';\nPackage('org.example.mycharts', [\n  Class('BarChartFCController', FCController, {\n    done: function() {\n      // this is an example to build a bar chart using FusionCharts\n      var controller = this;\n      this.loadFusionCharts().then(\n        function() {\n          // Your custom datasource for your chart goes here\n          // to get more examples and license using FusionCharts, go to fusioncharts.com\n\n          const dataSource = {\n            \"chart\": {\n              \"caption\": \"Countries With Most Oil Reserves [2017-18]\",\n              \"subcaption\": \"In MMbbl = One Million barrels\",\n              \"yaxisname\": \"Reserves (MMbbl)\",\n              \"captionalignment\": \"left\",\n              \"numbersuffix\": \"K\",\n              \"labeldisplay\": \"AUTO\",\n              \"theme\": \"fusion\"\n            },\n            \"data\": [{\n                \"label\": \"Venezuela\",\n                \"value\": \"290\"\n              },\n              {\n                \"label\": \"Saudi\",\n                \"value\": \"260\"\n              },\n              {\n                \"label\": \"Canada\",\n                \"value\": \"180\"\n              },\n              {\n                \"label\": \"Iran\",\n                \"value\": \"140\"\n              },\n              {\n                \"label\": \"Russia\",\n                \"value\": \"115\"\n              },\n              {\n                \"label\": \"UAE\",\n                \"value\": \"100\"\n              },\n              {\n                \"label\": \"US\",\n                \"value\": \"30\"\n              },\n              {\n                \"label\": \"China\",\n                \"value\": \"30\"\n              }\n            ]\n          };\n\n          FusionCharts.ready(function() {\n            const myChart = new FusionCharts({\n              type: \"column2d\",\n              renderAt: \"chart-container\",\n              width: \"100%\",\n              height: \"500\",\n              dataFormat: \"json\",\n              dataSource\n            }).render();\n          });\n\n          // this is the end of your code\n\n        });\n    }\n  })\n]);\n```\n\nNOTE: If you want to create separate files, for instance: one for every Class definition, you must to add the corresponding Import line in the **org.quickcorp.custom.controllers.js** package before for every new package you want to add. It is recomended to use a hierarchy order in your package imports to have a very progressive and quick load of your dependencies.\n\nTo use your new **BarChartFCController** into a component, you only need to set up a value in a **controllerClass** attribute of a component tag\n\n```html\n\u003ccomponent name=\"charts/fc-barcodechart\" controllerClass=\"BarChartFCController\"\u003e\u003c/component\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquickcorp%2Fqcobjects-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquickcorp%2Fqcobjects-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquickcorp%2Fqcobjects-charts/lists"}