[Solved] Combination of to Charts, draw-area set size

[Mathias]

Hello there, 

my product manager was thrilled by the StockBarChart you have
http://demos.telerik.com/kendo-ui/financial/index

<kendo:chart name="chart2">
                            <kendo:chart-chartArea height="550" width="875" />
                            <kendo:chart-title text="Verbrauchsverlauf in €/Jahr" />
                            <kendo:chart-legend position="top" />
                            <kendo:chart-series>
                                <kendo:chart-seriesItem type="line" field="entgelt" name="Entgelt" />
                                <kendo:chart-seriesItem type="line" field="tarif" name="Tarif" />
                            </kendo:chart-series>
                            <kendo:chart-categoryAxis>
                                <kendo:chart-categoryAxisItem field="verbrauch" >
                                    <kendo:chart-categoryAxisItem-labels rotation="-90" format="{0:N0}"/>
                                    <kendo:chart-categoryAxisItem-crosshair visible="false" />
                                </kendo:chart-categoryAxisItem>
                            </kendo:chart-categoryAxis>
                            <kendo:chart-valueAxis>
                                <kendo:chart-valueAxisItem>
                                    <kendo:chart-valueAxisItem-labels format="{0:N0}" />
                                </kendo:chart-valueAxisItem>
                            </kendo:chart-valueAxis>
                                <kendo:chart-tooltip visible="true"
                                    template="<table class='hover' border='0'> <tr><td>Verbrauch     </td><td class='tar'>#=kendo.toString(data.dataItem.verbrauch,'n2')# kWh</td></tr><tr><td>Tarif</td><td class='tar'>#=data.dataItem.tarif# €</td></tr><tr><td>Entgelt      </td><td class='tar'> #=data.dataItem.entgelt# €</td></tr> <tr><td>Differenz</td><td class='tar'>#=data.dataItem.diff# €</td></tr></table>"
                                    format="N2" />
                        </kendo:chart>

                        <p style="padding-top:20px;padding-left:324px;">Verbrauch von <span id="vvon">0</span> bis <span id="vbis">0</span> kWh</p>

                        <kendo:chart name="suchchart" selectEnd="onSelectEnd" select="onSelect">
                            <kendo:chart-chartArea height="142" width="875" />
                            <kendo:chart-title text="Filter" visible="false"/>
                            <kendo:chart-legend visible="false"></kendo:chart-legend>
                            <kendo:chart-series>
                                <kendo:chart-seriesItem type="column" style="smooth" field="diff"   color="red"/>
                            </kendo:chart-series>
                            <kendo:chart-categoryAxis>
                                <kendo:chart-categoryAxisItem field="verbrauch">
                                    <kendo:chart-categoryAxisItem-labels visible="false" />
                                </kendo:chart-categoryAxisItem>
                            </kendo:chart-categoryAxis>
                            <kendo:chart-valueAxis>
                                <kendo:chart-valueAxisItem >
                                    <kendo:chart-valueAxisItem-labels format="{0:N0}"  />
                                </kendo:chart-valueAxisItem>
                            </kendo:chart-valueAxis>
                            <kendo:chart-tooltip visible="true"
                                    template="<table class='hover' border='0'><tr><td>Entgeltwert          </td><td class='tar'> #=data.dataItem.entgelt# €</td></tr> <tr><td>Tarifwert</td><td class='tar'>#=data.dataItem.tarif# €</td></tr> <tr><td>Differenz</td><td class='tar'>#=data.dataItem.diff# €</td></tr></table>"
                                    format="N2" />
                        </kendo:chart>

function onSelectEnd(e) {
        /// e.sender.refresh();
        var categories = e.axis.categories;
        $("#verlaufsform2 input[name=verbrauchvon]").val(categories[e.from]);
        $("#verlaufsform2 input[name=verbrauchbis]").val(categories[e.to]);
        $("form#verlaufsform2").submit();
    }
    function onSelect(e) {
        /// e.sender.refresh();
        var categories = e.axis.categories;
        $("#vvon").html(categories[e.from]);
        $("#vbis").html(categories[e.to]);
        //$("form#verlaufsform2").submit();
    }

$("form#verlaufsform").ajaxForm({
        success : function(responseText, statusText, xhr, $form) {
            //eval("t=" + responseText);
            //meinTarif = t.response[0];
            $.get("fncalc.jsp?action=verlauf", function(e) {
                var b = "";
                //
                eval("b=" + e);
                var werte = new Array();
                var minVal = 99999999999999;
                var maxVal = 0;

                for (var i = 0; i < b.length; i++) {

                    werte.push((b[i].response[0]));
                    var v = parseInt(b[i].response[0].verbrauch);
                    if (v < minVal) {
                        minVal = v;
                    }
                    if (v > maxVal) {
                        maxVal = v;
                    }
                }
                var dataSource = new kendo.data.DataSource({
                    data : werte
                });
                //  $("#chart2").data("kendoChart").setDataSource(dataSource);
                //  $("#chart2").data("kendoChart").refresh();
                $("#suchchart").data("kendoChart").setDataSource(dataSource);
                $("#suchchart").data("kendoChart").options.categoryAxis.select = {
                    from : 0,
                    to : werte.length
                };
                //$("#suchchart").data("kendoChart").options.valueAxis.type = "log";
                //$("#suchchart").data("kendoChart").options.series[0].style = "smooth";
                $("#suchchart").data("kendoChart").refresh();
                $("form#verlaufsform2 input[name=verbrauchvon]").val(minVal);
                $("form#verlaufsform2 input[name=verbrauchbis]").val(maxVal);
                $("#vvon").html(minVal);
                $("#vbis").html(maxVal);
                $("form#verlaufsform2").submit();
                //  console.log(werte);
            });
            //  $("form#rankingForm").submit();
        }
    });

its about "electricity tariffs" in germany
it works like that:
on init, i read all data from min consumption to maxconsumption of the tariff and show the difference to an other traiff in the lower chart
in the upper chart i show the trends of the two tariffs

when i select an section of the cunsumption in the lower chart, the upper chart refeshes with the data of the section

The Problem

i can only set the outer size of a chart, when i want to make certain, that both the left axes are the same line, no matter what the axis labels are,
i need a possibility to set the inner size of the data area and an outer size for the lables

is there a possibility?

with regards
Mathias Eberlein
(sry for my bad english)

[T. Tsonev]

Hi,

The chart panes look like a good fit for this scenario.
Their main purpose is exactly to allow sub-charts to align properly.

I've prepared a short snippet based on your code.
Notice how the series are associated with their dedicated axes. In turn the axes are associated with their respective panes.

Does this make sense?

Regards,
T. Tsonev
Telerik

 

 

[Mathias]

Hi,

seems to be one step further, 
as you can i see in my code above i initially developed 2 charts, your solution is putting both charts into 1 single chart.
But i used a datasource object for both my charts. And the datasource of the upper chart is changing as i change the selection in the lower chart. Is there a way to set a different datasource per pane?

[Mathias]

Okay, i found a way with your help,

i set the values for the lower chart  without a datasource -

var werte2 = new Array();
        var werte3= new Array();
        var minVal = 99999999999999;
        var maxVal = 0;
        for (var i = 0; i < b.length; i++) {
            werte.push((b[i].response[0]));
            werte2.push(b[i].response[0].diff);
            werte3.push(b[i].response[0].verbrauch);
            var v = parseInt(b[i].response[0].verbrauch);
            if (v < minVal) {
                minVal = v;
            }
            if (v > maxVal) {
                maxVal = v;
            }
        }
        var dataSource = new kendo.data.DataSource({
            data : werte
        });
            //$("#chart2").data("kendoChart").setDataSource(dataSource);
            //$("#chart2").data("kendoChart").refresh();

            $("#chart2").data("kendoChart").options.categoryAxis[1].select = {
                from : 0,
                to : werte3.length
            };

            myselectionvon=0;
             myselectionbis=werte3.length;
            $("#chart2").data("kendoChart").options.categoryAxis[1].dataItems=werte3;
            $("#chart2").data("kendoChart").options.categoryAxis[1].categories=werte3;

had the odd behavior, that calling refresh  kills the selection, so i ended up in setting the selection on every redraw

function onSelectEnd(e) {
    /// e.sender.refresh();
    var categories = e.axis.categories;
     myselectionvon=e.from;
     myselectionbis=e.to;

    $("#verlaufsform2 input[name=verbrauchvon]").val(categories[e.from]);
    $("#verlaufsform2 input[name=verbrauchbis]").val(categories[e.to]);
    $("form#verlaufsform2").submit();
}

var myselectionvon=0;
var myselectionbis=0;


$("form#verlaufsform2").ajaxForm({
        success : function(responseText, statusText, xhr, $form) {
            //eval("t=" + responseText);
            //meinTarif = t.response[0];
            $.get("fncalc.jsp?action=verlauf", function(e) {
                var b = "";
                //
                eval("b=" + e);
                var werte = new Array();
                var minVal = 99999999999999;
                var maxVal = 0;
                for (var i = 0; i < b.length; i++) {
                    werte.push((b[i].response[0]));
                    var v = b[i].response[0].verbrauch;
                    if (v < minVal) {
                        minVal = v;
                    }
                    if (v > maxVal) {
                        maxVal = v;
                    }
                }
                var dataSource = new kendo.data.DataSource({
                    data : werte
                });
                $("#chart2").data("kendoChart").options.categoryAxis[1].select = {
                    from : myselectionvon,
                    to : myselectionbis
                };
                $("#chart2").data("kendoChart").setDataSource(dataSource);
                $("#chart2").data("kendoChart").refresh();
            });
        }
    });

but now looks and behaves the way i wanted to

thx
Mathias

[T. Tsonev]

Hi,

I'm glad to hear this worked out in the end.

Not sure why the selection is getting cleared, we'll look into this.

Regards,
T. Tsonev
Telerik