QCObjects Charts Template App
Learn more about QCObjects framework in https://qcobjects.com
This is a custom template to create a PWA with examples using chart components. This templates uses Highcharts and Fusioncharts to render the charts.
License
Please read the QCObjects License before you proceed.
Third Party License
You are responsible to buy or be granted of any third party used in this template and tutorial.
Please read and buy the license of Highcharts and the license of FusionCharts before to start.
Live Demo
To check out the live demo of this template, please click here
Quick Start
1.- First, create a new progressive web app usign this template. Inside a project folder, Type:
> qcobjects create mynewapp --custom=qcobjects-charts
2.- Now, you can test your new app usign npm test:
npm i --save-dev jasmine && npm test
3.- If everything is ok, you can view your app in a browser by launching with the QCObjects Built-In Server:
qcobjects launch mynewapp
4.- Go to your browser and navigate to https://localhost
Dashboard Tutorial
Placing chart components
Go to templates/components/charts folder and place a new chart template, for css normalising purposes, it is recomended to enclose your template in a tag:
Here is an example:
<!-- Your template goes here --> Loading chart... Demonstrating a basic area chart, also known as a mountain chart. Area charts are similar to line charts, but commonly used to visualize volumes. <!-- this is the end of your template -->
Now 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.
<!-- As the component template is placed inside a charts subfolder (templates/components/charts) Then the name needs to start with "charts/" prefix as a direct reference to the subfolder path-->
The 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
NOTE: check out the prebuilt example in templates/components/pages/page1.tpl.html
Adding behaviour using Controllers
Now you have to add some behaviour to have the new chart loaded into the component and not just dead html tag elements:
First, create a new QCObjects Controller, to do so, go to js/packages/ folder and open the file org.example.mycharts.js to create your custom controllers package:
Here is an example of a Bar Chart by using FusionCharts:
'use strict';// js/packages/org.example.mycharts.js 'use strict';;
NOTE: 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.
To use your new BarChartFCController into a component, you only need to set up a value in a controllerClass attribute of a component tag