Send Chart in Email | 易学教程

问题

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>

回答1:

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("sendermail@gmail.com", "mailPassword")
                    .FromTo(new Message
                    {
                        From = "sendermail@gmail.com",
                        To = "tomail@gmail.com"
                    })
                    .Subject("Subject")
                    .Body("Content text...")
                    .Attachment(new Attachment(stream, "chart_image.jpg", "image/jpg"))
                    .Send();
}

回答2:

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.

来源：https://stackoverflow.com/questions/31800959/send-chart-in-email

标签

ASP.NET

linechart