This is a migrated thread and some comments may be shown as answers.

Normal area series and reversed area series in one chart is not working

1 Answer 87 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Oliver
Top achievements
Rank 1
Oliver asked on 08 May 2017, 02:28 PM

Currently I try to add three area series within one chart. Two area series should be rendered from top to bottom, and one from bottom to top. In my example "grenze3" should be rendered from bottom to top.

This is my html code:

@{
    ViewBag.Title = "Home Page";
}
 
<div id="example">
 
    <div class="demo-section k-content wide">
        <div id="chart"></div>
    </div>
    <script>
        function createChart() {
            $("#chart").kendoStockChart({
                dataSource: {
                    transport: {
                        read: {
                            url: "../Content/spain-electricity.json",
                            dataType: "json"
                        }
                    },
                    schema: {
                        model: {
                            fields: {
                                year: { type: "date" }
                            }
                        }
                    }
                },
                title: {
                    text: ""
                },
                dateField: "year",
                legend: {
                    visible: true,
                    position: "top"
                },
                seriesDefaults: {
                    type: "line",
                    markers: {
                        visible: false
                    }
                },
                series: [{
                    field: "nuclear",
                    name: "test 1",
                    axis: "bottom"
                },
                {
                    field: "hydro",
                    name: "test 2",
                    axis: "bottom"
                },
                {
                    field: "wind",
                    name: "test 3",
                    axis: "bottom"
                },
                {
                    field: "grenze2",
                    name: "Grenze 2",
                    type: "area",
                    missingValues: "interpolate",
                    axis: "top",
                    line: {
                        style: "step"
                    }
                },
                {
                    field: "grenze",
                    name: "Grenze",
                    type: "area",
                    missingValues: "interpolate",
                    axis: "top",
                        line: {
                            style: "step"
                        }
                },
 
                {
                    field: "grenze3",
                    name: "Grenze 3",
                    type: "area",
                    missingValues: "interpolate",
                    axis: "bottom",
                        line: {
                            style: "step"
                        }
                },
                ],
                valueAxes: [
 
                    {
                        name: "top",
                        labels: {
                            visible: true,
                            format: "{0}"
                        },
                        reverse: true,
                        visible: true,
                        axisCrossingValues: 70000,
                        min: 70000,
                        max: 0
                    },
                    {
                        name: "bottom",
                        labels: {
                            visible: true,
                            format: "{0}"
                        },
                            visible: true,
                        reverse: false,
                        min: 0,
                        max: 70000
                    },
                ],
                categoryAxis: {
                    field: "year",
                    type: "date",
                    labels: {
                        rotation: 0
                    },
                    crosshair: {
                        visible: true
                    },
                    majorGridLines: {
                        visible: false
                    },
                },
                valueAxis: {
                    labels: {
                        format: "N0"
                    },
                    majorUnit: 10000,
                    //plotBands: [{
                    //    from: 0,
                    //    to: 10000,
                    //    color: "#c00",
                    //    opacity: 0.3
                    //}, {
                    //    from: 70000,
                    //    to: 60000,
                    //    color: "#c00",
                    //    opacity: 0.3
                    //}, {
                    //    from: 70000,
                    //    to: 55000,
                    //    color: "#0066ff",
                    //    opacity: 0.3
                    //}],
                },
                tooltip: {
                    visible: true,
                    shared: true,
                    format: "N0"
                },
                navigator: {
                    series: [{
                        field: "nuclear",
                        name: "Hauptpresse"
                    },
                    {
                        field: "hydro",
                        name: "Dehner 1"
                    },
                    {
                        field: "wind",
                        name: "Dehner 2"
                    },
                    {
                        field: "grenze",
                        name: "Grenzwert"
                    }],
                    select: {
                        from: "2016/12/01",
                        to: "2017/10/07"
                    },
                    categoryAxis: {
                        labels: {
                            rotation: "auto"
                        }
                    }
                }
            });
        }
 
        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
 
</div>

 

This is my json data file:

[
  {
    "grenze": 60000,
    "grenze2": 55000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2016/12/01",
    "unit": "GWh",
    "solar": 2578,
    "hydro": 26112,
    "wind": 32203,
    "nuclear": 58973
  },
  {
    "grenze": 60000,
    "grenze2": 55000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/01/01",
    "unit": "GWh",
    "solar": 508,
    "hydro": 30522,
    "wind": 27568,
    "nuclear": 55103
  },
  {
    "grenze": 60000,
    "grenze2": 55000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/02/01",
    "unit": "GWh",
    "solar": 119,
    "hydro": 29831,
    "wind": 23297,
    "nuclear": 60126
  },
  {
    "grenze": 60000,
    "grenze2": 65000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/03/01",
    "unit": "GWh",
    "solar": 41,
    "hydro": 23025,
    "wind": 21176,
    "nuclear": 57539
  },
  {
    "grenze": 60000,
    "grenze2": 65000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/04/01",
    "unit": "GWh",
    "solar": 56,
    "hydro": 34439,
    "wind": 15700,
    "nuclear": 63606
  },
  {
    "grenze": 60000,
    "grenze2": 65000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/05/01",
    "unit": "GWh",
    "solar": 41,
    "hydro": 43897,
    "wind": 12075,
    "nuclear": 61875
  },
  {
    "grenze": 60000,
    "grenze2": 55000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/06/01",
    "unit": "GWh",
    "solar": 30,
    "hydro": 26270,
    "wind": 9342,
    "nuclear": 63016
  },
  {
    "grenze": 60000,
    "grenze2": 55000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/07/01",
    "unit": "GWh",
    "solar": 24,
    "hydro": 43864,
    "wind": 6759,
    "nuclear": 63708
  },
  {
    "grenze": 60000,
    "grenze2": 55000,
    "grenze3": 30000,
    "country": "Spain",
    "year": "2017/08/01",
    "unit": "GWh",
    "solar": 18,
    "hydro": 31807,
    "wind": 4727,
    "nuclear": 62206
  }
]

 

In theory plot bands would also work, but from my understanding they do not support different values as you see it in the grenze2 series.

1 Answer, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 10 May 2017, 08:13 AM
Hi Oliver,

Thank you for reporting this - it appears there is an issue in the current version of Kendo UI Area Chart. I logged the case for further investigation and fixing - you could try its progress here: 

https://github.com/telerik/kendo-ui-core/issues/3174


Regards,
Iliana Nikolova
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Charts
Asked by
Oliver
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Share this question
or