X-Axis with Date field format

[kalpa serashiya]

Hi

I want to show Date values on PrimaryX-Axis.

I tried this but not able to show only date value on x-axis.

.PrimaryXAxis(pr => pr.Title(tl => tl.Text(SyncFusionBarChartProp.xAxisTitle)).ValueType(AxisValueType.Datetime))

Through this I am assigning values through database.

.DataSource((System.Collections.IEnumerable)ViewBag.datasource)

Thanks.

[Jayavigneshwaran]

Hi Kalpa,

We have analyzed this and made a simple chart sample with date time axis.

Find it from the below location.
MvcApplication47.zip

The below screenshot shows the output of the attached sample

The below code snippet shows the labelFormat property

[CSHTML]

.PrimaryXAxis(pr=>pr.Title(tl=>tl.Text("Date")).ValueType(AxisValueType.Datetime).LabelFormat("MM/dd/yyyy"))

Where,

MM - > month (08),

dd -> day (20),

yyyy -> year (1990)

And also the below link shows a date time axis sample

Link: http://mvc.syncfusion.com/demos/web/chart/datetimeaxis

This below mentioned link will help in understanding about the property “valueType”

Link: http://help.syncfusion.com/UG/JS_CR/ejChart.html#primaryXAxis->valueType

Note: Kindly ensure the values passed through data source to x is of type data time.

Please let us know if you have any concern.

Thanks,

Jayavigneshwaran

[kalpa serashiya]

Hi,

I tried your code but getting this javascript error.

"Unhandled exception at line 913, column 2545147 in eval code

0x800a138f - JavaScript runtime error: Unable to get property 'interval' of undefined or null reference"

Below you can see my cshtml page where I am setting the various values by using model object.

Can you just make the changes in this so that I can plot date on X-Axis

@using Syncfusion.JavaScript.DataVisualization

@using _barColumnChartSyncFusionNew.Models

　

@{

var SyncFusionBarChartProp = (_barColumnChartSyncFusionNewModel)ViewData["BarSyncFusion"];

var varfoldercountData = "";

}

<meta charset="utf-8">

@*<link rel='nofollow' href="~/ejThemes/ej.widgets.core.min.css" rel="stylesheet" type="text/css" />

<link rel='nofollow' href="~/ejThemes/default-theme/ej.widgets.all.min.css" rel="stylesheet" id="stylesheet" type="text/css" />

<link rel='nofollow' href="~/ejThemes/ej.responsive-latest.css" rel="stylesheet" type="text/css" />*@

<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>

<script src="~/Scripts/SyncFusionChart/jquery.globalize.js" type="text/javascript"></script>

<script src="~/Scripts/SyncFusionChart/jsrender.min.js" type="text/javascript"></script>

<script src="~/Scripts/SyncFusionChart/ej.web.all.min.js" type="text/javascript"></script>

<script src="~/Scripts/cultures/globalize.culture.en-US.min.js" type="text/javascript"></script>

<script src="~/Scripts/SyncFusionChart/jquery.easing-1.3.min.js" type="text/javascript"></script>

<script src="~/Scripts/SyncFusionChart/ej.unobtrusive.min.js" type="text/javascript"></script>

<script>

function htmlDecode(value) {

return $('<div/>').html(value).text();

}

</script>

<div id="Tooltip" style="display: none;background-color:white;border:2px solid black;">

<span style='left: 8px; top: 8px; color: rgb(51, 51, 51); font-family: "Lucida Grande", "Lucida Sans Unicode",Verdana, Arial, Helvetica, sans-serif;font-size: 11px; margin-top: 0px; margin-left: 0px;white-space: nowrap; position: absolute;border:1px solid blue;' zindex="1">

<span style="font-size: 10px;">#point.x#</span>

<table>

<tbody>

<tr>

<td style="padding: 0px;">#series.name#: </td>

<td style="padding: 0px;"><b>#point.y#</b></td>

</tr>

</tbody>

</table>

</span>

</div>

<div class="row">

@(Html.EJ().Chart("container")

.PrimaryXAxis(pr => pr.Title(tl => tl.Text(SyncFusionBarChartProp.xAxisTitle)).ValueType(AxisValueType.Datetime).LabelFormat("MM/dd/yyyy"))

.PrimaryYAxis(pr => pr.Title(tl => tl.Text(SyncFusionBarChartProp.yAxisTitle)).ValueType(AxisValueType.Double).LabelFormat("{value}"))

.CommonSeriesOptions(cr => cr.EnableAnimation(true).Tooltip(tt => tt.Visible(true).Template("Tooltip"))

.Marker(mr => mr.DataLabel(dt => dt.Visible(SyncFusionBarChartProp.ShowMarker).Angle(0).TextPosition(TextPosition.Top).Offset(20)

.Font(fn => fn.Color("#282828").Size("13px").FontFamily("Segoe UI")))))

.Series(sr =>

{

sr.Name(SyncFusionBarChartProp.yAxisTitle)

.Type(SyncFusionBarChartProp.ChartType)

.DataSource((System.Collections.IEnumerable)ViewBag.datasource)

.XName("XAxis")

.YName("YAxis")

.Add();

})

.Load("loadTheme")

.DisplayTextRendering("OndataLabel")

.CanResize(true)

.Title(t => t.Text(SyncFusionBarChartProp.ChartTitle))

.Legend(lg => { lg.Visible(SyncFusionBarChartProp.ShowLegend).Position(LegendPosition.Bottom).Alignment(Syncfusion.JavaScript.DataVisualization.TextAlignment.Center); })

)

</div>

　

@(Html.EJ().ScriptManager())

<script>

$(document).ready(function () {

});

function OndataLabel(sender) {

sender.data.location.x = sender.data.location.x + 40;

sender.data.location.y = sender.data.location.y + 40;

}

</script>

<style class="cssStyles">

</style>

Thanks.

[Jayavigneshwaran]

Hi Kalpa,

We have analyzed this. Replicated the scenario show in your code in our sample.

But we are not able to reproduce the reported issue. We have attached sample with date time axis.

Find it from the below location.
MvcApplication47.zip

If you still face any concern, kindly revert back us by modifying the attached sample to reproduce the issue.

Or else share you sample along with data source and replication procedure.

This would be helpful for us to solve the issue sooner.

Please let us know if you have any concern.

Thanks,

Jayavigneshwaran