Reputation: 1327
The following logic runs onload of the web page and calls a partial view to display data in the chart:
<img src='@Url.Action("_GetChartDetails", "Chart", new { chartType = "Won" })' id="chartid" />
this works.
but when I do it from javascript the image is blank. Could anyone advice what I could be doing wrong?
$http.get("http://localhost:51666/Chart/_GetChartDetails?chartType=Loss")
.success(function (response) {
alert(response);
//$("#chartid").attr("src", "data:image/png;base64," + response);
document.getElementById("chartid").src = response;
}).error(function (data, status, headers, config) {
alert(data);
});
Upvotes: 1
Views: 50
Reputation: 17049
Instead of manually doing an $http.get
to generate the chart why don't you just change the image source to point to the partial view and pass through the required parameter (Won or Lost):
$scope.GetChartDetails = function (chartType) {
var img = document.createElement('img');
img.src = "/Chart/_GetChartDetails?chartType=" + chartType;
var node = document.getElementById('chart');
while (node.hasChildNodes()) {
node.removeChild(node.lastChild);
}
document.getElementById('chart').appendChild(img);
};
Upvotes: 1
Reputation: 4922
Check your if the image is correct defined:
.success(function (response) {
var image = document.createElement('img');
image.onload = function () {
//if it's correct created you can open it in console (click)and see what your server returns, it may be the correct response but you may have issues with CSS.
console.log(image);
};
image.src = response;
}
Upvotes: 0