I am trying to write simple bar chart. Here is my controller
var test = new List<DataCenterSpaceViewModel>{new DataCenterSpaceViewModel { DataCenterName = "t1", AvailableSpace = 1, ConfiguredSpace = 3, ConsumedSpace = 2 },
new DataCenterSpaceViewModel { DataCenterName = "t2", AvailableSpace = 4, ConfiguredSpace = 5, ConsumedSpace = 2 }
};
return PartialView(test);
Here is my view
<div class="chart-wrapper">
@(Html.Kendo().Chart<SAN.ViewModel.DataCenterSpaceViewModel>()
.Name("DataCenterSpace")
.Title("DataCenter Space")
.Legend(legend => legend.Visible(false))
.DataSource(dataSource => dataSource
.Read(read => read.Action("DataCenterSpace", "Home") )
)
.Series(series =>
{
series.Bar(e => e.ConfiguredSpace).Name("Configured Space");
series.Bar(e => e.ConsumedSpace).Name("Consumed Space");
series.Bar(e => e.AvailableSpace).Name("Available Space");
}
)
.CategoryAxis(axis => axis
.Categories(e=>e.DataCenterName)
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Max(10)
.Line(line => line.Visible(false))
.MajorGridLines(lines => lines.Visible(true))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= series.name #: #= value #")
)
)
</div>
I attached the result
var test = new List<DataCenterSpaceViewModel>{new DataCenterSpaceViewModel { DataCenterName = "t1", AvailableSpace = 1, ConfiguredSpace = 3, ConsumedSpace = 2 },
new DataCenterSpaceViewModel { DataCenterName = "t2", AvailableSpace = 4, ConfiguredSpace = 5, ConsumedSpace = 2 }
};
return PartialView(test);
Here is my view
<div class="chart-wrapper">
@(Html.Kendo().Chart<SAN.ViewModel.DataCenterSpaceViewModel>()
.Name("DataCenterSpace")
.Title("DataCenter Space")
.Legend(legend => legend.Visible(false))
.DataSource(dataSource => dataSource
.Read(read => read.Action("DataCenterSpace", "Home") )
)
.Series(series =>
{
series.Bar(e => e.ConfiguredSpace).Name("Configured Space");
series.Bar(e => e.ConsumedSpace).Name("Consumed Space");
series.Bar(e => e.AvailableSpace).Name("Available Space");
}
)
.CategoryAxis(axis => axis
.Categories(e=>e.DataCenterName)
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Max(10)
.Line(line => line.Visible(false))
.MajorGridLines(lines => lines.Visible(true))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= series.name #: #= value #")
)
)
</div>
I attached the result