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.
Unfortunately, activation email could not send to your email. Please try again.

Export to excel of Chart is don't work.

Thread ID:

Created:

Updated:

Platform:

Replies:

127280 Nov 8,2016 04:05 AM Nov 10,2016 04:13 AM ASP.NET MVC 4
loading
Tags: Chart
Yuta
Asked On November 8, 2016 04:05 AM

Hi,
I want to export the data chart, but it don't work.
I'm implemented in accordance with Example.
Please teach me what is bad,
also let me know if there is an example to other.

* Export Chart Example

-------------------------------------------------------------------------------
  View
-------------------------------------------------------------------------------
<button onclick="download()">down load</button>
<div id="chart"></div>

<script>
$(function ($) {
    $("#chart").ejChart({
        "exportSettings": {
            "action": "ExportChart",
            "mode"  : "server",
            "type"  : "xlsx"
        }
    });
});
function download() {
    $("#chart").ejChart("export");
}
</script>

-------------------------------------------------------------------------------
  Controller
-------------------------------------------------------------------------------
public void ExportChart(string Data, string ChartModel)
{
    ChartProperties obj = ConvertChartObject(ChartModel);
    string type         = obj.ExportSettings.Type.ToString().ToLower();
    string fileName     = obj.ExportSettings.FileName;
    string orientation  = obj.ExportSettings.Orientation.ToString();
    
    List<KeyValuePair<string, object>> chartData = new List<KeyValuePair<string, object>>();
    chartData.Add(new KeyValuePair<string, object>("John", 10));
    chartData.Add(new KeyValuePair<string, object>("Jake", 20));

    ExcelExport exp = new ExcelExport();
    exp.Export(obj, (IEnumerable<KeyValuePair<string, object>>)chartData, fileName + ".xlsx", ExcelVersion.Excel2010, null, null);
}

private ChartProperties ConvertChartObject(string ChartModel)
{
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    IEnumerable<KeyValuePair<string, object>> div = (IEnumerable<KeyValuePair<string, object>>)serializer.Deserialize(ChartModel, typeof(IEnumerable<KeyValuePair<string, object>>));
    ChartProperties chartProp = new ChartProperties();
    foreach (KeyValuePair<string, object> ds in div)
    {
        var property = chartProp.GetType().GetProperty(ds.Key, BindingFlags.Instance | BindingFlags.Public | BindingFlags.IgnoreCase);
        if (property != null)
        {
            Type type = property.PropertyType;
            string serialize = serializer.Serialize(ds.Value);
            object value = serializer.Deserialize(serialize, type);
            property.SetValue(chartProp, value, null);
        }
    }
    return chartProp;
}

Dharanidharan Dharmasivam [Syncfusion]
Replied On November 9, 2016 08:13 AM

Hi Yuta, 

Thanks for using Syncfusion product. 

We have analyzed your query. In chart, you have to specify the property  for x and y values for the series in the given data. So that chart will get export. Find the code snippet below, 
 
ASP.NET MVC: 

//Creating dataSource in codeBehind 
public ActionResult Index() 
        { 
            List<KeyValuePair> chartData = new List<KeyValuePair>(); 
            chartData.Add(new KeyValuePair("John", 10)); 
            chartData.Add(new KeyValuePair("Jake", 20)); 
            ViewBag.data = chartData; 
            
            return View(); 
        } 


@(Html.EJ().Chart("container") 
//... 
//Binding dataSource to chart 
.Series(sr=>sr. 
          XName("X").YName("Y").DataSource(@ViewBag.data) 
            
          .Add()) 
) 
 
//Function to download chart 
function download() { 
    var chart = $("#container").ejChart("instance"); 
    chart.model.exportSettings.fileName = "Chart";      
    chart.model.exportSettings.action = "/Home/ExportChart"; 
    chart.model.exportSettings.type = "xlsx"; 
    chart.model.exportSettings.mode = "server";      
    chart.export(); 
     
} 
  

Screenshot: 
 

For your reference we have attached the sample. Kindly find the sample from below location. 
  
Thanks, 
Dharani. 


Yuta
Replied On November 9, 2016 08:12 PM

Hello,

Thank you for the advice and sample.
As of advice, It working by adding the following modifications.
Thank you so very much. :D

1)  Changing the "x" and "y" to upper case.
2)  Adding a property of "xNameand "yName".

-------------------------------------------------------------------------------
  Before
-------------------------------------------------------------------------------
.........
series: [
    {
        name:"",
        points:[
            { x: 1, y: 2 },
            { x: 3, y: 4 },
            { x: 5, y: 6 },
            { x: 7, y: 8 }
]
    }
]
.........

-------------------------------------------------------------------------------
  After
-------------------------------------------------------------------------------
.........
series: [
    {
        name:"",
        points:[
            { X: 1, Y: 2 },
            { X: 3, Y: 4 },
            { X: 5, Y: 6 },
            { X: 7, Y: 8 }
],
    xName: "X",
    yName: "Y"
    }
]
.........


Yuta
Replied On November 9, 2016 09:05 PM

Sorry, The following was unnecessary.

1)  
Changing the "x" and "y" to upper case.

Dharanidharan Dharmasivam [Syncfusion]
Replied On November 10, 2016 04:13 AM

Hi Yuta, 
 
Thanks for your update. 
 
Kindly revert us, if you need 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.

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.

;