Menu
I want to sent a line chart in the body of the E-mail using ASP.Net and C#. I have written a code to show the chart in a div tag. I want to sent the line chart in mail. How to do this?
My Code: jQuery
var chartData;
google.load("visualization", "1", { packages: ["corechart"] });
function Chart() {
$.ajax({
url: "HHT_Tracking.aspx/GetData",
data: "",
dataType: "json",
type: "POST",
contentType: "application/json; chartset=utf-8",
success: function (data) {
chartData = data.d;
},
error: function () {
alert("Error loading data! Please try again.");
}
}).done(function () {
//google.setOnLoadCallback(drawChart);
drawChart();
});
};
function drawChart() {
var data = google.visualization.arrayToDataTable(chartData);
var options = {
title: "Server Monitoring Date Wise",
pointSize: 5,
vAxis: { slantedText: true, slantedTextAngle: 90, title: 'MINUTES' }
};
var lineChart = new google.visualization.LineChart(document.getElementById('chartDiv'));
lineChart.draw(data, options);
}
Source Code:
<tr>
<td>
<div id="chartDiv" style="width: 100%; height: 700px"></div>
</td>
</tr>
495
Assuming that you are using System.Web.UI.DataVisualization for your charting, the chart class has a method SaveImage that you can use for saving that chart as a graphic (e.g. png) into a memory stream. Use that stream to spit out data-uri which you can then use in your HTML formatted email body.
For example:
Charting.Chart myChart = new Charting.Chart();
System.IO.MemoryStream imgStream = new System.IO.MemoryStream();
myChart.SaveImage(imgStream, Charting.ChartImageFormat.Png);
return "<img class='chartImage' src='data:image/png;base64, " + System.Convert.ToBase64String(imgStream.ToArray()) + "' />";
This code will return an img tag with data-uri as its src which you can then use in your HTML body of email.
136
Flow code:
The head tag:
<head runat="server">
<title></title>
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={
'modules':[{
'name':'visualization',
'version':'1',
'packages':['corechart']
}]
}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
var txtBase64 = document.getElementById('txtBase64Image');
google.visualization.events.addListener(chart, 'ready', function () {
txtBase64.value = chart.getImageURI();
});
chart.draw(data, options);
}
</script>
</head>Body tag:
<body>
<form id="form1" runat="server">
<div id="curve_chart" style="width: 900px; height: 500px"></div>
<%--If you want, you can textbox visible false.--%>
<asp:TextBox ID="txtBase64Image" runat="server" Width="600" TextMode="MultiLine"></asp:TextBox><br/>
<asp:Button ID="Button1" runat="server" Text="Send Mail" OnClick="Button1_Click" />
</form>
</body>After c# code:
public Image Base64ToImage(string base64String)
{
var imageBytes = Convert.FromBase64String(base64String);
using (var ms = new MemoryStream(imageBytes, 0, imageBytes.Length))
{
var image = Image.FromStream(ms, true);
return image;
}
}
Button click: Send to mail chart. Look EmailSender https://github.com/serkomut/Serkomut.MailSender
protected void Button1_Click(object sender, EventArgs e)
{
var split = txtBase64Image.Text.Split(',')[1];
var image = Base64ToImage(split);
var stream = new MemoryStream();
image.Save(stream, ImageFormat.Jpeg);
stream.Position = 0;
var result = new EmailSender()
.FromHost("smtp.gmail.com")
.Credential("[email protected]", "mailPassword")
.FromTo(new Message
{
From = "[email protected]",
To = "[email protected]"
})
.Subject("Subject")
.Body("Content text...")
.Attachment(new Attachment(stream, "chart_image.jpg", "image/jpg"))
.Send();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
