Chart DataPerformance !!!Bar and Column ChartsLine and Area ChartsPie and Funnel ChartsScatter and Bubble ChartsRadar and Polar ChartsFinancial ChartsGantt ChartsCombinational ChartsDynamic ChartsWorking with Chart AxesChart FeaturesCustomizing ChartClient-Side Events |
This sample demonstrates get jqChart image data URL with .jqChart('toDataURL',
mimetype) method.
The jqChart can export its image to a data URL (e.g., data:image/png;base64,iVBORw0KGg...). This data may then be rendered in the browser, which could then be saved. For detailed implementation, please take a look at the Aspx, Razor and Controller code tabs.
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<SamplesBrowser.Models.ChartData>>" %>
<%@ Import Namespace="JQChart.Web.Mvc" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="~/Content/jquery.jqChart.css" />
<link rel="stylesheet" type="text/css" href="~/Content/themes/le-frog/jquery-ui-1.8.20.css" />
<script src="<%: Url.Content("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script>
<body>
<div>
<input id="button" type="button" value="Click to view the chart as an image" />
<br />
<table>
<tr>
<td>
<div>
<%= Html.JQChart()
.Chart(Model)
.ID("jqChart")
.Width(300)
.Height(250)
.Title("Image Data URL")
.Legend(false)
.Border(border => border.StrokeStyle("#6ba851"))
.Background(background => background.LinearGradient(0, 0, 0, 1).ColorStops(stop =>
{
stop.Add(0, "#d2e6c9");
stop.Add(1, "white");
}))
.Series(series =>
{
series.Column().XValues(el => el.Label)
.YValues(el => el.Value1)
.FillStyle(background => background.LinearGradient(0, 0, 1, 0).ColorStops(stop =>
{
stop.Add(0, "#65c2e8");
stop.Add(0.49, "#55b3e1");
stop.Add(0.5, "#3ba6dc");
stop.Add(1, "#2794d4");
}));
}
)
.Render()%>
</div>
</td>
<td>
<img src="" id="canvasImg" alt="Click on the button to see me" />
</td>
</tr>
</table>
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#button').click(function () {
var dataURL = $('#jqChart').jqChart('todataurl', 'image/png');
document.getElementById("canvasImg").src = dataURL;
});
});
</script>
</div>
</body>
</html>
@model IEnumerable<SamplesBrowser.Models.ChartData>
@using JQChart.Web.Mvc
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="~/Content/jquery.jqChart.css" />
<link rel="stylesheet" type="text/css" href="~/Content/themes/le-frog/jquery-ui-1.8.20.css" />
<script src="@Url.Content("~/Scripts/jquery-1.11.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqChart.min.js")" type="text/javascript"></script>
<body>
<div>
<input id="button" type="button" value="Click to view the chart as an image" />
<br />
<table>
<tr>
<td>
<div>
@(Html.JQChart()
.Chart(Model)
.ID("jqChart")
.Width(300)
.Height(250)
.Title("Image Data URL")
.Legend(false)
.Border(border => border.StrokeStyle("#6ba851"))
.Background(background => background.LinearGradient(0, 0, 0, 1).ColorStops(stop =>
{
stop.Add(0, "#d2e6c9");
stop.Add(1, "white");
}))
.Series(series =>
{
series.Column().XValues(el => el.Label)
.YValues(el => el.Value1)
.FillStyle(background => background.LinearGradient(0, 0, 1, 0).ColorStops(stop =>
{
stop.Add(0, "#65c2e8");
stop.Add(0.49, "#55b3e1");
stop.Add(0.5, "#3ba6dc");
stop.Add(1, "#2794d4");
}));
}
)
.Render()
)
</div>
</td>
<td>
<img src="" id="canvasImg" alt="Click on the button to see me" />
</td>
</tr>
</table>
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#button').click(function () {
var dataURL = $('#jqChart').jqChart('todataurl', 'image/png');
document.getElementById("canvasImg").src = dataURL;
});
});
</script>
</div>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace SamplesBrowser.Models
{
public class ChartData
{
public static List<ChartData> GetData()
{
var data = new List<ChartData>();
data.Add(new ChartData("A", 46, 78));
data.Add(new ChartData("B", 35, 72));
data.Add(new ChartData("C", 68, 86));
data.Add(new ChartData("D", 30, 23));
data.Add(new ChartData("E", 27, 70));
data.Add(new ChartData("F", 85, 60));
data.Add(new ChartData("D", 43, 88));
data.Add(new ChartData("H", 29, 22));
return data;
}
public static List<ChartData> GetLineAreaChartData()
{
var data = new List<ChartData>();
data.Add(new ChartData("A", 56, 62));
data.Add(new ChartData("B", 30, 70));
data.Add(new ChartData("C", 58, 68));
data.Add(new ChartData("D", 65, 54));
data.Add(new ChartData("E", 40, 52));
data.Add(new ChartData("F", 36, 60));
data.Add(new ChartData("D", 70, 48));
return data;
}
public static List<ChartData> GetMultipleAxesSampleData()
{
var data = new List<ChartData>();
data.Add(new ChartData("A", 1, 40));
data.Add(new ChartData("B", 4, 60));
data.Add(new ChartData("C", 3, 62));
data.Add(new ChartData("D", 5, 52));
data.Add(new ChartData("E", 2, 70));
data.Add(new ChartData("F", 1, 75));
return data;
}
public static List<ChartData> GetPieChartData()
{
var data = new List<ChartData>();
data.Add(new ChartData("United States", 65));
data.Add(new ChartData("United Kingdom", 58));
data.Add(new ChartData("Germany", 30));
data.Add(new ChartData("India", 60));
data.Add(new ChartData("Russia", 65));
data.Add(new ChartData("China", 75));
return data;
}
public static List<ChartData> GetFunnelChartData()
{
var data = new List<ChartData>();
data.Add(new ChartData("United States", 650));
data.Add(new ChartData("United Kingdom", 530));
data.Add(new ChartData("Germany", 440));
data.Add(new ChartData("India", 280));
data.Add(new ChartData("Russia", 150));
data.Add(new ChartData("China", 75));
return data;
}
public static List<ChartData> GetPyramidChartData()
{
var data = new List<ChartData>();
data.Add(new ChartData("United States", 200));
data.Add(new ChartData("United Kingdom", 220));
data.Add(new ChartData("Germany", 260));
data.Add(new ChartData("India", 280));
data.Add(new ChartData("Russia", 450));
data.Add(new ChartData("China", 600));
return data;
}
public static List<ChartData> GetCategoryAxisSampleChartData()
{
var data = new List<ChartData>();
data.Add(new ChartData("Category 1", 70));
data.Add(new ChartData("Category 2", 40));
data.Add(new ChartData("Category 3", 85));
data.Add(new ChartData("Category 4", 50));
data.Add(new ChartData("Category 5", 25));
data.Add(new ChartData("Category 6", 40));
return data;
}
public static List<ChartData> GetLogarithmicSampleChartData()
{
var data = new List<ChartData>();
data.Add(new ChartData("A", 5));
data.Add(new ChartData("B", 50));
data.Add(new ChartData("C", 500));
data.Add(new ChartData("D", 5000));
data.Add(new ChartData("E", 50000));
return data;
}
public ChartData(string label, double value1)
{
this.Label = label;
this.Value1 = value1;
}
public ChartData(string label, double value1, double value2)
{
this.Label = label;
this.Value1 = value1;
this.Value2 = value2;
}
public string Label { get; set; }
public double Value1 { get; set; }
public double Value2 { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SamplesBrowser.Models;
namespace SamplesBrowser.Controllers
{
public class ChartController : Controller
{
public ActionResult ImageDataURL()
{
return View(ChartData.GetData());
}
}
}
|
Follow us on Twitter