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. Image for the cookie policy date

Stacking Area Chart with gap produces strange result

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.

2 Replies

RO Rob ONeill 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>



SK Saravana Kumar Kanagavel Syncfusion Team 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 


Loader.
Up arrow icon