Hello,
I am using Asp.net MVC + chart. but chart is not displaying on the screen.
I have used same code as demo.
It is as follows:
@using Syncfusion.EJ2;
@section ControlsSection{
<div class="control-section">
<div style="text-align:center">
@Html.EJS().Chart("container").ChartArea(area => area.Border(ViewBag.ChartBorder)).Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue").Marker(ViewBag.marker).YName("yValue").DataSource(ViewBag.dataSource).Name("Germany").Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue").YName("yValue1").Marker(ViewBag.marker).DataSource(ViewBag.dataSource).Name("England").Add();
}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).MajorGridLines(ViewBag.majorGridLines).MajorGridLines(ViewBag.majorGridLines).IntervalType(Syncfusion.EJ2.Charts.IntervalType.Years).EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).LabelFormat("y")
).PrimaryYAxis(py => py.LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).MajorTickLines(ViewBag.majorTickLines).MinorTickLines(ViewBag.minorTickLines).LineStyle(ViewBag.lineStyle).Interval(20).Minimum(0).Maximum(100)
).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Load("load").Render()
</div>
</div>
<style>
#control-container {
padding: 0px !important;
}
</style>
<script>
var load = function (args) {
var selectedTheme = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Material';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
args.chart.width = ej.base.Browser.isDevice ? "100%" : "60%";
}
</script>
}
Controller code is as follows:
public ActionResult aa()
{
List<LineChartData> chartData = new List<LineChartData>
{
new LineChartData { xValue = new DateTime(2005, 01, 01), yValue = 21, yValue1 = 28 },
new LineChartData { xValue = new DateTime(2006, 01, 01), yValue = 24, yValue1 = 44 },
new LineChartData { xValue = new DateTime(2007, 01, 01), yValue = 36, yValue1 = 48 },
new LineChartData { xValue = new DateTime(2008, 01, 01), yValue = 38, yValue1 = 50 },
new LineChartData { xValue = new DateTime(2009, 01, 01), yValue = 54, yValue1 = 66 },
new LineChartData { xValue = new DateTime(2010, 01, 01), yValue = 57, yValue1 = 78 },
new LineChartData { xValue = new DateTime(2011, 01, 01), yValue = 70, yValue1 = 84 },
};
ViewBag.dataSource = chartData;
ViewBag.chartBorder = new ChartBorder { Color = "transparent" };
ViewBag.majorGridLines = new { width = 0.00001 };
ViewBag.lineStyle = new { width = 0.00001 };
ViewBag.majorTickLines = new { width = 0.00001 };
ViewBag.majorTickLines = new { width = 0.00001 };
ViewBag.marker = new
{
visible = true,
width = 10,
height = 10
};
return View();
}
