Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

HTML5 Bar Chart

, 25 Mar 2013 CPOL
A jQuery plugin for a 3D Bar Chart.
Html5BarChart_SRC.zip
html
img
Back.png
fb.png
Thumbs.db
js
<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        body {
            font-family: "helvetica", "calibri";
            display: inline;
            max-width: 800px;
            position: absolute;
            margin-left: -400px;
            left: 50%;
        }
        .chart {
            float: left;
            width: 402px;
            padding: 0 8px 8px 0;
        }
        .main p {
            font-size: 1.1em;
        }
        #back-button {
            cursor: pointer;
        }
    </style>
    <script src="../js/jquery-1.8.0.min.js"></script>
    <script src="../js/paper.js"></script>
    <script src="../js/html5-chart.js"></script>
    <script type="text/javascript">
        $(function () {

            var showMainView = function () {
                $('.view').hide();
                $('#back-button').hide();
                $('#main').show();
                $('#main .chart').barChart(settings);
            }

            var switchToCountry = function (countryName) {
                if (countryName == 'USA') {
                    $('.view').hide();
                    $('#back-button').show();
                    $('#' + countryName).show();
                    var s = eval('settings' + countryName);
                    $('#' + countryName + ' .chart').barChart(s);
                    $('#back-button').animate({ marginLeft: 32 }, { duration: 200, specialEasing: 'easeIn' });
                    $('#back-button').animate({ marginLeft: 0 }, { duration: 200, specialEasing: 'easeIn' });
                }
            }

            var chartData = [{
                country: "USA",
                gdp: 14991300000,
                color: "blue"
            }, {
                country: "China",
                gdp: 7203784000,
                color: "red"
            }, {
                country: "Japan",
                gdp: 5870357000,
                color: "white"
            }, {
                country: "Germany",
                gdp: 3604061000,
                color: "black"
            }, {
                country: "France",
                gdp: 2775518000,
                color: "blue"
            }, {
                country: "Brazil",
                gdp: 2476651000,
                color: "green"
            }, {
                country: "UK",
                gdp: 2429184000,
                color: "red"
            }, {
                country: "Italy",
                gdp: 2195937000,
                color: "green"
            }, {
                country: "India",
                gdp: 1897608000,
                color: "orange"
            }, {
                country: "Russia",
                gdp: 1857770000,
                color: "blue"
            }];

            var settings = {
                title: 'Top 10 Gross Domestic Product Countries',
                width: 400,
                height: 250,
                data: chartData,
                discreteValueField: 'gdp',
                discreteValuesCaption: 'Gross Domestic Product',
                categoryNameField: 'country',
                colorField: 'color',
                font: 'helvetica, calibri',
                depth3D: 15,
                angle: 30,
                onDataItemClick: function (item) {
                    switchToCountry(item.categoryName);
                }
            };

            var chartDataUSA = [{
                state: "California",
                gdp: 1936400000,
                color: "blue"
            }, {
                state: "Texas",
                gdp: 1307432000,
                color: "white"
            }, {
                state: "New York",
                gdp: 1156500000,
                color: "red"
            }, {
                state: "Florida",
                gdp: 754000000,
                color: "white"
            }, {
                state: "Illinois",
                gdp: 644200000,
                color: "blue"
            }, {
                state: "Pennsylvania",
                gdp: 575600000,
                color: "white"
            }, {
                state: "New Jersey",
                gdp: 497000000,
                color: "red"
            }, {
                state: "Ohio",
                gdp: 483400000,
                color: "white"
            }, {
                state: "Virginia",
                gdp: 427700000,
                color: "blue"
            }, {
                state: "North Carolina",
                gdp: 407400000,
                color: "white"
            }];

            var settingsUSA = {
                title: 'Top 10 GDP US States',
                width: 400,
                height: 250,
                data: chartDataUSA,
                discreteValueField: 'gdp',
                discreteValuesCaption: 'Gross Domestic Product',
                categoryNameField: 'state',
                colorField: 'color',
                font: 'helvetica, calibri',
                depth3D: 15,
                angle: 30,
                marginBottom: 30
            };

            $('#main .chart').barChart(settings);

            $('#back-button').click(function () { showMainView(); });
        });
    </script>
</head>
<body>
    <p><img id="back-button" src="../img/Back.png" style="display: none;" title="to main view" /></p>        
    <div id="main" class="view">
        <h2>Gross Domestic Product</h2>
        <div class="chart"></div>
        <p>Gross domestic product (GDP) is the market value of all officially recognized final goods and services produced within a country in a given period of time. GDP per capita is often considered an indicator of a country's standard of living; GDP per capita is not a measure of personal income (See Standard of living and GDP). Under economic theory, GDP per capita exactly equals the gross domestic income (GDI) per capita (See Gross domestic income).</p>
        <p>GDP is related to national accounts, a subject in macroeconomics. GDP is not to be confused with gross national product (GNP) which allocates production based on ownership.</p>
        <p>GDP was first developed by Simon Kuznets for a US Congress report in 1934. In this report, Kuznets warned against its use as a measure of welfare. After the Bretton Woods conference in 1944, GDP became the main tool for measuring a country's economy.</p>
    </div>
    <div id="USA" style="display: none;" class="view">
        <h2>List of U.S. states by GDP</h2>
        <div class="chart"></div>
        <p>This is a list of U.S. states sorted by their gross state product (GSP). GSP is the state counterpart to a country's gross domestic product (GDP), the most comprehensive measure of national economic activity. The United States Bureau of Economic Analysis (BEA) derives GSP for a state as the sum of the GSP originating in all the industries in the state.</p>
        <p>The BEA defines an industry's GSP, or its value added, as equal to its gross output (sales or receipts and other operating income, commodity taxes, and inventory change) minus its intermediate inputs (consumption of goods and services purchased from other U.S. industries or imported). The BEA's GSP data by industry and state is consistent with gross domestic product (GDP) in the national income and product accounts, and with the GDP by industry accounts.</p>
    </div>
    <div id="China" style="display: none;" class="view">
        <h2>China</h2>
        <div class="chart"></div>
        <p>Gross domestic product (GDP) is the market value of all officially recognized final goods and services produced within a country in a given period of time. GDP per capita is often considered an indicator of a country's standard of living; GDP per capita is not a measure of personal income (See Standard of living and GDP). Under economic theory, GDP per capita exactly equals the gross domestic income (GDI) per capita (See Gross domestic income).</p>
        <p>GDP is related to national accounts, a subject in macroeconomics. GDP is not to be confused with gross national product (GNP) which allocates production based on ownership.</p>
        <p>GDP was first developed by Simon Kuznets for a US Congress report in 1934. In this report, Kuznets warned against its use as a measure of welfare. After the Bretton Woods conference in 1944, GDP became the main tool for measuring a country's economy.</p>
    </div>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Marcelo Ricardo de Oliveira
Software Developer
Brazil Brazil
Marcelo Ricardo de Oliveira is a senior software developer who lives with his lovely wife Luciana and his little buddy and stepson Kauê in Guarulhos, Brazil, is co-founder of the Brazilian TV Guide TV Map and currently works for ILang Educação.
 
He is often working with serious, enterprise projects, although in spare time he's trying to write fun Code Project articles involving WPF, Silverlight, XNA, HTML5 canvas, Windows Phone app development, game development and music.
 
Published Windows Phone apps:
 
 
Awards:
 
CodeProject MVP 2012
CodeProject MVP 2011
 
Best Web Dev article of March 2013
Best Web Dev article of August 2012
Best Web Dev article of May 2012
Best Mobile article of January 2012
Best Mobile article of December 2011
Best Mobile article of October 2011
Best Web Dev article of September 2011
Best Web Dev article of August 2011
HTML5 / CSS3 Competition - Second Prize
Best ASP.NET article of June 2011
Best ASP.NET article of May 2011
Best ASP.NET article of April 2011
Best C# article of November 2010
Best overall article of November 2010
Best C# article of October 2010
Best C# article of September 2010
Best overall article of September 2010
Best overall article of February 2010
Best C# article of November 2009

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141216.1 | Last Updated 25 Mar 2013
Article Copyright 2013 by Marcelo Ricardo de Oliveira
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid