3D area chart in jquery

-

Introduction: Hello Guys, “Welcome back” Today, i am here with another one new great article. In this article I explained about the implementation of 3D area Chart using JQuery. In this article I am using the concept of High Charts. For more information you can visit website of High Chart 

For more Update Please follow us on our  Whtsapp Channel

For more Update Please follow us on our  Facebook Page

Implementation: In this article, I am giving example of Yearly of Sales of Samsung Phones from 1940 to 2025. In the Yearly of Sales of Samsung Phones chart I am showing Number of Units Sold in mentioned year from 1940 to 2025. In this article I am giving static data but you can create it dynamically by using the values of Database. For creating it dynamically you need to create the for loop at the time of passing parameters as values to the program. You can check in my list of articles. In my last article I already created chart concept with dynamically data from database. Here I am using for loop. And in the below mentioned article I am passing the values dynamically from the database. You can create area chart dynamically too by following this link. You need to create the for loop to pass the parameters to the chart same created as in below mentioned link

https://usingaspdotnet.blogspot.com/2011/07/visualization-pie-chart-in-aspnet.html

Now here i am writing the complete code of the HTML page. You can copy the whole code and paste the whole code at your HTML page. And enjoy the execution of the whole concept. You can also print the chart; You can also download the JPG or PNG of the chart. There are more options available in this chart. You really enjoy this code. It’s really too fantastic

<!DOCTYPE HTML>
<html>
        <head>
               <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
               <meta name="viewport" content="width=device-width, initial-scale=1">
               <title>3D Area Chart Example</title>
 
               <style type="text/css">
* {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}
 
.highcharts-figure,
.highcharts-data-table table {
    min-width: 320px;
    max-width: 800px;
    margin: 1em auto;
}
 
#container {
    height: 450px;
}
 
.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}
 
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: var(--highcharts-neutral-color-60, #666);
}
 
.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}
 
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}
 
.highcharts-data-table thead tr,
.highcharts-data-table tbody tr:nth-child(even) {
    background: var(--highcharts-neutral-color-3, #f7f7f7);
}
 
.highcharts-description {
    margin: 0.3rem 10px;
}
 
@media (prefers-color-scheme: dark) {
    body {
        background-color: #141414;
        color: #ddd;
    }
    a {
        color: #2caffe;
    }
}
               </style>
        </head>
        <body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/themes/adaptive.js"></script>
 
<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Lorem ipsum" is a placeholder text, commonly used in the printing and publishing industries,
 and in graphic and web design. It's a scrambled, nonsensical version of a Latin text.
    </p>
</figure>
 
 
 
               <script type="text/javascript">
// Data retrieved from http://usingaspdotnet.blogspot.com
Highcharts.chart('container', {
    chart: {
        type: 'area'
    },
    
    title: {
        text: 'Yearly of Sales of Samsung Phones'
    },
    subtitle: {
        text: 'Source: <a href="http://usingaspdotnet.blogspot.com" ' +
            'target="_blank">FAS</a>'
    },
    xAxis: {
        allowDecimals: false,
        accessibility: {
            rangeDescription: 'Range: 1940 to 2025.'
        }
    },
    yAxis: {
        title: {
            text: 'Number of Units Sold'
        }
    },
    tooltip: {
        pointFormat: '{series.name} quantity of stored Product <b>{point.y:,.0f}</b><br/>' +
            'warheads in {point.x}'
    },
    plotOptions: {
        area: {
            pointStart: 1940,
            marker: {
                enabled: false,
                symbol: 'circle',
                radius: 2,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            }
        }
    },
<!-- if you want to create this concept dynamically using database, then you need to pass values here by using for loop -->
    series: [{
        name: 'India',
        data: [
            null, null, null, null, null, 5, 8, 32, 34, 185, 278, 335, 799,
            1098, 1703, 2422, 3692, 5543, 7345, 12298, 18638, 22229, 25540,
            28133, 29463, 31139, 31175, 31255, 29561, 27552, 26008, 25830,
            26516, 27835, 28537, 27519, 25914, 25542, 24418, 24138, 24104,
            23208, 22886, 23305, 23459, 23368, 23317, 23575, 23205, 22217,
            21392, 19008, 13708, 11511, 10979, 10904, 11011, 10903, 10732,
            10685, 10577, 10526, 10457, 10027, 8570, 8360, 7853, 5709, 5273,
            5113, 5066, 4897, 4881, 4804, 4717, 4571, 4018, 3822, 3785, 3805,
            3750, 3708, 3708, 3708, 3708,3870
        ]
    }, {
        name: 'America',
        data: [
            null, null, null, null, null, null, null, null, null,
            1, 5, 25, 50, 120, 150, 200, 426, 660, 863, 1048, 1627, 2492,
            3346, 4259, 5242, 6144, 7091, 8400, 9490, 10671, 11736, 13279,
            14600, 15878, 17286, 19235, 22165, 24281, 26169, 28258, 30665,
            32146, 33486, 35130, 36825, 38582, 40159, 38107, 36538, 35078,
            32980, 29154, 26734, 24403, 21339, 18179, 15942, 15442, 14368,
            13188, 12188, 11152, 10114, 9076, 8038, 7000, 6643, 6286, 5929,
            5527, 5215, 4858, 4750, 4650, 4600, 4500, 4490, 4300, 4350, 4330,
            4310, 4495, 4477, 4489, 4380 5120
        ]
    }]
});
 
               </script>
        </body>
</html>
 

Check the Output of the complete Program

 

Conclusion: In above code, I explained about the implementation of 3D area Charts using jQuery. This code is very helpful for every developer. Bye Bye and take care of you all Developers. We will come back shortly with the new article.

 

Regards

Using Asp.net

 

 

Comments

Post a Comment

Popular posts from this blog

Sending reset password link for one time use only in asp.net

-
Introduction: Hello developers, in this article i will explain that how we can create and send reset password link that will use onle one time in asp.net,after one time use this link will dispose and say that this link is wrong. This is very helpful article for every .net developer Implementation: Create two pages named forgetpassword.aspx and reset.aspx. Paste the code that below am giving, separately inside the both pages. This is a sample program you can change it accoring to your requirement. Inside your table there will be a colimn named code is necessary. Code for forgetpassword.aspx page: < head runat ="server">     < title > Forget Password </ title >     < style type ="text/css">         .style1         {             width : 100% ;  ...
Read more

add delete update inside gridview using store procedure in ASP.NET

-
Image
Introduction: Hello friends, in this article i will explain that how we can insert,delete,update the data in the gridview. Here i am using the store procedure to insert,delete and update the record. With the help of the store procedure the execution of the sql  query make fast. And less  the code of the aspx.cs page. So we can say  the use of the store procedure in the sql server is very important and also very helpful. Implementation: create a new website abb a page named gallery.aspx. Drag and drop the two textboxes, a fileuploader and a button from the toolbox named txt_album_name, txt_caption, fileuploader1 and btn_insert respectively. Here i am giving the complete code for the html page.  Code for .aspx page: < table class ="style1">         < tr >             < td class ="style2">      ...
Read more

Change password using asp.net

-
Image
Introduction : Hello friends, in this article i will explain that how we can change the password after login, in asp.net.This article is very useful for the all the .net developer. Implementation : create a new website add a page. Drag and drop three textboxes and two buttons   from the toolbox inside the   < body > body tag at the .aspx page.   Below   i am giving the complete code for the html page and .cs page.  Code for default.aspx page < div >     < table style =" width : 91% ; height : 97px ; " class ="tbl_reg_form">         < tr >             < td >                 Old Password </ td >             < td >        ...
Read more