rbaldwin
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 - 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.
|
Oper
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
_________________
____________________________
http://www.7bz.com (Free CMS,CRM Developed in CCS)
http://www.PremiumWebTemplate.com
Affiliation Web Site Templates
Please do backup first |
