
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
qcobjects-charts
Advanced tools
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.
Please read the QCObjects License before you proceed.
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.
To check out the live demo of this template, please click here
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
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:
<article>
<!-- Your template goes here -->
<style>
@import url("./css/components/card.css");
@import url("./css/components/highcharts.css");
</style>
<div class="card">
<figure class="highcharts-figure">
<div class="container" id="areachart">
Loading chart...
</div>
<p class="highcharts-description">
Demonstrating a basic area chart, also known as a mountain chart.
Area charts are similar to line charts, but commonly used to visualize
volumes.
</p>
</figure>
</div>
<!-- this is the end of your template -->
</article>
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
-->
<component name="charts/fc-barcodechart"></component>
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';
Package('org.example.mycharts', [
Class('BarChartFCController', FCController, {
done: function() {
// this is an example to build a bar chart using FusionCharts
var controller = this;
this.loadFusionCharts().then(
function() {
// Your custom datasource for your chart goes here
// to get more examples and license using FusionCharts, go to fusioncharts.com
const dataSource = {
"chart": {
"caption": "Countries With Most Oil Reserves [2017-18]",
"subcaption": "In MMbbl = One Million barrels",
"yaxisname": "Reserves (MMbbl)",
"captionalignment": "left",
"numbersuffix": "K",
"labeldisplay": "AUTO",
"theme": "fusion"
},
"data": [{
"label": "Venezuela",
"value": "290"
},
{
"label": "Saudi",
"value": "260"
},
{
"label": "Canada",
"value": "180"
},
{
"label": "Iran",
"value": "140"
},
{
"label": "Russia",
"value": "115"
},
{
"label": "UAE",
"value": "100"
},
{
"label": "US",
"value": "30"
},
{
"label": "China",
"value": "30"
}
]
};
FusionCharts.ready(function() {
const myChart = new FusionCharts({
type: "column2d",
renderAt: "chart-container",
width: "100%",
height: "500",
dataFormat: "json",
dataSource
}).render();
});
// this is the end of your code
});
}
})
]);
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
<component name="charts/fc-barcodechart" controllerClass="BarChartFCController"></component>
FAQs
App template for New App in QCObjects
The npm package qcobjects-charts receives a total of 1 weekly downloads. As such, qcobjects-charts popularity was classified as not popular.
We found that qcobjects-charts demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.