Hello there,
my product manager was thrilled by the StockBarChart you have
http://demos.telerik.com/kendo-ui/financial/index
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)
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)