Bar Chart

Question

davy_yg 2 Posting Whiz

7 Years Ago

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.

http://codepen.io/miyavibest/pen/Bfima

bar-chart

3 Contributors
19 Replies
365 Views
1 Week Discussion Span
Latest Post 7 Years Ago Latest Post by diafol

All 19 Replies

Dani 4,084 The Queen of DaniWeb

7 Years Ago

It's not free, but I use FusionCharts and I couldn't be happier with them.

Dani 4,084 The Queen of DaniWeb

7 Years Ago

That's so weird, I don't remember paying every year, and I've been using FusionCharts forever for the graphs in member profiles.

diafol

7 Years Ago

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.

diafol

7 Years Ago

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.

Edited 7 Years Ago by diafol

diafol

7 Years Ago

Davy. Seriously. You've just posted the url of your local machine.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

davy_yg 2 Posting Whiz · Answer 1 · 2017-01-22T12:04:05+00:00

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.

davy_yg 2 Posting Whiz · Answer 2 · 2017-01-30T08:30:07+00:00

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.

davy_yg 2 Posting Whiz · Answer 3 · 2017-01-31T08:50:18+00:00

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>0.1323</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.

diafol · Answer 4 · 2017-01-31T09:43:57+00:00

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_yg 2 Posting Whiz · Answer 5 · 2017-01-31T10:01:58+00:00

Thanks. I wonder why page not found appearing?

This is my url: http://127.0.0.1/JSON/index.php/json

davy_yg 2 Posting Whiz · Answer 6 · 2017-01-31T14:12:01+00:00

The url is not so important. The result is:

404 Page Not Found

The page you requested was not found.

diafol · Answer 7 · 2017-01-31T19:19:23+00:00

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.

davy_yg 2 Posting Whiz · Answer 8 · 2017-01-31T20:58:38+00:00

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>0.1323</strong> seconds. <?php echo  (ENVIRONMENT === 'development') ?  'CodeIgniter Version <strong>' . CI_VERSION . '</strong>' : '' ?></p>
</div>

</body>
</html>

config/routes.php

$route['json'] = 'json';

diafol · Answer 9 · 2017-01-31T22:02:47+00:00

So have you opened:

 http://127.0.0.1/JSON/index.php/welcome/json

Prefix 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 );
    }

davy_yg 2 Posting Whiz · Answer 10 · 2017-02-01T01:55:40+00:00

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 );

    }

diafol · Answer 11 · 2017-02-01T02:12:13+00:00

Well your routing's f***ed then. Sorry - not a data issue I don't think.

davy_yg 2 Posting Whiz · Answer 12 · 2017-02-01T04:55:21+00:00

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';

diafol · Answer 13 · 2017-02-01T16:39:51+00:00

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?

diafol · Answer 14 · 2017-02-01T16:45:40+00:00

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.

Bar Chart

Recommended Answers Collapse Answers

All 19 Replies

Recommended Answers