We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Stacking Area Chart with gap produces strange result

Thread ID:

Created:

Updated:

Platform:

Replies:

125008 Jul 14,2016 07:47 AM UTC Jul 18,2016 12:00 PM UTC JavaScript 2
loading
Tags: ejChart
Rob ONeill
Asked On July 14, 2016 07:47 AM UTC

Hi,
We have a chart with a DateTime x-axis and values on the y-axis. In our data we can have gaps between dates that we don't want to show. We add a datapoint with a null value which is fine for all charts except a StackingArea chart.

See example ... http://jsplayground.syncfusion.com/Sync_qlkbmzkw

Can anything be done about this ?

Cheers ... Rob.

Rob ONeill
Replied On July 14, 2016 08:01 AM UTC

Sorry examples don't seem to be saving in the playground when changes are made. Below is the full html code

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>  

                <meta name="viewport" content="width=device-width, initial-scale=1.0">

                <link rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

    <link rel='nofollow' href="http://cdn.syncfusion.com/14.2.0.26/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />

    <link rel='nofollow' href="14.2.0.26/themes/web/content/default.css" rel="stylesheet" />

    <link rel='nofollow' href="14.2.0.26/themes/web/content/default-responsive.css" rel="stylesheet" />

 

    <script type="text/javascript" src="http://cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js"></script>   

                 

    <script type="text/javascript" src="http://cdn.syncfusion.com/14.2.0.26/js/web/ej.web.all.min.js"></script>

                <script src="14.2.0.26/scripts/web/properties.js" type="text/javascript"></script>

 </head>

 <body>

                <div class="content-container-fluid">     

        <div class="row">                

            <div class="cols-sample-area">                                                                                    

                                                                <div id="container"></div>                                                                                            

            </div>                                                      

        </div>

                </div>

 <script type="text/javascript" language="javascript">

                $(function ()

                {

        $("#container").ejChart(

        {

            //Initializing Primary X Axis             

                                                primaryXAxis:

            {

                title: {text: "Sales Across Years"},

                range: {min: new Date(2000, 6, 1), max: new Date(2010, 6, 1), interval: 1},

                intervalType: 'Years',

                labelFormat: 'MMM-yyyy',

                valueType: 'datetime'

                                                },

                                               

                                                //Initializing Primary Y Axis          

            primaryYAxis:

            {

                title: {text: "Sales Amount in millions(USD)"},

                labelFormat: '${value}',

                rangePadding: 'additional'

            },

                                               

                                                //Initializing Common Properties for all the series

                                                commonSeriesOptions:

                                                {

                                                                tooltip:

                                                                {

                                                                                visible: true

                                                                },

                                                    type: 'stackingarea',

              opacity: 0.7

                                                },

                                               

                                                //Initializing Series

            series:

                                                [

                                                                {

                    points: [{ x: new Date(2000, 06, 11), y: 10 },

                             { x: new Date(2002, 03, 07), y: 30 },

                             { x: new Date(2002, 03, 08), y: null },

                                                                                                                 { x: new Date(2004, 03, 06), y: 15 },

                             { x: new Date(2006, 03, 30), y: 65 },

                                                                                                                 { x: new Date(2008, 03, 08), y: 90 },

                             { x: new Date(2010, 03, 08), y: 85 }],

                                                                                name: 'Sales 1',

                                                                                enableAnimation : true,

                                                                                marker:

                    {

                        shape: 'circle',

                                                                                                size:

                        {

                            height: 10, width: 10

                        },

                        visible: true

                    },

                    border:{width: 3},

                                                                                tooltip :{ format: " Date : #point.x#  <br/> Profit : #point.y# "}

                                                                },

                                                                {

                    points: [{ x: new Date(2000, 06, 11), y: 20 },

                             { x: new Date(2002, 03, 07), y: 40 },

                             { x: new Date(2002, 03, 08), y: null },

                                                                                                                 { x: new Date(2004, 03, 06), y: 25 },

                             { x: new Date(2006, 03, 30), y: 85 },

                                                                                                                 { x: new Date(2008, 03, 08), y: 110 },

                             { x: new Date(2010, 03, 08), y: 95 }],

                                                                                name: 'Sales 1',

                                                                                enableAnimation : true,

                                                                                marker:

                    {

                        shape: 'circle',

                                                                                                size:

                        {

                            height: 10, width: 10

                        },

                        visible: true

                    },

                    border:{width: 3},

                                                                                tooltip :{ format: " Date : #point.x#  <br/> Profit : #point.y# "}

                                                                }

                                                ],

                                                canResize: true,

                                                load:"loadTheme",

                                                title: { text: 'Average Sales Comparison'},

            size: { height: "600"},

            legend: { visible: false}

        });

    });

 </script>

 </body>

</html>


Saravana Kumar Kanagavel [Syncfusion]
Replied On July 18, 2016 12:00 PM UTC

Hi Rob, 
 
Sorry for inconvenience caused.  
We have analyzed your query and consider this is an issue. So we have logged an issue report on “The stacking area chart does not rendering properly when it has null value” for this. For more details regarding this, kindly follow up the incident which we have created under your account. 
 
Please let us know if you have concern. 
 
Regards, 
Saravana Kumar K 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;