Creating a Line Chart with a min max range area dinamically

[Wellington]

Hello,

Is there a way to create a Line chart that shows a product price variation and calculates min-max values in order to create a range area on the fly? Regarding the min-max values, they are calculated every week as the arithmetic mean of the last 5 weeks. I've attached a example of how I it's supposed to be (the week value can be out of the range area).

I have been trying to merge Line and Range Area charts (on dojo) without success. This is my last try, but with static min-max values, I still have to figure out how to calculate the values dinamically:

<script>
        function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "Product price"
                },
                legend: {
                    position: "bottom"
                },
                chartArea: {
                    background: ""
                },
                series: [{
                    type: "rangeArea",
                    data: [[5, 11], [5, 13], [7, 15], [10, 17]]
                }], series: [{
                    name: "Product A",
                    data: [7, 16, 13, 12, 10]
                },{
                    name: "Product B",
                    data: [6, 9, 13, 14, 12]
                },{
                    name: "Product C",
                    data: [3, 5, 14, 12, 13]
                }], seriesDefaults: {
                    type: "line",
                    style: "smooth"
                },valueAxis: {
                    labels: {
                        format: "${0:n2}"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: -10
                },
                categoryAxis: {
                    categories: ["Week11", "Week12", "Week13", "Week14", "Week15"],
                    majorGridLines: {
                        visible: false
                    },
                    labels: {
                        rotation: "auto"
                    }
                },
                tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= series.name #: #= value #"
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>

Regards,

Wellington

[Stefan]

Hello, Wellington,

Thank you for the code.

I can suggest checking the following example demonstrating how to have Area axis and line axis on the same Chart:

https://demos.telerik.com/kendo-ui/line-charts/multiple-axes

As for the dynamic min and max, I can suggest once the data is received, to loop over it and retrieve the min and max value contained in it.

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Wellington]

Problem solved. I was creating the series twice and the second was overlapping the first. Putting the range area serie and the line ones together worked. Thank you.