CodeCharge Studio
search Register Login  

Web Reports

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.

YesSoftware Forums -> CodeCharge Studio -> General/Other

 How to implement an alternative to CodeCharge charts.

Print topic Send  topic

Author Message

Posts: 172
Posted: 02/23/2021, 8:04 PM

A codecharge user reached out to me wanting to know how to create non-flash charts in a codecharge project. I thought perhaps others would like to know also.

As you know flash charts are dead, so here's how you can implement an HTML5 alternative to replace your flash charts.

Chart.js reference -

How to create a static bar chart in a codeCharge page.

First create a static bar chart so you can see the mechanics of using Chart.js

1. Create a new page

2. Edit the HTML and insert the following 2 statements into the <head> section
<script src=""></script>  
<link rel="stylesheet" href="">  

3. In the <body> section paste the following

<table width="600" align="center">  
         <canvas id="bar-chart" style="BACKGROUND-COLOR: #f3f3f3" width="900" height="600"></canvas>  
    new Chart(document.getElementById("bar-chart"), {  
    type: 'bar',  
    data: {  
      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],  
      datasets: [  
          label: "Population (millions)",  
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],  
          data: [2478,5267,734,784,433]  
    options: {  
      legend: { display: false },  
      title: {  
        display: true,  
        text: 'Predicted world population (millions) in 2050'  

Publish it and you should see a bar chart.

Then edit the HTML,

replace the data labels

"Africa", "Asia", "Europe", "Latin America", "North America"
a codecharge Label control

"Population (millions)"
with a codecharge Label control

["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"]
with a codecharge Label control

with a codecharge Label control

Predicted world population (millions) in 2050
with a codecharge Label control

then in the beforeshow Event for each of the Label controls you just inserted write code to query your database for the values you wish to use. Making sure to format the result string with double quotes and commas as per the original values.

another way, to do the same is to

simply create a new page,

place a Label control on the page, set its content to HTML

in the beforeShow event for the Label programmatically generate all the code i suggested you paste in step 3 above with your database values.

View profile  Send private message

Posts: 1195
Posted: 02/24/2021, 2:46 AM

we do something similar with amcharts

but i think is easy to create a label for the whole script section.
so you just create a function send SQL and the function return the full Script

Of course you could go creative and send type title, etc

label = GenChart(vChartType, strSQL, GraphTemplate, vTitle, vSize, OtherParameters....)

so label will get "<script>..................</script>

what i like about amchart is they offer a costume designer Online. but method work for any Graph engine

____________________________ (Free CMS,CRM Developed in CCS)
Affiliation Web Site Templates

Please do backup first
View profile  Send private message

Posts: 172
Posted: 02/24/2021, 6:48 AM

Yeah, i thought i'd provide a simple example.

I also do it with google charts.
View profile  Send private message

Add new topic Subscribe to topic   

These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit

MS Access to Web

Convert MS Access to Web.
Join thousands of Web developers who build Web applications with minimal coding.

Home   |    Search   |    Members   |    Register   |    Login

Powered by UltraApps Forum created with CodeCharge Studio
Copyright 2003-2004 by  and YesSoftware, Inc.