We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

X-Axis with Date field format

Thread ID:

Created:

Updated:

Platform:

Replies:

117973 Jan 15,2015 09:41 AM UTC Jan 21,2015 03:40 AM UTC ASP.NET MVC 3
loading
Tags: Chart
kalpa serashiya
Asked On January 15, 2015 09:41 AM UTC

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 [Syncfusion]
Replied On January 19, 2015 06:34 AM UTC

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
Replied On January 19, 2015 12:01 PM UTC

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 [Syncfusion]
Replied On January 21, 2015 03:40 AM UTC

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



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;