Combination of to Charts, draw-area set size

5 posts, 1 answers
  1. Mathias
    Mathias avatar
    15 posts
    Member since:
    Oct 2014

    Posted 20 Jan 2015 Link to this post

    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)




  2. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 22 Jan 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Mathias
    Mathias avatar
    15 posts
    Member since:
    Oct 2014

    Posted 22 Jan 2015 in reply to T. Tsonev Link to this post

    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?





  4. Mathias
    Mathias avatar
    15 posts
    Member since:
    Oct 2014

    Posted 22 Jan 2015 Link to this post

    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
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 26 Jan 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top