CodeCharge Studio
search Register Login  

Web Reports

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

YesSoftware Forums -> CodeCharge Studio -> General/Other

 How to implement an alternative to CodeCharge charts.

Print topic Send  topic

Author Message
rbaldwin

Posts: 169
Posted: 02/23/2021, 8:04 PM Quote message

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 - https://www.chartjs.org/

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="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>  
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">  

3. In the <body> section paste the following

  
<table width="600" align="center">  
    <tr>  
       <td>  
         <canvas id="bar-chart" style="BACKGROUND-COLOR: #f3f3f3" width="900" height="600"></canvas>  
       </td>  
    </tr>  
</table>  
<script>  
    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'  
      }  
    }  
});    
</script>  

Publish it and you should see a bar chart.


Then edit the HTML,

replace the data labels

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

replace
"Population (millions)"
with a codecharge Label control

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

replace
[2478,5267,734,784,433]
with a codecharge Label control

replace
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
Oper


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

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

_________________
____________________________
http://www.7bz.com (Free CMS,CRM Developed in CCS)

http://www.PremiumWebTemplate.com
Affiliation Web Site Templates

Please do backup first
View profile  Send private message
rbaldwin

Posts: 169
Posted: 02/24/2021, 6:48 AM Quote message

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

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

Add new topic Reply to topic Subscribe to topic   


These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit http://support.yessoftware.com.

Internet Database

Visually create Web enabled database applications in minutes.
CodeCharge.com

Home   |    Search   |    Members   |    Register   |    Login


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