javascript - Kendo MVC Bar Charts / Column chart CategoryAxis Fit day -
i'm facing problem while using kendo mvc bar charts / column chart.
in categoryaxis, put date values. if choose ".baseunit(chartaxisbaseunit.days)" option in categoryaxis, date values of month including days there no value.
is there way hide days there no value ?
here have;
<%= html.kendo().chart<dafydac.models.kpis.historyelecconsumpview>() .name("kilovat") .datasource(datasource => datasource .sort(sort => sort.add(model => model.hec_date).ascending()) ) .series(series => { series.column(model => model.hec_power).name("power (kva)"); series.column(model => model.hec_consumption).name("elec. consump. (kvh)"); }) .categoryaxis(axis => axis .date() .labels(l=>l.template("#= kendo.tostring(value, 'dd/mm/yyyy')#")) .title("month") .categories(model => model.hec_date) .color("black") .baseunit(chartaxisbaseunit.days) .axiscrossingvalue(0,40) .labels(labels => labels.rotation(-50)) .majorgridlines(lines => lines.visible(true)) ) .valueaxis(axis => axis.numeric("kva") .title("power (kva)") .labels(labels => labels .format("{0}") ) ) %> here json data:
0: {data_center: "ci1", customer: "mycustomer", hec_date: "02/02/2015", hec_year: 2015,…} 1: {data_center: "ci1", customer: "mycustomer", hec_date: "02/03/2015", hec_year: 2015,…} 2: {data_center: "ci1", customer: "mycustomer", hec_date: "01/04/2015", hec_year: 2015,…} 3: {data_center: "ci1", customer: "mycustomer", hec_date: "30/04/2015", hec_year: 2015,…}
i found solution. not using date() method inside categoryaxis(). consider date values "string" values. format date , display it. have sorted date values (ascending order), handle in server side.
// server side
public actionresult elecconsumpercustomer_read([datasourcerequest] datasourcerequest request, string customer, string datacenter, string year) { list < historyelecconsumpview > list = historyecrepository.instance.gethecdatapercustomer(customer, datacenter); return json(list.where(ec => ec.hec_date.year.tostring() == year).orderby(ec => ec.hec_date).thenby(ec => ec.equipment).tolist(), jsonrequestbehavior.allowget); }// client side
<%= html.kendo().chart < dafydac.models.kpis.historyelecconsumpview > () .name("kilovat").title(title => { title.text("kilovat data").font("16px open sans, sans-serif").color("black"); title.position(charttitleposition.bottom); }) .legend(legend => legend.position(chartlegendposition.right).font("open sans, sans-serif")) .datasource(datasource => datasource.sort(sort => sort.add(model => model.hec_date).ascending())) .series(series => { series.column(model => model.hec_power).name("power (kva)").color("#17c809").axis("kva").labels(l => { l.visible(true); l.background("transparent"); }); //.categoryfield("date"); series.column(model => model.hec_consumption).name("elec. consump. (kvh)").color("#147c0c").axis("kvh").labels(l => { l.visible(true); l.background("transparent"); }); //.categoryfield("date"); }) .chartarea(chartarea => { chartarea.background("#f3f5f7"); }) .categoryaxis(axis => axis .labels(l => l.template("#= kendo.tostring(todate(value), 'd/m/yy') # (#= dataitem.equipment #) ").font("open sans, sans-serif")) .title("month") .categories(model => model.hec_date) .color("black") .axiscrossingvalue(0, 40) .labels(labels => labels.font("open sans, sans-serif").rotation(-25)) .majorgridlines(lines => lines.visible(true)) ) .theme("metro") .valueaxis(axis => axis.numeric("kva").title(t => t.text("power (kva)").font("16px open sans, sans-serif")).labels(labels => labels.font("open sans, sans-serif").format("{0}")).color("#17c809")) .valueaxis(axis => axis.numeric("kvh").title(t => t.text("elec. consump. (kvh)").font("16px open sans, sans-serif")).labels(labels => labels.font("open sans, sans-serif").format("{0}")).color("#147c0c")) .pdf(pdf => { pdf.date(datetime.now); }) .tooltip(tooltip => tooltip.font("open sans, sans-serif").visible(true).format("{0:n2}")) %>
Comments
Post a Comment