Hello,
I am trying to create bar chart with html but how?
Country Bar Chart 3D
https://www.freshdesignweb.com/css-jquery-graph-bar-pie-chart/
I try to copy the bar chart but it does not work out well.
Please help.
Nothing appears after I copy. I wonder if I copy the code correctly.
It's not free, but I use FusionCharts and I couldn't be happier with them.
I wonder why the license must be paid yearly, not one time basis. I also still do not understand how to link my php with javascript later on to control the chart.
Is there any other alternative like the free one or a cheaper one?
I also prefer one time basis license if it is paid.
That's so weird, I don't remember paying every year, and I've been using FusionCharts forever for the graphs in member profiles.
Only has annual subscriptions now from what I see. Perhaps you bought a perpetual licence / on-off when such a thing existed. Everybody's adopting the subscription / renewal model. At a min. of $149 / year for an individual - it sounds like a bad joke. I'm not saying FC is not good, I'm just gobsmacked that they don't have alternative pricing models. That price tag would put me off, but if they sold me certain chart types at $5-10 each or limited my charts to certain domains (easily done), then that would be ching-ching, sale. Perhaps I'm being naive though.
Hello,
I try the trial version of fusionchart:
http://www.fusioncharts.com/dev/getting-started/building-your-first-chart.html
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var revenueChart = new FusionCharts({
"type": "column2d",
"renderAt": "chartContainer",
"width": "500",
"height": "300",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"theme": "fint"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}
});
revenueChart.render();
})
</script>
</head>
<body>
<div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</html>Now, I only wonder if I replace this html with CI data. How to replace that textual data in "label" and "value"? Can you change the number and label? How to intergrate this html file with CI?
Thanks.
Make the file above a view file, then pass the variables from your controller (I'ma ssuming data called from model/s) as an array (or object). Better still pass the data as json. Then have the view pick up the variable:
var revenueChart = new FusionCharts({
"type": "column2d",
"renderAt": "chartContainer",
"width": "500",
"height": "300",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"theme": "fint"
},
"data": <?=$data?>
}
});So your controller will be something like:
//$myDataArray = data in the format of [["label"=>"Something", "value"=>"Else"],["label"=>"Something", "value"=>"Else"],...]
$data = json_encode( $myDataArray );
$this->load->view( 'myFusionChart', $data );Been a v long time since I used CI, so apologies if things have changed or it's not quite right.
Hello,
https://www.tutorialspoint.com/json/json_php_example.htm
I try this:
controllers/Welcome.php
public function json()
{
$myDataArray = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5);
$data = json_encode( $myDataArray );
$this->load->view( 'json', $data );
}views/json.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to CodeIgniter</title>
<style type="text/css">
::selection { background-color: #E13300; color: white; }
::-moz-selection { background-color: #E13300; color: white; }
body {
background-color: #fff;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
}
a {
color: #003399;
background-color: transparent;
font-weight: normal;
}
h1 {
color: #444;
background-color: transparent;
border-bottom: 1px solid #D0D0D0;
font-size: 19px;
font-weight: normal;
margin: 0 0 14px 0;
padding: 14px 15px 10px 15px;
}
code {
font-family: Consolas, Monaco, Courier New, Courier, monospace;
font-size: 12px;
background-color: #f9f9f9;
border: 1px solid #D0D0D0;
color: #002166;
display: block;
margin: 14px 0 14px 0;
padding: 12px 10px 12px 10px;
}
#body {
margin: 0 15px 0 15px;
}
p.footer {
text-align: right;
font-size: 11px;
border-top: 1px solid #D0D0D0;
line-height: 32px;
padding: 0 10px 0 10px;
margin: 20px 0 0 0;
}
#container {
margin: 10px;
border: 1px solid #D0D0D0;
box-shadow: 0 0 8px #D0D0D0;
}
</style>
<script>
var revenueChart = new FusionCharts({
"type": "column2d",
"renderAt": "chartContainer",
"width": "500",
"height": "300",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"theme": "fint"
},
"data": <?=$data?>
}
});
</script>
</head>
<body>
<div id="container">
<h1>Welcome to CodeIgniter!</h1>
<div id="body">
<p>The page you are looking at is being generated dynamically by CodeIgniter.</p>
<p>If you would like to edit this page you'll find it located at:</p>
<code>application/views/welcome_message.php</code>
<p>The corresponding controller for this page is found at:</p>
<code>application/controllers/Welcome.php</code>
<p>If you are exploring CodeIgniter for the very first time, you should start by reading the <a href="user_guide/">User Guide</a>.</p>
</div>
<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds. <?php echo (ENVIRONMENT === 'development') ? 'CodeIgniter Version <strong>' . CI_VERSION . '</strong>' : '' ?></p>
</div>
</body>
</html>config/routes.php
$route['json'] = 'json';and I get this :
404 Page Not Found
The page you requested was not found.
I don't quite understand json especially how to implement it to codeigniter.
Not sure davy. I think I messed up the controller code anyhow. Try this:
$myDataArray = [
["label"=>"Hans", "value"=>"10"],
["label"=>"Lotti", "value"=>"20"],
["label"=>"Jane", "value"=>"30"],
["label"=>"Willi", "value"=>"70"],
["label"=>"Suki", "value"=>"30"],
["label"=>"Leo", "value"=>"50"],
["label"=>"Sacha", "value"=>"40"],
["label"=>"Britt", "value"=>"90"],
["label"=>"Adolf", "value"=>"20"],
["label"=>"Enrico", "value"=>"70"]
];
$returnData = [];
$returnData['data'] = json_encode( $myDataArray );
$this->load->view( 'myFusionChart', $returnData );And then in your view:
<script>
var revenueChart = new FusionCharts({
"type": "column2d",
"renderAt": "chartContainer",
"width": "500",
"height": "300",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"theme": "fint"
},
"data": <?=$data?>
}
});
</script>Davy. Seriously. You've just posted the url of your local machine.
The url is not so important. The result is:
404 Page Not Found
The page you requested was not found.
I have a sinking feeling. Can you post your code as is, or perhaps you didn't change this...
$this->load->view( 'myFusionChart', $returnData );to
$this->load->view( 'json', $returnData );I'm assuming that the page name is json.php not my example.
controllers/Welcome.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {
/**
* Index Page for this controller.
*
* Maps to the following URL
* http://example.com/index.php/welcome
* - or -
* http://example.com/index.php/welcome/index
* - or -
* Since this controller is set as the default controller in
* config/routes.php, it's displayed at http://example.com/
*
* So any other public methods not prefixed with an underscore will
* map to /index.php/welcome/<method_name>
* @see https://codeigniter.com/user_guide/general/urls.html
*/
public function index()
{
$this->load->view('welcome_message');
}
public function json()
{
$myDataArray = [
["label"=>"Hans", "value"=>"10"],
["label"=>"Lotti", "value"=>"20"],
["label"=>"Jane", "value"=>"30"],
["label"=>"Willi", "value"=>"70"],
["label"=>"Suki", "value"=>"30"],
["label"=>"Leo", "value"=>"50"],
["label"=>"Sacha", "value"=>"40"],
["label"=>"Britt", "value"=>"90"],
["label"=>"Adolf", "value"=>"20"],
["label"=>"Enrico", "value"=>"70"]
];
$returnData = [];
$returnData['data'] = json_encode( $myDataArray );
$this->load->view( 'json', $returnData );
}
}
?>views/json.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to CodeIgniter</title>
<style type="text/css">
::selection { background-color: #E13300; color: white; }
::-moz-selection { background-color: #E13300; color: white; }
body {
background-color: #fff;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
}
a {
color: #003399;
background-color: transparent;
font-weight: normal;
}
h1 {
color: #444;
background-color: transparent;
border-bottom: 1px solid #D0D0D0;
font-size: 19px;
font-weight: normal;
margin: 0 0 14px 0;
padding: 14px 15px 10px 15px;
}
code {
font-family: Consolas, Monaco, Courier New, Courier, monospace;
font-size: 12px;
background-color: #f9f9f9;
border: 1px solid #D0D0D0;
color: #002166;
display: block;
margin: 14px 0 14px 0;
padding: 12px 10px 12px 10px;
}
#body {
margin: 0 15px 0 15px;
}
p.footer {
text-align: right;
font-size: 11px;
border-top: 1px solid #D0D0D0;
line-height: 32px;
padding: 0 10px 0 10px;
margin: 20px 0 0 0;
}
#container {
margin: 10px;
border: 1px solid #D0D0D0;
box-shadow: 0 0 8px #D0D0D0;
}
</style>
<script>
var revenueChart = new FusionCharts({
"type": "column2d",
"renderAt": "chartContainer",
"width": "500",
"height": "300",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"theme": "fint"
},
"data": <?=$data?>
}
});
</script>
</head>
<body>
<div id="container">
<h1>Welcome to CodeIgniter!</h1>
<div id="body">
<p>The page you are looking at is being generated dynamically by CodeIgniter.</p>
<p>If you would like to edit this page you'll find it located at:</p>
<code>application/views/welcome_message.php</code>
<p>The corresponding controller for this page is found at:</p>
<code>application/controllers/Welcome.php</code>
<p>If you are exploring CodeIgniter for the very first time, you should start by reading the <a href="user_guide/">User Guide</a>.</p>
</div>
<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds. <?php echo (ENVIRONMENT === 'development') ? 'CodeIgniter Version <strong>' . CI_VERSION . '</strong>' : '' ?></p>
</div>
</body>
</html>config/routes.php
$route['json'] = 'json';So have you opened:
http://127.0.0.1/JSON/index.php/welcome/jsonPrefix the json method with an underscore to get it to work directly under http://127.0.0.1/JSON/index.php/json :
public function _json()
{
$myDataArray = [
["label"=>"Hans", "value"=>"10"],
["label"=>"Lotti", "value"=>"20"],
["label"=>"Jane", "value"=>"30"],
["label"=>"Willi", "value"=>"70"],
["label"=>"Suki", "value"=>"30"],
["label"=>"Leo", "value"=>"50"],
["label"=>"Sacha", "value"=>"40"],
["label"=>"Britt", "value"=>"90"],
["label"=>"Adolf", "value"=>"20"],
["label"=>"Enrico", "value"=>"70"]
];
$returnData = [];
$returnData['data'] = json_encode( $myDataArray );
$this->load->view( 'json', $returnData );
}I already add (underscore) - public function _json()
Still does not show anything:
404 Page Not Found
The page you requested was not found.
controllers/Welcome.php
public function _json()
{
$myDataArray = [
["label"=>"Hans", "value"=>"10"],
["label"=>"Lotti", "value"=>"20"],
["label"=>"Jane", "value"=>"30"],
["label"=>"Willi", "value"=>"70"],
["label"=>"Suki", "value"=>"30"],
["label"=>"Leo", "value"=>"50"],
["label"=>"Sacha", "value"=>"40"],
["label"=>"Britt", "value"=>"90"],
["label"=>"Adolf", "value"=>"20"],
["label"=>"Enrico", "value"=>"70"]
];
$returnData = [];
$returnData['data'] = json_encode( $myDataArray );
$this->load->view( 'json', $returnData );
}Well your routing's f***ed then. Sorry - not a data issue I don't think.
I can't tell the difference if the routing is wrong.
http://127.0.0.1/JSON/index.php/json :
config/routes.php
$route['json'] = 'json';Ok, I downloaded CI 3 and ran it as the code above, looked at view source in the browser and got:
<script>
var revenueChart = new FusionCharts({
"type": "column2d",
"renderAt": "chartContainer",
"width": "500",
"height": "300",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"theme": "fint"
},
"data": [{"label":"Hans","value":"10"},{"label":"Lotti","value":"20"},{"label":"Jane","value":"30"},{"label":"Willi","value":"70"},{"label":"Suki","value":"30"},{"label":"Leo","value":"50"},{"label":"Sacha","value":"40"},{"label":"Britt","value":"90"},{"label":"Adolf","value":"20"},{"label":"Enrico","value":"70"}] }
});
</script>Which is exactly what was required. I may have given a red herring as the underscore - sorry. This is my setup:
application/config/routes.php:
$route['default_controller'] = 'welcome';application/controllers/Welcome.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {
/**
* Index Page for this controller.
*
* Maps to the following URL
* http://example.com/index.php/welcome
* - or -
* http://example.com/index.php/welcome/index
* - or -
* Since this controller is set as the default controller in
* config/routes.php, it's displayed at http://example.com/
*
* So any other public methods not prefixed with an underscore will
* map to /index.php/welcome/<method_name>
* @see https://codeigniter.com/user_guide/general/urls.html
*/
public function index()
{
echo "YAH";
//$this->load->view('welcome_message');
}
public function json()
{
$myDataArray = [
["label"=>"Hans", "value"=>"10"],
["label"=>"Lotti", "value"=>"20"],
["label"=>"Jane", "value"=>"30"],
["label"=>"Willi", "value"=>"70"],
["label"=>"Suki", "value"=>"30"],
["label"=>"Leo", "value"=>"50"],
["label"=>"Sacha", "value"=>"40"],
["label"=>"Britt", "value"=>"90"],
["label"=>"Adolf", "value"=>"20"],
["label"=>"Enrico", "value"=>"70"]
];
$returnData = [];
$returnData['data'] = json_encode( $myDataArray );
$this->load->view( 'myFusionChart', $returnData );
}
}application/views/myFusionChart.php
<script>
var revenueChart = new FusionCharts({
"type": "column2d",
"renderAt": "chartContainer",
"width": "500",
"height": "300",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"theme": "fint"
},
"data": <?=$data?>
}
});
</script>So the CI bit works. I didn't download fusioncharts. However, I noticed you do not have any script reference (<script src=".."></script>) to the fusioncharts library files. How can you create a chart without the js files?? Anyhow, that's a separate issue and a possibly different thread. I believe the issue is solved?
Sorry the url was: http://{domain}/index.php/welcome/json
The only thing I can think of which may cause the issues you had was that Apache was not running. Check.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.