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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Data is not plotting in chart

Thread ID:

Created:

Updated:

Platform:

Replies:

119474 Apr 27,2015 01:14 PM UTC Sep 15,2016 11:12 AM UTC JavaScript 82
loading
Tags: ejChart
Bharat Buddhadev
Asked On April 27, 2015 01:14 PM UTC


            Chart dashboardChart = (Chart)ViewData["Data"];


        @(Html.EJ().Chart("chart")
                    .Series(sr =>
                    {
                        foreach (var series in dashboardChart.SeriesWithDataPoints)
                        {
                            sr.Name(series.TypeDisplayName)
                              .Type(SeriesType.Line)
                              .DataSource(series.DataPoints)
                              .XName("Timestamp")
                              .YName("Value")
                              .Add();
                        }
                    })
                    .PrimaryXAxis(xAxis => xAxis.ValueType(AxisValueType.Datetime)
                                                .Range(r => r.Interval(500))
                                                .LabelFormat("HH:mm:ss dd/MM/yyyy")
                                                .LabelIntersectAction(LabelIntersectAction.Rotate90)
                                                .IntervalType(ChartIntervalType.Minutes))
                    .PrimaryYAxis(yAxis => yAxis.ValueType(AxisValueType.Double))

                    .Background("red")

                )
we get data in dashboardChart(model).
but we are not able to render the data results coming blank.
please provide better example for line chart with model and with json also.


Vinothkumar Arumugam [Syncfusion]
Replied On April 28, 2015 01:21 PM UTC

Hi Bharat,

Thanks for using Syncfusion products. We have analysed this and we are not able to reproduce the reported issue, based on your requirement we have prepared a sample and it can be downloaded from the below link.

Sample Link :
WebApplication1.zip

Please revert us back if this is not your requirement and modify the sample to replicate the issue along with the replication procedure so that it will be helpful for us to serve you better. Let us know if you have any concerns.

Thanks,


Bharat Buddhadev
Replied On April 29, 2015 09:55 AM UTC

Thanks for reply and sending us demo code 

But when we try to apply that code in  our project nothing appear  screen is blank blank.....

@using Syncfusion.JavaScript.DataVisualization
@using System.Collections
@Html.EJ().ScriptManager()

@{  
     ReportDefinition.Chart dashboardChart = ReportDefinition.Chart)ViewData["dataSource"];
    
    <div>
        @if (ViewData["dataSource"] != null)
        {    
            @(Html.EJ().Chart("chart")
                    .Series(sr =>
                    {
                        foreach (var series in dashboardChart.SeriesWithDataPoints)
                        {
                            sr.DataSource(series.DataPoints)
                             .XName("Timestamp")
                             .YName("Value")
                             .Type(SeriesType.Line).Add();
                        }
                    })
                    .PrimaryXAxis(xAxis => xAxis.ValueType(AxisValueType.Datetime)
                                                .Range(r => r.Interval(500))
                                                .LabelFormat("HH:mm:ss dd/MM/yyyy")
                                                .LabelIntersectAction(LabelIntersectAction.Rotate90)
                                                .IntervalType(ChartIntervalType.Minutes))
                    .PrimaryYAxis(yAxis => yAxis.ValueType(AxisValueType.Double))
            )
        }
    </div>

}

Vinothkumar Arumugam [Syncfusion]
Replied On April 30, 2015 11:01 AM UTC

Hi Bharat Buddhadev,

We have analyzed your query. We can’t get your data model “ReportDefinition.Chart dashboardChart = (ReportDefinition.Chart)ViewData["dataSource"]; “ and what are the data’s in it. And also previously, we have prepared a sample based on View bag data source it was working fine our side. Please provide as your sample based on your application along with replication procedure. This would be helpful for us to serve you.

Thanks,Vinothmuamr Arumugam


Bharat Buddhadev
Replied On May 1, 2015 11:29 AM UTC


Hi 

I am trying to ploat chart in MVC Application.

I have one dropdownlist when i select value from dropdownlist and chart will load as per selected value. but the problem is

every time when i select value from dropdownlist it will overlap chartdata with previous chart data.

I need to clear previous chartdata before loading new chart.

And i have much data to ploat chart about 2000 records so is ther any way to enable scorlling x axis?

Vinothkumar Arumugam [Syncfusion]
Replied On May 4, 2015 12:50 PM UTC

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.



Bharat Buddhadev
Replied On May 4, 2015 02:42 PM UTC

Thanks for your reply.

point 1) I want to clear screen before plotting....I want only x and y axis only.so I want to flush previous data and need no line of chart.


It needed urgently  example with multiple chart
using
mvc 5 (Webapi control  )
 angular js 
 json data 
Enity framework 
I want to iterate with with json data for plotting multiple chart 




Thanks for your support
Bharat

Vinothkumar Arumugam [Syncfusion]
Replied On May 5, 2015 12:53 PM UTC

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.



Bharat Buddhadev
Replied On May 5, 2015 01:27 PM UTC

Thanks for your superb support

 I need example like if i have at the same time three charts on my screen so i can drag and rearrange charts

 so basically i need to rearrange chart order by only drag them.

Vinothkumar Arumugam [Syncfusion]
Replied On May 6, 2015 10:28 AM UTC

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.


Bharat Buddhadev
Replied On May 6, 2015 11:29 AM UTC


how to  set date label format in chart as depending on browser language
like suppose I open my web app in US  label display as US date format
and if i open browser in UK. chart date label should be in UK date format.

So basically its chart date should display as per country date format.



Bharat Buddhadev
Replied On May 6, 2015 02:31 PM UTC

I want example in that chart date should be display as per country format 

Thank you.

Vinothkumar Arumugam [Syncfusion]
Replied On May 7, 2015 07:33 AM UTC

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


Bharat Buddhadev
Replied On May 8, 2015 05:32 AM UTC

thanks for your example I want example using angular.js
when I open chart different browser it should automatically
change the date label format as per country like Uk-us

Vinothkumar Arumugam [Syncfusion]
Replied On May 8, 2015 10:52 AM UTC

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.


Bharat Buddhadev
Replied On May 8, 2015 11:47 AM UTC

Thanks for your quick support



Bharat Buddhadev
Replied On May 9, 2015 04:49 AM UTC

Hi Good Morning
Hi I wan to store data chart data in database 
can your provide ma an example for converting multiple  chart data to model 

For this we need architecture
mvc,
angular j.s
entity framework

for that your need to convert chart json data to model 

Hope get feed back soon from your side thank you

Waiting for your quick answer with proper example





Bharat Buddhadev
Replied On May 11, 2015 05:45 AM UTC

I want to access multiple chart data and want to store in database
for that 
using  mvc web api and angular js and I want to post the json data 

please provide me example as soon as possible its urgent

waiting for your quick reply 
thank you.

Vinothkumar Arumugam [Syncfusion]
Replied On May 11, 2015 01:23 PM UTC

Hi Bharath,

We have analyzed your reported query based on that, we are preparing a sample .We will update the sample within one business day 12th May2015.

Thanks,

Vinothkumar Arumugam.


Vinothkumar Arumugam [Syncfusion]
Replied On May 12, 2015 01:29 PM UTC

Hi Bharath,

Please find the below response .

We can able to add chart data into the database. We have prepared a sample based on your requirements, following code snippet shows that how to add chart data into the database.

Code Snippet [MVC]:Index.cshtml

· Post the JSON chart data to the controller by using ajax post method.

$.ajax({

type: "POST",

url: "TreeGrid/DATACRUD",

data: JSON.stringify({ "XmlParms": stringData }),

contentType: "application/json; charset=utf-8",

dataType: "json",

async: false, //_async,

});

· Create the table in database with mentioned properties in model.

· Create sqlconnection string to load model data into database table as below

string insertQuery = “Insert into [Table] (XDate, Yvalue) values”;

string connectionString = “Data Source=(LocalDB)\\v11.0;AttachDbFilename=\”F:\\2015Volume\\Support\\Incident\\Samples\\MVC\\12.5.2015\\TreeGridMVC_Angular(1)\\TreeGridMVC_Angular\\TreeGridSampleMVC\\App_Data\\Database1.mdf\”;Integrated Security=True”;

using (SqlConnection connection = new SqlConnection(connectionString))

{

SqlCommand cmd = new SqlCommand(insertQuery, connection);

connection.Open();

cmd.ExecuteNonQuery();

connection.Close();

}

· Chart data processed as below

I. Ajax post the chart JSON data to model

II.JSON data is Deserialized by JavaScriptSerializer and it can be added into the chart model

III. Each data is inserted into the database table created in Server Explorer.

Please find below sample and it can be downloaded as below link

Sample Link:
TreeGridMVC_Angular.zip

Please let us know if you have any queries.

Thanks,

Vinothkumar Arumugam .



Bharat Buddhadev
Replied On May 14, 2015 01:00 PM UTC

1) How to restrict number of X Axis display on Chart.
2) how to apply tab order to synchfusion chart.how to apply tab order in series and legend.
3) Labels on x-axis sometimes fall outside chart boundary (see screenshot). attached with Newfolder2




Attachment: New_folder_(2)_6ff6a5b6.rar

Praveen [Syncfusion]
Replied On May 15, 2015 01:17 PM UTC

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


Bharat Buddhadev
Replied On May 20, 2015 05:29 AM UTC


Good morning

Waiting for your quick reply  

before analyse proble please refere image (IMG_x)

on footer all x axis come together after zoom its working fine
so on chart load we need proper x axis display

second point can we set the limit for x axis data.




Attachment: img_443084d8.rar

Bharat Buddhadev
Replied On May 20, 2015 10:46 AM UTC

Its urgent please reply fast


I have one view in that
I have three partial view
on first partial view I have dropdown
on that dropdown chage event
I want to iterate multiple chart

Its iterate only blank chart


//function onchartload(sender) {
        
        //    alert("chartload");

        //    var chartId = this._id;


        //    var chartObj = $("#" + chartId).ejChart("instance");
        //    $.ajax({
        //        url: window.applicationRootUrl + "api/reporting/dashboard/e91a8170-2c0d-cd59-9ecd-08d25464c129",
        //        dataType: "json",
        //        type: "GET",
        //        contentType: "application/json; charset=utf-8",
        //        success: function (data) {
        //            var count = 0;
        //            data.forEach(function (series) {
        //                chartObj.model.series[count] = {
        //                    dataSource: series,
        //                    name: series.SeriesName,
        //                    xName: "timestamp",
        //                    yName: "value",
        //                    type: "Line",
        //                    width: 1,
        //                }
        //                count++;
        //            });
        //            chartObj.redraw();


        //        }
        //    });
        //}



I am iterating multiple chart data
   onchartload function is not called()





<div class="container-fluid" id="span">

    @{




        var ChartCollection = (ChartCollection)ViewData["chartCollection"];

        if (ChartCollection != null)
        {

            foreach (var cht in ChartCollection)
            {
                <ul id="dashboard">






                    <li>
                        <div class="panel panel-primary" style="margin: 0;">
                            <div class="panel-heading" style="height: 25px; padding: 0" ="">
                                <span style="float: left; margin: 5px 10px">@cht.Name</span>
                                <div style="float: right">
                                    <i class="fa fa-refresh fa-lg" style="color: white; margin-top: 5px"></i>
                                    <i class="fa fa-pencil-square-o fa-lg" style="color: white;"></i>
                                    <i class="fa fa-file-excel-o fa-lg" style="color: white;"></i>
                                    <i class="fa fa-table fa-lg" style="color: white;"></i>
                                    <i class="fa fa-minus-square-o fa-lg" style="color: white; margin-left: 10px;"></i>
                                    <i class="fa fa-times fa-lg" style="color: white;"></i>
                                </div>
                            </div>
                            <div class="panel-body" style="padding: 0; clear: both">

                                @{
                var userLanguage = Request.UserLanguages != null ? Request.UserLanguages[0] : "en-GB";
                var dateFormat = "dd/MM/yyyy";
                switch (userLanguage)
                {
                    case "en-US": dateFormat = "MM/dd/yyyy"; break;
                    case "en-GB": dateFormat = "dd/MM/yyyy"; break;
                }


                  @(Html.EJ().Chart("bharat")                
                          .Series(sr => sr.Add())
                          .Load("onchartload")
                          .PrimaryXAxis(xAxis => xAxis.ValueType(AxisValueType.Datetime)
                              .LabelFormat(dateFormat)
                              .Font(font => font.Size("8px"))
                              .LabelIntersectAction(LabelIntersectAction.Rotate45)
                              .IntervalType(ChartIntervalType.Minutes))
                          .PrimaryYAxis(yAxis => yAxis.ValueType(AxisValueType.Double))
                          .EnableCanvasRendering(true)
                          .CanResize(true)
                          .Zooming(zn => zn.Enable(true).EnableMouseWheel(true))
                )
                                }
                            </div>
                        </div>
                    </li>

                </ul>

            }
        }
    }


</div>






Bharat Buddhadev
Replied On May 20, 2015 12:03 PM UTC

while rendering chart series getting this type or error plz reply


 Failed to load resource: net::ERR_NAME_NOT_RESOLVED
angular.js:11655 ejChart: methods/properties can be accessed only after plugin creation
Error: ejChart: methods/properties can be accessed only after plugin creation
    at t.throwError (http://localhost:59999/Scripts/ej/ej.web.all.min.js:10:20773)
    at n.fn.(anonymous function) [as ejChart] (http://localhost:59999/Scripts/ej/ej.web.all.min.js:10:15654)
    at onchartload (eval at <anonymous> (http://localhost:59999/Scripts/jquery-2.1.3.js:328:5), <anonymous>:15:41)
    at HTMLDocument.eval (eval at <anonymous> (http://localhost:59999/Scripts/jquery-2.1.3.js:328:5), <anonymous>:3:9)
    at fire (http://localhost:59999/Scripts/jquery-2.1.3.js:3094:30)
    at Object.self.add [as done] (http://localhost:59999/Scripts/jquery-2.1.3.js:3140:7)
    at jQuery.fn.ready (http://localhost:59999/Scripts/jquery-2.1.3.js:3373:25)
    at eval (eval at <anonymous> (http://localhost:59999/Scripts/jquery-2.1.3.js:328:5), <anonymous>:1:13)
    at eval (native)
    at Function.jQuery.extend.globalEval (http://localhost:59999/Scripts/jquery-2.1.3.js:328:5)(anonymous function) @ angular.js:11655

Bharat Buddhadev
Replied On May 20, 2015 12:06 PM UTC

plz check this issue 

while x series display on chart load its very near to each other after zoom its display perfect.
plz refer image

 
 

Attachment: img_d781470e.rar

Vinothkumar Arumugam [Syncfusion]
Replied On May 21, 2015 06:24 AM UTC

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.



Bharat Buddhadev
Replied On May 21, 2015 07:19 AM UTC


Thank for reply

Today you have send me mail but I have not able to open the .zip  folder while opening its giving me error.

so plz send me the folder again.

waiting for your quick reply.

Thank you 

Vinothkumar Arumugam [Syncfusion]
Replied On May 21, 2015 07:32 AM UTC

Hi Bharath,

Please check with below samplelink to download the sample.

Sample Link:
WebApplication1.zip

Thanks,

Vinothkumar Arumugam.



Bharat Buddhadev
Replied On May 21, 2015 12:36 PM UTC

Thanks for your reply

Bharat Buddhadev
Replied On May 21, 2015 12:40 PM UTC


I am very  happy with your service. I will recommend your company to other also if you have this type of dedication you will go very far.

I hope  I will get quick reply always 

Thank you.




Bharat Buddhadev
Replied On May 22, 2015 05:17 AM UTC

we are using  synchfusion dropdown list.

@Html.EJ().DropDownList("drpDashboard").Datasource(@Model).DropDownListFields(df => df.ID("Id").Text("DashboardName").Value("Id")).Width("100%").ClientSideEvents(cli => { cli.Select("onchange"); }).EnablePersistence(true).SelectedItemIndex(0)


Point 1 .Enable Persistence(true) this property is not working in IE 11

Point2 . I want method how to  set EnablePersistence(false) dynmalicaly from jquery or from angualr js

Waiting for your quick reply.
Thanks

Bharat Buddhadev
Replied On May 22, 2015 07:34 AM UTC

@(Html.EJ().Chart(cht.Id.ToString())
                            .Series(sr =>
                            {
                               
                                sr.DataSource(cht.DataPoints)
                                  .XName("timestamp")
                                  .YName("value")
                                  .Add();

                            })
                                          .PrimaryXAxis(xAxis => xAxis.ValueType(AxisValueType.Datetime)
                                    .LabelFormat(dateFormat)
                                    .Font(font => font.Size("8px"))
                                    .LabelIntersectAction(LabelIntersectAction.Rotate45)
                                    .IntervalType(ChartIntervalType.Hours))
                                .PrimaryYAxis(yAxis => yAxis.ValueType(AxisValueType.Double))
                                .EnableCanvasRendering(true)
                                .CanResize(true)
                                .Zooming(zn => zn.Enable(true).EnableMouseWheel(true))
                            )

we are working with mvc view during renediring getting error metion in zip file

Attachment: bharat_48cb6ebd.rar

Bharat Buddhadev
Replied On May 22, 2015 12:26 PM UTC


My steps scenario is like 

I have three partial view 
If I change drop down from one partial view.I am doing ajax call  and getting multiple chart data for chart rendering
but on chart load method is not working during ajax call.
can you provide example where I can get example of chartload  method call after ajax call

Praveen [Syncfusion]
Replied On May 25, 2015 03:20 PM UTC

Hi Bharath,

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


We have analyzed your query and we would like to inform you that Chart Load event will trigger only once when the chart loads for the first time.
Load event will not be triggered when changing the datasource of series or redrawing the chart by Ajax call. We suggest you to use SeriesRendering event , which is triggered whenever the series data source is changed or rendered every time.

You can achieve your requirements by applying following code snippet

Code Snippet[MVC]:Index.cshtml

Creating chart with SeriesRendering event as follows

@(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.



Bharat Buddhadev
Replied On May 26, 2015 07:21 AM UTC

Hi,

I plot multiple chart in <li> tag as below code.

<ul id="dashboard">
@foreach (var cht in ChartCollection)
{
<li class="ui-sortable-handle">
<div class="panel-body" style="padding: 0; clear: both">

@{
var userLanguage = Request.UserLanguages != null ? Request.UserLanguages[0] : "en-GB";
var dateFormat = "dd/MM/yyyy";
switch (userLanguage)
{
case "en-US": dateFormat = "MM/dd/yyyy"; break;
case "en-GB": dateFormat = "dd/MM/yyyy"; break;
}

@(Html.EJ().Chart(cht.Id.ToString())
.Series(sr => sr.Add())
.Load("onchartload")
.PrimaryXAxis(xAxis => xAxis.ValueType(AxisValueType.Datetime)
.LabelFormat(dateFormat)
.Font(font => font.Size("8px"))
.EdgeLabelPlacement(EdgeLabelPlacement.Shift)
.LabelIntersectAction(LabelIntersectAction.Rotate45)
.IntervalType(ChartIntervalType.Days))
.PrimaryYAxis(yAxis => yAxis.ValueType(AxisValueType.Double))
.EnableCanvasRendering(true)
.CanResize(true)
.Zooming(zn => zn.Enable(true).EnableMouseWheel(true))
)
}
<input type="hidden" id="chartidd" value="@cht.DashboardId" />
</div>
</div>
</li>
}
</ul>


Now i am trying to change width of <li> tag using jquery but the canvas of chart is not updating its width. as i given width of chart 100%.

my jquery is : 

$( ".ui-sortable-handle" ).dblclick(function() {
$(this).css('width','100%');
});

Is there any method to reload or refresh chart for update width same as <li> tag.?

I even tried $('canvas').css('width','100%');  but this code stretched the chart.

Thank you.
 



Praveen [Syncfusion]
Replied On May 27, 2015 12:30 PM UTC

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:
Sample:

http://www.syncfusion.com/downloads/support/forum/118945/Sample-783976944.zip

Please let us know if you have any queries.

Thanks,

Praveenkumar.


Bharat Buddhadev
Replied On May 27, 2015 12:45 PM UTC

Thanks for reply

Bharat Buddhadev
Replied On May 27, 2015 12:57 PM UTC

If I am not getting data for display the chart 

how to show custome error inside chart blank chart or 

show me the method for showing error on chart object

Bharat Buddhadev
Replied On May 28, 2015 04:15 AM UTC

I want to handle chart load event in angular js please provide me method 
where i can handle chart load event in angualr.js in mvc

Praveen [Syncfusion]
Replied On May 28, 2015 12:17 PM UTC

Hi Bharat,
Query-1: how to show custome error inside chart blank chart

Response: We have analyzed your reported query. You can achieve your requirement by applying/setting the “Annotations “property. We have provided an Annotations property from version 13.1.

The following code snippet shows,

Code Snippet:
[MVC]

@(Html.EJ().Chart("chart")
…………………..

.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.

Thanks,
Praveenkumar

Bharat Buddhadev
Replied On May 28, 2015 12:25 PM UTC

Thanks a lot for reply

Praveen [Syncfusion]
Replied On May 28, 2015 12:39 PM UTC

Hi Bharat ,
Due to our technical problems sample was not attached. Please find the below location to download the sample for your requirements.
Query-1:
TreeGridMVC_Angular.zip


Query-2:
TreeGridMVC_Angular.zip



Thanks,
Praveenkumar

Bharat Buddhadev
Replied On May 30, 2015 06:49 AM UTC

Waiting for your quick answer as always you give.

Q.1 What is maximum no of series we can display on single chart ?.

Praveen [Syncfusion]
Replied On June 1, 2015 12:59 PM UTC

Hi Bharat,
We have analyzed your reported query. The maximum number of series rendering in a chart is based on system configuration and on the data provided to render series. We have tested the chart in below mentioned browsers and system configuration. Please find the testing details below,
Operating System: Windows 8,
System Type: 64-bit operating system
Installed Memory (RAM): 4.00 GB

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.

Thanks,
Praveenkumar

Bharat Buddhadev
Replied On June 2, 2015 09:45 AM UTC

many Thanks for previous post reply.

I am using  mvc synchfusion dropdown in current app.
based  on drop down change I m  submitting form In that scenarion I am losing my dropdown value.I donot want to set EnablePersistence value to true 
during postback

So my question is that how to set dynamically dropdown value.


Waiting for quick reply

 <add assembly="Syncfusion.Compression.Base, Version=13.1450.0.21, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.Core, Version=13.1450.0.21, Culture=neutral, PublicKeyToken=632609B4D040F6B4" />
        <add assembly="Syncfusion.DocIO.Base, Version=13.1450.0.21, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.EJ, Version=13.1450.0.21, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.EJ.Export, Version=13.1450.0.21, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.EJ.Olap, Version=13.1450.0.21, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.EJ.MVC, Version=13.1500.0.21, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.Linq.Base, Version=13.1450.0.21, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.Olap.Base, Version=13.1450.0.21, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.Pdf.Base, Version=13.1450.0.21, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.PivotAnalysis.Base, Version=13.1450.0.21, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.XlsIO.Base, Version=13.1450.0.21, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

this is our assembly version so please provide example which is compatible with this assembly version.
Thanks
Waiting for your quick reply.

Bharat Buddhadev
Replied On June 3, 2015 06:24 AM UTC

Waiting for quick urgent reply

Is synchfusion support Save As Dialog Box functionality ?.



Attachment: SaveAS_9d2ea80d.rar

Bharat Buddhadev
Replied On June 3, 2015 12:25 PM UTC

Waiting for your quick reply 
assembly versions  Syncfusion.Core, Version=13. 1450.0.21   means 13+ versions

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.

@(Html.EJ().Chart(chart.Id.ToString())
                                .Series(sr => sr.Add())
                                .Load("onchartload")
                                .PrimaryXAxis(xAxis => xAxis.ValueType(AxisValueType.Datetime)
                                    .LabelFormat(dateFormat)
                                    .Font(font => font.Size("8px"))
                                    .EdgeLabelPlacement(EdgeLabelPlacement.Shift)
                                    .LabelIntersectAction(LabelIntersectAction.Rotate45)
                                    .IntervalType(interValType))
                                .PrimaryYAxis(yAxis => yAxis.ValueType(AxisValueType.Double))
                                .EnableCanvasRendering(true)
                                .CanResize(true)
                                .Zooming(zn => zn.Enable(true).EnableMouseWheel(true))
                                .Annotations(an =>
                                 {
                                        an.Visible(true).Content("emptyData").Add();

                                 }
                            )


                    )


function onchartload(sender) {
    var chartId = this._id;

    var chartObj = $("#" + chartId).ejChart("instance");
    $.ajax({
        url: "api/reporting/dashboard/" + chartId,
        dataType: "json",
        type: "GET",
        contentType: "application/json; charset=utf-8",
        success: function (data) {


            if (data != null) {
                var count = 0;
                data.forEach(function (series) {
                    chartObj.model.series[count] = {
                        dataSource: series,
                        name: series.SeriesName,
                        xName: "timestamp",
                        yName: "value",
                        type: "Line",
                        width: 1,
                    }
                    count++;
                });
                chartObj.redraw();

            }
        },
        error: function (data) {
             

            alert("Error")
            $("#" + chartId).ejChart("instance")
            {
                annotations: [{ content: data.responseText }]
                alert(data.responseText);
            };
            

             
            chartObj.redraw();

        }

    });
}


Kasithangam C [Syncfusion]
Replied On June 3, 2015 12:41 PM UTC

Hi Bharat,

Query1: drop down change I m submitting form In that scenarion I am losing my dropdown valueplease provide example which is compatible with this assembly version

We have prepared the sample based on your requirement “Maintaining value in dropdown after form post back”.Please find the sample under the following location,

Sample: DropDownSample

In this above sample, we have get the dropdown value in form post back by specifying the  dropdown control Id and pass the datasource as shown below code,

<code>

        public ActionResult Index(string bikeList)

        {

           data data1 = new data();

           ViewBag.datasource = data1.RetrunListOfProducts();

            ViewBag.message = bikeList;

            return View();

        }

</code>

In view page, we have passed the Viewbag.message to the dropdown list value property.Please find the code for same,

<code>

@Html.EJ().DropDownList("bikeList").Datasource((IEnumerable<WebApplication6.Models.Bikes>)ViewBag.datasource).DropDownListFields(df => df.ID("empid").Text("text").Value("text")).Value(ViewBag.message)

</code>

Query 2: Is synchfusion support Save As Dialog Box functionality ?.

The mentioned SaveAs Dialog functionality achieved through UploadBox.While click the uploadbox button it displays the dialogbox and you can select the file with save and cancel option.We have prepared the simple sample based on this and please find the sample under the following location,

Sample : Sample

Could you please check with the above sample whether it meets your requirement? Kindly let us know if you have further queries.
Regards,

Kasithangam


Vinothkumar Arumugam [Syncfusion]
Replied On June 4, 2015 09:34 AM UTC

Hi Bharath,
Please find the below response for your reported query.

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.


Bharat Buddhadev
Replied On June 4, 2015 10:41 AM UTC

Thank for your previous mail reply.
Thanks in advance for this question
Waiting for your quick reply as always.


 @Html.EJ().DropDownList("drpDashboard").Datasource(@Model).DropDownListFields(df => df.ID("Id").Text("DashboardName").Value("Id")).Width("100%").ClientSideEvents(cli => { cli.Select("onchange"); })

I am binidng synchfusion dropdown dynamically using model 
Is there any to add Name static like

 "Please Select Value" into Dropdown list statically.


 for example
  first value is   <please select> 
                         <aaaaa>   
                       <bbbbb>

 So here I want to insert  <please select> statement from .cshtml into synchfusion dropdown at first position.
                     
 

   

Kasithangam C [Syncfusion]
Replied On June 5, 2015 01:04 PM UTC

Hi Bharat,

We have achieved your requirement “"Please Select" value added into first position of Dropdownlist popup from .cshtml page” and please find the sample under the following location,

Sample: Sample

In the above sample, we have added “please select” value into dropdownlist popup in the create event of DropDownList control.Please find the wrapper code,

<code>

@Html.EJ().DropDownList("bikeList").Datasource((IEnumerable<WebApplication6.Models.Bikes>)ViewBag.datasource).DropDownListFields(df => df.ID("empid").Text("text").Value("text")).ClientSideEvents(e=>e.Create("onCreate"))


</code>

In the create event,we have added new li element for the value “Please Select” and bind it to the datasource.Please find the code for same,

<code>

function onCreate() {

       var data1 = $("#bikeList").data("ejDropDownList");

       data1.ultag.prepend('<li data-value="please select" id="bk0" role="option" unselectable="on">please select</li>');

       var source = [{ empid: "bk0", text: "please select" }];

       data1.model.dataSource.splice(0, 0, source[0]);

    }

</code>
Please let us know if you have any further assistance,

Regards,

Kasithangam


Bharat Buddhadev
Replied On June 8, 2015 09:55 AM UTC

hello Thanks for reply 
We have recd your code when we try to implement with our code 

function onCreate() {

       var data1 = $("#bikeList").data("ejDropDownList");

       data1.ultag.prepend('<li data-value="please select" id="bk0" role="option" unselectable="on">please select</li>');

       var source = [{ empid: "bk0", text: "please select" }];

       data1.model.dataSource.splice(0, 0, source[0]);

    }

We are getting at this  ultag point

Ultage is undefine Can tell which javascript is missing or guide which file included while using this function


Kasithangam C [Syncfusion]
Replied On June 9, 2015 01:10 PM UTC

Hi Bharat,
We have checked the sample which is given in our last updae.We are unable to reproduce the issue “ultag is undefined”. This error will occur if the dropdown object is not initialized. Can you please tell us which version of script you are using in your sample?
 
Also, please check with our previously given sample. If still you face the problem, please revert us by modifying the sample based on your application along with replication procedure. This would be helpful for us to serve you.

Please let us know if you have further queries.

Regards,
Kasithangam


Bharat Buddhadev
Replied On June 12, 2015 08:35 AM UTC

Hi 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

Can you provide me a solution.

I am sharing image with you. 

Waiting for your quick reply as always 
Thank you.


Attachment: bulkdat_4310bdda.zip

Bharat Buddhadev
Replied On June 12, 2015 10:42 AM UTC

I mvc appllication I want to set chart interval dynamically can you provide me example


Thanks

Bharat Buddhadev
Replied On June 13, 2015 06:07 AM UTC

MVC ,
Point 1 : When I put mouse hove on chart I want to display chart legend and some description with it.


Point 2 : I want to display content of dropdown list in tooltip on mouse hover.

Thanks waiting for your 
Quick reply




Bharat Buddhadev
Replied On June 15, 2015 06:46 AM UTC

Mvc, with synchfusion chart In tooltip wan to disaply legend with series name

Vinothkumar Arumugam [Syncfusion]
Replied On June 15, 2015 01:06 PM UTC

Hi Bharath,
Please find the below responses
Query 1:
Point 1: When I put mouse hove on chart I want to display chart legend and some description with it.
You can get legend Item details by using following two events.
     1. LegendItemMouseMove
     2. PointRegionMouseMove
Following Code Snippet shows that.
Code Snippet [JS]:
·         Get legend Item descriptions when mouse move on legend item

.LegendItemMouseMove("LegendData"//Declaring LegendItemMouseMove event

       function LegendData(sender) {

        var LegendItemText = sender.data.legendItem.LegendItem.Text;

        alert("LegendText :" + sender.data.legendItem.LegendItem.Text);

    }

·         Get legend item details when mouse move on series points

 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:

·         When Interavaltype is Days



·         When intervalType is Moths



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.


Bharat Buddhadev
Replied On June 16, 2015 05:17 AM UTC


Thanks for your reply

MVC

How to create space between data point in mvc chart ?
Waiting for your quick reply
In this code


 @(Html.EJ().Chart(chart.Id.ToString())
                                .Series(sr => sr.Add())
                                .Load("onchartload")
                                .Title(t => t.Text(chart.Subtitle).Font(font => font.Size("12px")).TextAlignment(Syncfusion.JavaScript.DataVisualization.TextAlignment.Near))
                                .PrimaryXAxis(xAxis => xAxis.ValueType(AxisValueType.Datetime)
                                    .LabelFormat(dateFormat)
                                    .Font(font => font.Size("8px"))
                                    .EdgeLabelPlacement(EdgeLabelPlacement.Shift)
                                    .LabelIntersectAction(LabelIntersectAction.Rotate45)
                                    .IntervalType(ChartIntervalType.Days))
                                .PrimaryYAxis(yAxis => yAxis.ValueType(AxisValueType.Double)
                                .Title(t => t.Text(chart.VerticalAxisTitle).Font(font => font.Size("12px"))))
                                .EnableCanvasRendering(true)
                                .CanResize(true)
                                .Zooming(zn => zn.Enable(true).EnableMouseWheel(true))
                                .Legend(legend => legend.Visible(false))
                                    )

Vinothkumar Arumugam [Syncfusion]
Replied On June 16, 2015 12:30 PM UTC

Hi Bharath,

we have analyzed your reported query. But we are not clear with your query “How to create space between data point in mvc chart ?”.So kindly revert back us the details with more information regarding this query. This will help us to understand your required scenario and log tasks for that sooner

Thanks,
Vinothkumar.

Bharat Buddhadev
Replied On June 17, 2015 05:49 AM UTC

In mvc we are using synchfusion dropdown its working fine when small length of data but giving error when data length is big


Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property.


                  @Html.EJ().DropDownList("drpDashboard").Datasource(@Model).DropDownListFields(df => df.ID("Id").Text("DashboardName").Value("Id")).Width("100%").ClientSideEvents(cli => { cli.Select("onchange"); }).EnablePersistence(false).SelectedItemIndex(0).Value(TempData["dashboardId"].ToString())


We are waiting for your quick reply

Please send the suggested solution




Bharat Buddhadev
Replied On June 17, 2015 06:01 AM UTC

with mvc 
When dropdown list data is big its come in multiple line I want to display it on single line

I think we can solve it using scrollbar horizontal and vertical scrollbar

So can your provide me method for creating method for scrollbar when data is too big

plz refere image attched with this post

Waiting for your quick reply as always 
Thank you 
Bharat

Attachment: New_folder_(4)_9435447a.rar

Saranya Sivakumar [Syncfusion]
Replied On June 17, 2015 12:54 PM UTC

Hi Bharat,

Thanks for your update.

As per our Dropdownlist behavior, the text will wrap to the next line when the length is increased. This is the default behavior. If you would like to display both the scroll bars then you can use the following workaround solution in the Create event of our Dropdownlist control.

<code>

function onCreate() {

        this.ultag.children('li').css(

               { "white-space": "nowrap" }

           );

        this.scrollerObj.model.width = this.popupList.outerWidth();

        this.scrollerObj.refresh();

    }

</code>

For your convenience we have prepared the sample displaying both horizontal and vertical scroll bar in the Dropdownlist control and the same can be downloaded from the following link location.

http://www.syncfusion.com/uploads/user/forum/118945/ze/DDLTextLength130-116566603

Please let us know if you have further queries.

Regards,

Saranya.S


Bharat Buddhadev
Replied On June 19, 2015 07:40 AM UTC

@Html.EJ().DropDownList("drpDashboard").Datasource(@Model).DropDownListFields(df => df.ID("Id").Text("DashboardName").Value("Id")).Width("100%").ClientSideEvents(cli => { cli.Select("onchange"); }).EnablePersistence(false).SelectedItemIndex(0).Value(TempData["dashboardId"].ToString())



I want to display Tooltip for this mvc synchfusion dropdown

But using Angualr JS

So can you provide me an example of Synchfusion dropdown tooltip using Angular js

Bharat Buddhadev
Replied On June 19, 2015 10:46 AM UTC

<div style="width: 100%" ej-chart e-load="loadChart" e-series="chartSeriesCollection" e-commonseriesoptions-datasource="dataSource" e-commonseriesoptions-xname="timestamp" e-commonseriesoptions-yname="value" e-commonseriesoptions-type="line" e-primaryxaxis-valuetype="datetime" e-primaryxaxis-labelformat="@dateFormat" e-primaryxaxis-font-size="8px" e-primaryxaxis-edgelabelplacement="shift" e-primaryxaxis-labelintersectaction="rotate45" e-primaryxaxis-intervaltype="@interValType" e-primaryyaxis-valuetype="double" e-zooming-enable="true" e-zooming-enablemousewheel="true" e-canresize="true" e-enablecanvasrendering="true" e-legend-visible="false" e-commonseriesoptions-tooltip-visible="true" e-commonseriesoptions-tooltip-format="#series.name#"></div>

We are generating multiple chart on single screen.with ng-repeat

for example I have 5 charts on my screen when I put mouse pointer on my third chart 
It show tooltip on first chart. 

Plz refere image provided with attachment


Attachment: New_folder_(5)_bd7e8e76.rar

Bharat Buddhadev
Replied On June 22, 2015 11:36 AM UTC

<div style="width: 100%;" data-e-title-text="Reporting Period: <No Start Date> - <No End Date>" e-title-font-size="12px" data-e-primaryyaxis-title-text="CPU Utilization Total (Estimated) %" ej-chart e-load="loadChart" e-series="chartSeriesCollection" e-commonseriesoptions-datasource="dataSource" e-commonseriesoptions-xname="timestamp" e-commonseriesoptions-yname="value" e-commonseriesoptions-type="line" e-primaryxaxis-valuetype="datetime" e-primaryxaxis-labelformat="@dateFormat" e-primaryxaxis-font-size="8px" e-primaryxaxis-edgelabelplacement="shift" e-primaryxaxis-labelintersectaction="rotate45" e-primaryxaxis-intervaltype="@interValType" e-primaryyaxis-valuetype="double" e-zooming-enable="true" e-zooming-enablemousewheel="true" data-e-enablecanvasrendering="true" e-legend-visible="false" data-ej-enablecanvasrendering="true" e-canresize="true"  e-yzoomfactor="1.5" e-xzoomfactor="1.5" e-xzoomposition="2.5" e-yzoomposition="2.5" ></div>



I am working with Synchfusion chart with angular js but when I resize the browser windows charts become blank
but after zoom its working

I think this proerty is not properly working can you provide solutions.
  e-canresize="true"




So my problem is when with anuglar  js when I draw the chart on browser resize chart should display property 
I am working with multiple chart also this should work on multiple chart also.


Point 2 : Can you provide example of responsive chart with angular js with all available preoperties of chart 


Thank you
Waiting for your quick reply.
As always







Vinothkumar Arumugam [Syncfusion]
Replied On June 23, 2015 12:58 PM UTC

Hi Bharath,

Please find the below responses for your reported queries.

Query 1:

We are generating multiple chart on single screen.with ng-repeatfor example I have 5 charts on my screen when I put mouse pointer on my third chart It show tooltip on first chart. 

Sorry for the inconvenience caused.

We are able to reproduce the issue. So we have logged defect on this “DOM <div> element id not proper when dynamically generating id using Angular directive ng-repeat”. 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
Query 2:

I am working with Synchfusion chart with angular js but when I resize the browser windows charts become blankbut after zoom its working

I think this proerty is not properly working can you provide solutions.

  e-canresize="true".


We have analyzed your reported issue with our sample; we are not able to reproduce the issue. Can you please check with the sample in the below location.

Sample Location:  http://www.syncfusion.com/downloads/support/forum/118945/ze/Angular1814210066

If still you face the problem, please revert us by modifying the sample based on your application along with replication procedure. This would be helpful for us to serve you.


Please let us know if you have any concern.
Thanks,
Vinothkumar Arumugam.


Bharat Buddhadev
Replied On June 25, 2015 12:56 PM UTC


Thanks in advance
Waiting for your quick reply as usual

<select id="drpDashboard" ej-dropdownlist e-datasource="dashBoardViewModelList" e-fields-id="Id" e-fields-text="DashboardName" e-fields-value="Id" e-width="100%" e-select="getDashboard" e-selecteditemindex="0" e-allowscrolling="true"></select>


This is my  dropdown generated with anuglar js.

I want to vertical and horizontal scroll bar with this dropdown control.
and I want to fire on change event and keypress event with this angularise dropdown...





Harikrishnan P [Syncfusion]
Replied On June 29, 2015 01:33 PM UTC

Hi Bharat,

By default, the Dropdownlist text will wrap into new line when the width of the dropdownlist text exceeds the dropdown popup width. We can avoid this by specifying the CSS property “white-space” as “nowrap”. If you want the horizontal popup means, as said in our previous update, assign the popuplist’s outerwidth to the width of the scroller object in the Dropdownlist ‘create’ event as shown below,


               $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();

               };


Query : I want to fire on change event and keypress event with this angularise dropdown

To bind the ‘change’ event to the Dropdownlist, specify the event with the prefix “e-“ as shown below


<input id="bookSelect" ej-dropdownlist e-enableIncrementalSearch="true" e-datasource="dataList" e-popupwidth="200px" e-value="value" e-create="oncreate" e-change="onchange" />


Then in the Angular scope define the event as shown below,


               $scope.onchange = function (e) {

                console.log("change event trigerred");

                   //Your code

               }


“KeyPress” event:

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


Please let us know if you have further queries.

Regards,
HariKrishnan

Vinothkumar Arumugam [Syncfusion]
Replied On July 1, 2015 12:46 PM UTC

Hi Bharath,
We have analyzed your reported query.
Please find the below response
Query:
       <div class="setId" style="width: 100%" ng-attr-id="{{chart.Id}}" set-chart-id-directive ng-hide="errorMessage "
                             e-canresize="true"
                             e-enablecanvasrendering="true"
                             zooming-enable-enablemousewheel="true"
                             e-title-font-size="12px"
                             ej-chart e-load="loadChart"
                             e-series="chartSeriesCollection"
                             e-commonseriesoptions-datasource="dataSource"
                             e-commonseriesoptions-xname="timestamp"
                             e-commonseriesoptions-yname="value"
                             e-commonseriesoptions-type="line"
                             e-primaryxaxis-valuetype="datetime"
                             e-primaryxaxis-labelformat="@dateFormat"
                             e-primaryxaxis-font-size="8px"
                             e-primaryxaxis-edgelabelplacement="shift"
                             e-primaryxaxis-labelintersectaction="rotate45"
                             e-primaryxaxis-intervaltype="Days"
                             e-primaryyaxis-valuetype="double"
                             e-zooming-enable="true"
                             e-zooming-enablemousewheel="true"
                             e-legend-visible="false"
                             e-commonseriesoptions-tooltip-visible="true"
                             e-commonseriesoptions-tooltip-format="#series.name#"
                             e-annotations-content="chartSubTitle"
                             data-e-primaryyaxis-title-text="{{chart.VerticalAxisTitle}}">
                        </div>
Here we have set
e-primaryxaxis-intervaltype="Days"

Point 1 : I am rendering chart Its show only single date but when I do zoom in or zoom out
It  show all dates.Sharing image with your

Point 2 : In second when I have only one day in chart I want to disply only  time on chart
Response:

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.


Vinothkumar Arumugam [Syncfusion]
Replied On July 2, 2015 10:43 AM UTC

Hi Bharath,

Please find the below response.
Query :

When we generate chart it also automatically generate three button when we do zoom 

 Can we control it with angualar or any js or any other scripting.

I am sharing image with you so you can get better idea.
with red border

Response:
Regarding your query; we do not get your points what you are trying to do with Zooming buttons, Whether you need to change UI look/Functionalities of the Zoomkit by using Angular JS.

Kindly revert back us with some more details on this. It will be helpful for us to serve you.
Please let us know if you have any concern.
Thanks,
Vinothkumar Arumugam


Bharat Buddhadev
Replied On July 2, 2015 10:51 AM UTC

Thanks for Reply


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

Bharat Buddhadev
Replied On July 3, 2015 05:11 AM UTC


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 

Attachment: New_folder_(3)_2071ff3b.rar

Bharat Buddhadev
Replied On July 3, 2015 12:05 PM UTC


Can you suggest way how to do better resizing of charts
because when we resize the browser we are not able to see the chart content properly.
and its icon becke



Attachment: better_resizing_2284f1a4.rar

Vinothkumar Arumugam [Syncfusion]
Replied On July 3, 2015 01:00 PM UTC

Hi Bharat,
Please find the below response for your reported queries.
Query 1:

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.


Bharat Buddhadev
Replied On July 6, 2015 12:00 PM UTC

Hi Thanks for your reply

I am creating chart

   <div class="setId" style="width: 100%"  ng-attr-id="{{chart.Id}}" set-chart-id-directive ng-hide="errorMessage" 
                             e-canresize="true"
                             e-enablecanvasrendering="true"
                             zooming-enable-enablemousewheel="true"
                             e-title-font-size="12px"
                             ej-chart e-load="loadChart"
                             e-series="chartSeriesCollection"
                             e-commonseriesoptions-datasource="dataSource"
                             e-commonseriesoptions-xname="timestamp"
                             e-commonseriesoptions-yname="value"
                             e-commonseriesoptions-type="line"
                             e-primaryxaxis-valuetype="datetime"
                             e-primaryxaxis-labelformat="@dateFormat"
                             e-primaryxaxis-font-size="8px"
                             e-primaryxaxis-edgelabelplacement="shift"
                             e-primaryxaxis-labelintersectaction="rotate45"                            
                             e-primaryyaxis-valuetype="double"
                             e-zooming-enable="true"
                             e-zooming-enablemousewheel="true"
                             e-legend-visible="false"
                             e-commonseriesoptions-tooltip-visible="true"
                             e-commonseriesoptions-tooltip-format="#series.name#"
                             e-annotations-content="chartSubTitle"
                             data-e-primaryyaxis-title-text="{{chart.VerticalAxisTitle}}"
                             >                            

                        </div>

Point1 : on mouse wheel scroll event   chart reset,pane,zoom become disable its not working.
 Sharing image with you. so make resolve

  



Bharat Buddhadev
Replied On July 6, 2015 12:12 PM UTC

I am generating sychfusion chart
using angualr js
   <div class="setId" style="width: 100%"  ng-attr-id="{{chart.Id}}" set-chart-id-directive ng-hide="errorMessage" 
                             e-canresize="true"
                             e-enablecanvasrendering="true"
                             zooming-enable-enablemousewheel="true"
                             e-title-font-size="12px"
                             ej-chart e-load="loadChart"
                             e-series="chartSeriesCollection"
                             e-commonseriesoptions-datasource="dataSource"
                             e-commonseriesoptions-xname="timestamp"
                             e-commonseriesoptions-yname="value"
                             e-commonseriesoptions-type="line"
                             e-primaryxaxis-valuetype="datetime"
                             e-primaryxaxis-labelformat="@dateFormat"
                             e-primaryxaxis-font-size="8px"
                             e-primaryxaxis-edgelabelplacement="shift"
                             e-primaryxaxis-labelintersectaction="rotate45"                            
                             e-primaryyaxis-valuetype="double"
                             e-zooming-enable="true"
                             e-zooming-enablemousewheel="true"
                             e-legend-visible="false"
                             e-commonseriesoptions-tooltip-visible="true"
                             e-commonseriesoptions-tooltip-format="#series.name#"
                             e-annotations-content="chartSubTitle"
                             data-e-primaryyaxis-title-text="{{chart.VerticalAxisTitle}}"
                             >                            

                        </div>

 I want to persofim task on zoom 

Can yo give me the list of event for chart with example.


Vinothkumar Arumugam [Syncfusion]
Replied On July 6, 2015 01:18 PM UTC

Hi Bharat,
Please find the below response.
Query :

I .Can you suggest way how to do better resizing of charts

   because when we resize the browser we are not able to see the chart content properly.

   and its icon becke

II. 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 have analyzed this. Currently there is no support to hide/disable the zoomkit when the chart has been resized. So we have logged a feature request for this “Need to support for smart responsive chart”. A support incident to track the status of this feature 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

Please let us know if you have any concern.

Thanks,
Vinothkumar.


John
Replied On September 14, 2016 11:47 AM UTC

I am having ERR_NAME_NOT_RESOLVED problem in my pc...

Dharanidharan Dharmasivam [Syncfusion]
Replied On September 15, 2016 05:40 AM UTC

Hi Bharat, 

We have analyzed your query. We have prepared a sample in which we were not able to reproduce the mentioned issue(ERR_NAME_NOT_RESOLVED).  

The issue might be due to DNS , mostly in chrome browser. Kindly revert us with the following details to reproduce the issue, so that we can provide solution sooner. 
1.       Provide your sample or modify the attached sample with replication procedure. 
2.       Provide browser specification. 
3.       Provide system specification. 

We have attached the sample for your reference. Kindly find the sample from below location, 

Thanks, 
Dharani. 


John
Replied On September 15, 2016 09:02 AM UTC

Found the solution
its my chrome's problem
now everything is working
thanks


Dharanidharan Dharmasivam [Syncfusion]
Replied On September 15, 2016 11:12 AM UTC

Hi Bharat, 

Thanks for your update. Please get in touch with us, if you would require any further assistance. 

Thanks, 
Dharani. 


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.

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

;