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.
Hi Bharat,
We have analysed the reported query. Please find the response for the query.
Our chart control is able to render by different set of datasets which can be achieved by using the below code snippet.
Code Snippet [MVC]:Index.cshtml
· Select DataSet by onchange event.
<select id="selectDataSource" onchange="selectOption(this)">
<option value="None">Default Data Setoption>
<option value="DataSet1">DataSet1option>
<option value="DataSet2">DataSet2option>
<option value="DataSet3">DataSet3option>
select>
function selectOption(sender) {
var dataSet = document.getElementById("selectDataSource").value;
var data;
if (dataSet == "DataSet1") {
data = dataSet1();
AddChartSeries(data);
} else if (dataSet == "DataSet2") {
data = dataSet2();
AddChartSeries(data);
} else if (dataSet == "DataSet3") {
data = dataSet3();
AddChartSeries(data);
}
else if (dataSet == "None") {
data = defaultdata();
AddChartSeries(data);
}
}
//Function for Bind DataSets
function AddChartSeries(dataset) {
var chart = $("#container").ejChart("instance");
chart.model.initSeriesRender = true;
chart.model.series[0] = {};
chart.model.series[0].dataSource = dataset.open;
chart.model.series[0].xName = "XValue";
chart.model.series[0].yName = "YValue";
chart.model.series[0].type = "Line";
chart.redraw();
}
Please find the following steps to achieve your requirement.
· if you Select DataSet1 in the Add DataSet drop down list then chart series render by using DataSet1 Points.
Screenshot:
· If you Select DataSet2 in the Add DataSet drop down list then chart series render by using DataSet2 Points. And also previous DataSet1 points removed, chart render by DataSet2 points.
Screenshot:
· We haven’t support for X-Axis scroll but you can achieve this by zooming property. Once zoomed the chart click on pan button then drag the chart you can easily visualize the close points and also axis labels.
Zooming(zm => zm.Enable(true))
Screenshot:
Please find the sample in the following location.
Sample Link:
WebApplication1.zip
Please let us know if you require further assistance on this.
Thanks,
Vinothkumar Arumugam.
Hi Bharat,
We have analyzed your query and this can be achieved by setting JSON dataset to the chart datasource using AngularJS directive as like in below code snippet.
Code Snippet [MVC]: Index.cshtml
· Plot a data source from JSON
$scope.dataSource = jasonData[$scope.selectedItem].DataSet.Points;
Screenshot:
· You can also clear data source as like below.
var chart = $("#chartContainer").ejChart("instance");
chart.model.series[0].dataSource = null;
chart.model.series[0].points = [];
chart.model.legend.visible = false;
chart.redraw();
Screenshot:
Find below sample link to download the sample.
Sample Link:
TreeGridMVC_Angular.zip
Please let us know if you have any concern.
Thanks,
Vinothkumar Arumugam.
Hi Bharath,
We have analyzed your query and this can be achieved by using ejDraggable control .Which is used to drag DOM elements easily in document.
You can achieve your requirements by applying following code snippet.
Code Snippet [MVC]:Index.cshtml
· Creating chart container element as follows, each container has one chart.
@(Html.EJ().Chart("chartcontainer1")
.Series(sr =>
{
sr.Points(pt =>
{
pt.X("Jan").Y(3.03).Add();
pt.X("Feb").Y(2.48).Add();
pt.X("Mar").Y(3.23).Add();
pt.X("Apr").Y(3.15).Add();
pt.X("May").Y(4.13).Add();
}).Name("Precipitation").Type(SeriesType.Column).Add();
}).Size(sz=>sz.Height("250").Width("300"))
)
· Initializing ejDraggable control as like below. In which helper is an event which it is triggered when dragged the DOM element.
$("#chartcontainer1").ejDraggable({
helper: function () {
return $('#chartcontainer1').appendTo(document.body);
}
});
Following screenshot shows that.
· Before Dragging, column chart first then bar and pie chart placed.
· After dragging the column chart, Chart has been rearranged as follows.
We have prepared a sample .You can download it from below sample link.
Sample Link:
WebApplication1.zip
Please let us know if you have any clarification.
Thanks,
Vinothkumar Arumugam.
Hi Bharath,
We have analyzed your query, chart date labelformat able to customize for different countries by using locale property .It supports specified language culture of different countries. You can achieve your requirements by applying following code snippets.
Code Snippet [MVC]:Index.cshtml
Set USA culture language by using local property: .Locale("en-US")
Set date label format of USA: .PrimaryXAxis(xaxis => xaxis.LabelFormat("dddd,MMMM dd, yyyy"))
Below switch statement shows that different culture and it date format.
switch (local) {
case "en-US": format = "dddd,MMMM dd, yyyy"; break;
case "vi-VN": format = "dd MMMM yyyy"; break;
case "fr-FR": format = "dddd d MMMM yyyy"; break;
case "de-DE": format = "dddd, MMMM dd, yyyy"; break;
case "zh-CN": format = "yyyy'年'M'月'd'日'"; break;
}
$("#container").ejChart("option", {
"model": {
primaryXAxis: { labelFormat: format },
locale: local
}
});
Screenshot:
The below screenshot shows that USA Date Label format.
We have prepared a sample based on your requirements and you can download it from below sample link.
Sample Link:
WebApplication1.zip
Please let us know if you have any concern.
Thanks,
Vinothkumar Arumugam
Hi Bharath,
Please find below response for your reported query.
We have prepared a sample, find below steps to achieve your requirements .
1. Changing your system language setting
2. Run the sample.
Screenshots:
· Before applying language setting .Date label format shows “en-US” which it is default system language.
· After setting language as “zh-CN” .Date label format shows.
You can download the sample from below link.
Sample Link:
TreeGridMVC_Angular.zip
Please let us know if you have any concern.
Thanks,
Vinothkumar Arumugam.
Hi Bharat,
Query-1: How to restrict number of X Axis display on chart.
Response: We are not able to understand the above query. Can you please explain details about your requirement? So that we can work further and provide a solution.
Query-2: How to apply tab order to syncfusion chart. How to apply tab order in series and legend.
Response: We have analyzed the reported query. But generally there is no support to apply the tab order in DIV elements. Because, DIV elements are not compatible with a tabindex. In our chart controls are created inside of DIV elements. So, we are not able to achieve this query.
Query-3: Labels on x-axis sometimes fall outside chart boundry.
Response: When you have faced the above problem, you can customized by using EdgeLabelPlacement property in primaryXAxis. The primaryXAxis includes the EdgeLabelPlacement property that is used to avoid the labels on axis fall outside the chart area. By default EdgeLabelPlacement for primaryXAxis is None. There are three types of EdgeLabelPlacement,
· Shift
· None
· Hide
Code snippet:
[MVC]
.PrimaryXAxis(xaxis=>xaxis.ValueType(AxisValueType.Datetime).EdgeLabelPlacement(EdgeLabelPlacement.Shift).LabelRotation(45).LabelFormat("MMM-yyyy").Title(tit=>tit.Text("Sales Across Years"))
We have prepared a sample based on the screen shot and you can find the sample in below location:
Screen shot:
Sample:
MvcApplication47.zip
Please let us know if you need any clarification.
Thanks,
Praveenkumar
Hi Bharath,
We have analyzed your reported queries. Please find the below responses.
Query 1: Query related to Load event
Chart Load event will trigger only once at the initial time when the chart loads for the first time. If you want to do any action like changing the datasource and redrawing the chart, this event will not occur. You can use seriesRendering event instead, which is triggered when the series is changed or rendered every time.
Code Snippet[MVC]:Index.cshtml
· At Load Event fired line series render with using JSON data source.
function onchartload(sender) {
sender.model.series[0].dataSource = chartData;
sender.model.series[0].xName = "xValue";
sender.model.series[0].yName = "yValue";
sender.model.series[0].type = "Line";
}
· When onChange event trigger by PartialView dropdown .Then seriesRendering event fired and Column Series render with using JSON data source.
function selectSource() {
var chartObj = $("#chart").ejChart("instance");
chartObj.model.seriesRendering = "rendering";
chartObj.model.series[0].type = "Column";
chartObj.redraw();
}
function rendering(sender) {
sender.model.series[0].dataSource = chartData;
sender.model.series[0].xName = "xValue";
sender.model.series[0].yName = "yValue";
}
Screen Shots:
· Before change Dropdown list Load event result
· After change the Dropdown in partial view seriesRendering event trigger.
We have prepared a sample and it can be downloaded from below sample link
Sample Link:
WebApplication1.zip
Query 2: while rendering chart series getting this type of error
This kind of issue “ejChart: methods/properties can be accessed only after plugin creation” occurs when you try to access any variables or method before creating chart. So kindly check whether your action is after creating chart. Also check the order of the script files
1.jquery 1.0.2
2. jquery.globalize.min
3. angular.min.js
4. ej.web.all.min
5. ej.widget.angular.min.js
Query 3: Display series not proper.
From your query we found that you have set chartIntervalType as minutes and thus it is showing labels for each minute in your application. In huge data collection like yours, we recommend you to use interval type larger like days, months etc.
Syncfusion DateTime Interval Types as follows
Days | string | days | Sets chart interval type to days. |
Hours | string | hours | Sets chart interval type to hours. |
Seconds | string | seconds | Sets chart interval type to seconds. |
Milliseconds | string | milliseconds | Sets chart interval type to milliseconds. |
Minutes | string | minutes | Sets chart interval type to minutes. |
Months | string | months | Sets chart interval type to months. |
Years | string | years | Sets chart interval type to years. |
Please let us know if you have any further queries.
Thanks,
Vinothkumar Arumugam.
Query-1: we are working with mvc view during renediring getting error metion in zip file
We have analyzed your screenshot and found that the reported error occurs when a url that returns JSON data is used as chart data source without a query object.
Would you please let us know whether you are using an url or a collection as datasource?
If you are using url as data source, please refer the following code snippet to create a query object inside series
Code Snippet[MVC]:
@(Html.EJ().Chart("container").Series(ser =>
{ ser.DataSource(service => service.URL("http://mvc.syncfusion.com/Services/Northwnd.svc/"));
ser.XName("ShipCity");
ser.YName("Freight");
//Adding a Query object to series
ser.Query("ej.Query().from('Orders').take(10)").Add();
})
Our online sample using remote data source is available in the following link
http://mvc.syncfusion.com/demos/web/chart/remotedata
If you are using collection as dataSource could you please provide sample with replication procedure to reproduce the reported issue in our side.
Query-2: on chart load method is not working during ajax call
@(Html.EJ().Chart("chart")
//SeriesRendering event handler for chart.
.SeriesRendering("RenderSeries")
……
)
//DropDown change event trigger
function selectSource(sender) {
var param = sender.selectedIndex == 0 ? 5 : 10;
//Retriving chart data from controller by Ajax call
$.ajax({
type: "POST",
url: "TreeGrid/Getjsondata",
data: { 'data': param },
async: false,
success: function (data) {
//Binding retrived data to chart
var chartObj = $("#chart").ejChart("instance");
chartObj.model.series[0].dataSource = data;
chartObj.redraw();
}
});
}
function RenderSeries() {
//Render Series will be triggered before rendering a series
//This includes changing DataSource of the series.
var chartObj = $("#chart").ejChart("instance");
chartObj.model.series[0].type = "column";
chartObj.model.series[0].name = "SeriesName Changed";
}
We have prepared a sample based on your requirements and it can be downloaded from below sample link
Sample Link: http://www.syncfusion.com/downloads/support/forum/118945/TreeGridMVC_Angular859588378.zip
Please let us know if you have any concern
Thanks,
Praveen Kumar.
Hi Bharat,
We have analyzed the reported query. Chart width in page reload can be changed by redraw method. Because, whenever changes made in chart it will be affected only by redraw method call. Please find the following code snippet:
[MVC] Index.cshtml
function myFunction() {
$('#chart').css('width', '200px');
var chartObj = $("#chart").ejChart("instance");
chartObj.redraw();
}
If you want to change the chart width in page reload please click the change button.
Screen shot:
We have prepared a sample based on the screen shot and you can find the sample in below location: http://www.syncfusion.com/downloads/support/forum/118945/Sample-783976944.zip
Sample:
Please let us know if you have any queries.
Praveenkumar.
The following code snippet shows,
.Annotations(an =>
{
an.Visible(false).Content("emptyData").Add();
function onchartload(sender) {
if (sender.model.series[0].dataSource == null) {
sender.model.initSeriesRender = false;
sender.model.annotations[0].visible = true
}
}
Kindly refer the help documentation in the below link for any assistance about Annotations.
http://help.syncfusion.com/UG/JS_CR/ejChart.html#annotations
We have prepared a sample based on the screen shot and you can find the sample in below location:
Screen shot: 
Query-2: where i can handle chart load event in angualr.js in mvc
Response: We have analyzed your reported query. We have achieved your requirement by following code snippet.
[MVC]
<div id="chartContainer"
ej-chart e-primaryxaxis-title-text="xAxis"
e-load="loadEvent"
e-primaryxaxis-valuetype="Category"
e-primaryxaxis-labelformat="lableformat"
e-commonseriesoptions-type="bar"
e-primaryyaxis-title-text="yAxis"
e-title-text="AngularJS Support">
</div>
angular.module('syncApp', ['ejangular'])
.controller('Chart', function ($scope) {
$scope.lableformat = "dddd,MMMM dd, yyyy";
$scope.loadEvent = function (sender) {
sender.model.legend.visible = false;
sender.model.commonSeriesOptions.dataSource = data;
sender.model.commonSeriesOptions.xName = "xDate";
sender.model.commonSeriesOptions.yName = "yValue";
};
});
We have prepared a sample based on your requirement and you can find the sample in below location:
Sample:
Please let us know if you have any queries.
Browser Name | Series Length | Series Data (Per series) | SVG Rendering (Sec) | CanvasRendering (Sec) |
Firefox | 100 | 100 | 3 Sec | 1 Sec |
Internet Explorer 10 | 100 | 100 | 7 Sec | 2 Sec |
Google Chrome | 100 | 100 | 2 Sec | 0 Sec |
Please let us know if you have any queries.
Query:
I want to print Error Message on Chart I am using Annotation properly but nothing is coming in screen I m getting in my json data but not able to render that error in my chart So please give assistance as soon as possible.
Response:
We have analyzed your above query. Annotation configures by any HTML elements. In your code using content as HTML Document instead of HTML element in this case annotation is not working.
annotations: [{ content: data.responseText }]
here data.responseText is the HTML Document as follows.
You can achieve you requirements by applying following code snippet
Code Snippet [MVC]: Index.cshtml
· Create annotation element as follows
<div id="emptyData" align="center" style="display:none">
Data Source is Empty
</div>
In which id=”emtyData” is the content of annotation
· Based on your requirements .If the server not respond any data to the client then annotation configure as follows
error: function (data) {
alert("fail");
var chartObj = $("#chart").ejChart("instance");
$("#" + chartObj._id).ejChart("instance")
{
chartObj.model.series[0] = {};
chartObj.model.annotations[0].content = "emptyData";
chartObj.model.initSeriesRender = false;
chartObj.model.annotations[0].visible = true
};
}
Find the below steps and screenshots of attached sample result
1. When server respond to the client with chart data
[HttpPost]
public ActionResult Getjsondata(int data)
{
//Return chart data in JSON format
return Json(GetData(data));
}
2. When server not respond any data to client
//[HttpPost]
//public ActionResult Getjsondata(int data)
//{
// //Return chart data in JSON format
// return Json(GetData(data));
//}
//}
We have prepared a sample and you can download it from below sample location
Sample Location:
http://www.syncfusion.com/downloads/support/forum/118945/ze/DataModel119286-1202177578
Thanks,
Vinothkumar Arumugam.
.LegendItemMouseMove("LegendData") //Declaring LegendItemMouseMove event
function LegendData(sender) {
var LegendItemText = sender.data.legendItem.LegendItem.Text;
alert("LegendText :" + sender.data.legendItem.LegendItem.Text);
}
PointRegionMouseMove("GetLegendData") //Declaring PointRegionMouseMove event
function GetLegendData(sender) {
var LegendItemText = sender.model.legendCollection[0].Text;
alert("LegendText :" + sender.model.legendCollection[0].Text);
}
We have made a sample for this you can download it from below location
Sample Location:
WebApplication1
Query 2:
Point 2: I want to display content of dropdown list in tooltip on mouse hover
We have achieved your requirement “display tooltip for the drodownlist items on mouse hover” by adding the title property of the individual dropdown items in the create event of DropDownList component. Please find the code for the same,
<code>
@Html.EJ().DropDownList("bikeList").Datasource((IEnumerable<Dropdown.Models.Bikes>)ViewBag.datasource).DropDownListFields(df => df.ID("empid").Text("text").Value("text")).ClientSideEvents(e=>e.Create("OnCreate"))
function OnCreate()
{
var li = $(this.ultag.find("li"));
for(var i=0;i<li.length;i++)
{
$(li[i]).attr("title", $(li[i]).text());
}
}
</code>
We have prepared the sample based on this and please find the sample under the following location,
Sample: Sample
Query 3:
I mvc appllication I want to set chart interval dynamically can you provide me example
You can set intervaltype dynamically .Following code illustrate this
Code Snippet[JS] :
var type=document.getElementById("SelectIntevalType").value;
var chartObj = $("#chart").ejChart("instance");
chartObj.model.primaryXAxis.intervalType = type;
below attached Screen Shots that:
Query 4:
when try to rendering bulk data on chart. getting black line
I have set interval type as day and do not want to set interval type month , year.
You can achieve this by using LabelIntersectAction.Hide property. Currently LabelIntersectAction Hide not working properly. So we have logged defect on this “LabelIntersectAction.Hide is not working properly”. A support incident 140255 to track the status of this issue has been created under your account. Please log on to our support website to check for further updates
https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents
If LabelIntersectAction.Hide working then you can get the below screenshot result as per your needs .
Please let us know if you have any concern.
Thanks,
Vinothkumar Arumugam.
|
$scope.oncreate = function (e) { this.ultag.children('li').css({ "white-space": "nowrap" }); //To display the horizontal scroller this.scrollerObj.model.width = this.popupList.outerWidth(); this.scrollerObj.refresh(); }; |
|
<input id="bookSelect" ej-dropdownlist e-enableIncrementalSearch="true" e-datasource="dataList" e-popupwidth="200px" e-value="value" e-create="oncreate" e-change="onchange" /> |
|
$scope.onchange = function (e) { console.log("change event trigerred"); //Your code } |
Currently, we have not provided the “keypress” event, we have confirmed this as a defect and logged an issue report for this. A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates.
https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents
We are able to reproduce the issue. So we have logged defect on this “Interval not properly calculated for DateTime valuetype” with new incident 140882. A support incident to track the status of this issue has been created under your account. Please log on to our support website to check for further updates
https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents .
As a workaround you can achieve your requirements by setting range interval as 1.
We have made a sample with following chart data.
Code Snppet[MVC]:
Screenshot:
You can download the sample from below sample location.
Sample Location:
packages
Please let us know if you have any concern.
Thanks,
Vinothkumar Arumugam.
1) I want to hide button in some case
2) I want to control its reset,pane ,zoom functionality using angular js can i control it?.
Using angular js
We are analyzing this. We will let you know the status within one business day 6th July 2015.
Query 2:
By default all legend should be visible false.
I want to display all legend with data on chartbody.. when. mouse hover of chart
so it behave like tooltip sharing image with you
Currently there is no explicit support for this. But we have prepared a workaround sample for this. Which it is achieved by Legend location x/y. Please find the following code snippet for achieve your requirements.
Code Snippet [MVC]:
Enable mouse move event by div id. And get the mouse position then bind it to the legend locations x and y.
Screenshot:
· Before mouse move
· After mouse move legend visible and move on chart area as follows.
Please find the below sample link to download the sample.
Sample Link:
legend
Please let us know if you have any concern.
Thanks,
Vinothkumar Arumugam.
