Vega: Not Show image mark on multiple charts in IE11
I have some charts with image mark to show in my web page.
In IE11, the image mark do not be show sometimes. but in chrome or firefox , it work well.
as following image, person mark should be show , but nothing.
I check it in debug mode, found no image path to set the href tag.
see following image
How can I detected this error.
It is my code.
<head>
<script src="https://vega.github.io/vega/assets/promise.min.js"></script>
<script src="https://vega.github.io/vega/assets/symbol.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.5/vega.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-rc3/vega-lite.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.18/vega-embed.js"></script>
</head>
<body>
<div id="view"></div>
<div id="view1"></div>
<div id="view2"></div>
<script>
var sameAgeData = [
{
"name": "table",
"values": [
{ "x": 0, "y": 13040, "Origin": "#6dd1f6", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/HAR_GraphMark.svg" },
{ "x": 10, "y": 13040, "Origin": "#6dd1f6", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/HAR_GraphMark.svg" },
{ "x": 20, "y": 13040, "Origin": "#6dd1f6", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/HAR_GraphMark.svg" },
{ "x": 30, "y": 13040, "Origin": "#6dd1f6", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/HAR_GraphMark.svg" },
{ "x": 40, "y": 42394, "Origin": "#6dd1f6", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/HAR_GraphMark.svg" },
{ "x": 50, "y": 27348, "Origin": "#6dd1f6", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/HAR_GraphMark.svg" },
{ "x": 60, "y": 11053, "Origin": "#6dd1f6", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/HAR_GraphMark.svg" },
{ "x": 70, "y": 13040, "Origin": "#6dd1f6", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/HAR_GraphMark.svg" },
{ "x": 80, "y": 13040, "Origin": "#6dd1f6", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/HAR_GraphMark.svg" },
{ "x": 90, "y": 13040, "Origin": "#6dd1f6", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/HAR_GraphMark.svg" },
{ "x": 100, "y": 13040, "Origin": "#fcc800", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/HAR_GraphMark.svg" },
{ "x": 120, "y": 13040, "Origin": "#6dd1f6", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/HAR_GraphMark.svg" },
]
}
];
var sameHealthData = [ // 52c3f1 //e3583e
{
"name": "table",
"values": [
{ "x": 2.1896, "y": 0, "Origin": "#e3583e", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/Diamond.svg" },
{ "x": 1.8484, "y": 10, "Origin": "#e3583e", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/Diamond.svg" },
{ "x": 2.5542, "y": 20, "Origin": "#e3583e", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/Diamond.svg" },
{ "x": 1.1861, "y": 30, "Origin": "#e3583e", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/Diamond.svg" },
{ "x": -0.916, "y": 40, "Origin": "#52c3f1", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/Diamond.svg" },
{ "x": 1.4496, "y": 50, "Origin": "#e3583e", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/Diamond.svg" },
{ "x": -1.192, "y": 60, "Origin": "#e3583e", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/Diamond.svg" },
{ "x": 0.2382, "y": 70, "Origin": "#e3583e", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/Diamond.svg" },
{ "x": -0.5181, "y": 80, "Origin": "#52c3f1", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/Diamond.svg" },
{ "x": 0.4644, "y": 90, "Origin": "#e3583e", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/Diamond.svg" },
{ "x": -0.2119, "y": 100, "Origin": "#52c3f1", "img": "https://callcenterhealthagetest.blob.core.windows.net/resource/Diamond.svg" }
]
}
];
var vlSpec = {
"width": 350,
"height": 45,
"data": sameAgeData,
"scales": [
{
"name": "xscale",
"type": "band",
"range": "width",
"domain": { "data": "table", "field": "x" }
},
{
"name": "yscale",
"type": "linear",
"range": "height",
"domain": { "data": "table", "field": "y" },
"zero": true,
"nice": true
}
],
"axes": [
],
"marks": [
{
"type": "rect",
"from": { "data": "table" },
"encode": {
"enter": {
"x": { "scale": "xscale", "field": "x", "offset": 8 },
"width": { "scale": "xscale", "band": true, "offset": -12.17 },
"fill": {
"field": "Origin"
},
"y": { "scale": "yscale", "field": "y", },
"y2": { "scale": "yscale", "value": 0 }
},
"update": {
},
"hover": {
}
}
},
{
"type": "image",
"from": { "data": "table" },
"encode": {
"enter": {
"url": { "field": "img" },
"aspect": false,
"width": { "value": 14 },
"height": { "value": 24 },
"x": { "scale": "xscale", "field": "x", "offset": 9 },
"y": { "scale": "yscale", "field": "y", "offset": -1 },
"align": { "value": "left" },
"baseline": { "value": "bottom" }
},
"update": {
},
"hover": {
}
}
}
]
};
var lineBaseSpec = {
"width": 220,
"height": 62,
"padding": { "left": 0, "top": 0, "right": 0, "bottom": 0 },
"data": [
{
"name": "table",
"values": [
{ "x": 0.472, "y": 72, "c": 1, },
{ "x": 1.482, "y": 112, "c": 0, },
{ "x": 2.525, "y": 190, "c": 0, },
]
},
{
"name": "backgroundtable",
"values": [
{ "y": 0, "y1": 108, "height": 109, "x": 0, "x1": 3, "color": "#cde8d5" },
{ "y": 112, "y1": 122, "height": 15, "x": 0, "x1": 3, "color": "#faf6c2" },
{ "y": 126, "y1": 180, "height": 52, "x": 0, "x1": 3, "color": "#fcd3c2" },
]
}
],
"scales": [
{
"name": "x",
"type": "linear",
"range": [0, 214.5],
"clamp": true,
"nice": true,
"zero": true,
"domain": { "data": "table", "field": "x" },
"domainMax": 3,
"domainMin": 0,
},
{
"name": "y",
"type": "linear",
"range": "height",
"clamp": true,
"zero": true,
"domain": { "data": "table", "field": "y" },
"domainMax": 180,
"domainMin": 0
},
],
"axes": [
{
"orient": "bottom", "zindex": 1, "scale": "x", "labels": false, "ticks": true, "tickSize": -5, "tickCount": 3,
"encode": {
"ticks": {
"enter": {
"stroke": { "value": "#0068b7" },
"strokeWidth": { "value": 0.5 },
}
},
"domain": {
"enter": {
"stroke": { "value": "#0068b7" },
"strokeWidth": { "value": 0.5 },
}
},
}
},
{
"orient": "left",
"scale": "y",
"zindex": 1,
"format": ".5",
"tickSize": -4,
"values": [0, 110, 126, 180],
"encode": {
"ticks": {
"enter": {
"stroke": { "value": "#0068b7" },
"strokeWidth": { "value": 0.5 },
}
},
"labels": {
"interactive": true,
// "y": { "scale": "x", "field": "x" },
"enter": {
"text": {},
"fill": { "value": "#0072bd" },
"font": { "value": "Roboto Regular" },
"fontSize": { "value": 6 },
"align": { "value": "left" },
"baseline": { "value": "middle" },
"dx": { "value": -3.5 },
},
},
"domain": {
"enter": {
"stroke": { "value": "#0068b7" },
"strokeWidth": { "value": 0.5 },
}
},
}
}
],
"marks": [
{
"type": "group",
"marks": [
{
"type": "rect",
"from": { "data": "backgroundtable" },
"encode": {
"enter": {
"x": { "scale": "x", "field": "x" },
"x2": { "scale": "x", "field": "x1" },
"y": { "scale": "y", "field": "y" },
"y2": { "scale": "y", "field": "y1" },
//"height": {"scale": "y", "field": "height"},
"fill": { "field": "color" },
"opacity": { "value": 1 },
}
}
}
]
},
{
"type": "group",
"marks": [
{
"type": "text",
"from": { "data": "table" },
"encode": {
"enter": {
"text": { "field": "y" },
"x": { "scale": "x", "field": "x" },
"y": { "scale": "y", "field": "y" },
"fontSize": { "value": 8 },
"font": { "value": "Roboto Regular" },
"align": { "value": "center" },
"baseline": { "value": "bottom" },
"dy": { "value": -4 },
}
}
},
{
"type": "image",
"from": { "data": "table" },
"encode": {
"enter": {
"url": { "value": "https://callcenterhealthagetest.blob.core.windows.net/resource/Rectangle.svg" },
"aspect": true,
"x": { "scale": "x", "field": "x" },
"y": { "scale": "y", "field": "y" },
"width": { "value": 7 },
"height": { "value": 7 },
"align": { "value": "center" },
"baseline": { "value": "middle" },
}
}
},
]
},
{
"type": "group",
"from": {
"facet": {
"name": "series",
"data": "table",
"groupby": "c"
}
},
"marks": [
{
"type": "line",
"from": { "data": "series" },
"encode": {
"enter": {
"x": { "scale": "x", "field": "x" },
"y": { "scale": "y", "field": "y" },
"stroke": { "value": "#000000" },
"strokeWidth": { "value": 1 }
},
}
}
]
}
]
};
var sameHealth = {
"width": 390,
"height": 365,
"padding": { "left": 0, "top": 0, "right": 0, "bottom": 7 },
"data": sameHealthData,
"scales": [
{
"name": "yscale",
"type": "band",
"range": [0, 380],
"round": true,
"domain": { "data": "table", "field": "y" }
},
],
"axes": [
],
"marks": [
{
"type": "group",
"encode": {
},
"scales": [
{
"name": "xscale",
"type": "linear",
"range": [0, 364],
"nice": true,
"zero": true,
"domain": { "data": "table", "field": "x" },
"domainMax": 3.33333333333333,
"domainMin": -3.33333333333333
}
],
"axes": [
],
"marks": [
{
"type": "rect",
"from": { "data": "table" },
"encode": {
"enter": {
"x": { "scale": "xscale", "field": "x", },
"x2": { "scale": "xscale", "value": 0 },
"y": { "scale": "yscale", "field": "y" },
"height": { "scale": "yscale", "band": 1.4, "offset": -27.6 },
"fillOpacity": { "value": 1 },
"fill": { "field": "Origin" }
}
}
}
]
},
{
"type": "group",
"encode": {
},
"padding": { "left": -10, "top": 0, "right": 0, "bottom": 0 },
"scales": [
{
"name": "xscale",
"type": "linear",
"range": [0, 364],
"nice": true,
"zero": true,
"clamp": true,
"domain": { "data": "table", "field": "x" },
"domainMax": 3.33333333333333,
"domainMin": -3.33333333333333
}
],
"axes": [
],
"marks": [
{
"type": "image",
"from": { "data": "table" },
"encode": {
"enter": {
"url": { "field": "img" },
"aspect": true,
"width": { "value": 7 },
"x": { "scale": "xscale", "field": "x" },
// "x": { "value": 0, "offset": 0.5 },
"y": { "scale": "yscale", "field": "y" },
//"height": { "value": 7},
"height": { "scale": "yscale", "band": 1.4, "offset": -27.6 },
"align": { "value": "center" },
"baseline": { "value": "top" },
"fillOpacity": { "value": 1 },
"fill": { "field": "Origin" }
}
}
}
]
},
]
};
var opt = {
"mode": "vega",
"renderer": 'svg',
"actions": false
};
vega.embed('#view', sameHealth, opt);
vega.embed('#view1', lineBaseSpec, opt);
vega.embed('#view2', vlSpec, opt);
</script>
</body>
bug
sonlichao
😄1
All 4 comments
I found the same in vega docs as followes url.
https://vega.github.io/vega/docs/marks/image/
When using IE11 and push F5 key servrial times, the image had disappeared.
sonlichao
on 16 Oct 2017
I had solved this issue. I read source code, guess promise do not work sometimes.
function getImage(item, renderer) {
var image = item.image;
if (!image || image.url !== item.url) {
image = {loaded: false, width: 0, height: 0};
renderer.loadImage(item.url).then(function(image) {
item.image = image;
item.image.url = item.url;
});
}
return image;
}
I have used the promise-polyfill library in IE11.
The information is from Supporting Internet Explorer in https://vega.github.io/vega/usage/
like follows:
<head>
<script src="https://vega.github.io/vega/assets/promise.min.js"></script>
<script src="https://vega.github.io/vega/assets/symbol.min.js"></script>
<script src="https://vega.github.io/vega/vega.min.js"></script>
</head>
I change polyfill from promise-polyfill to es6-promise,
it work very well.
sonlichao
on 16 Oct 2017
🎉1
Thanks for sharing! We'll look into changing our default polyfill for Promises.
jheer
on 16 Oct 2017
👍1
The file https://vega.github.io/vega/assets/promise.min.js now uses es6-promise, and the usage page now links to that project.
jheer
on 19 Oct 2017
👍1
Was this page helpful?
0 / 5 - 0 ratings
Related issues
divico
路
4Comments
donghaoren
路
5Comments
mhf-ir
路
3Comments
Fil
路
5Comments
nyurik
路
3Comments