Candlestick gallery example has no data visible

[jtf621]

The example on the website https://altair-viz.github.io/gallery/candlestick_chart.html#gallery-candlestick-chart shows axis and vertical rules, but no bars of data.

I have copied the code locally and run it and get the same result.

[afonit]

I just checked on my laptop and on my mobile phone, perhaps try again or refresh? It might have been a momentary issue.

[jakevdp]

Do you have adblock? Sometimes adblock overzealously blocks Vega-Lite from accessing URL data sources.

[jtf621]

Thanks for the comments.

I have checked this on Windows, OSX, and iOS and see the following:

• iOS the gallery website version works
• mac OSX on Safari the website and local host jupyter notebook both work
• mac OSX on Firefox 60.0.1 (64-bit) both the website and the localhost jupiter notebook have the issue (Ad blocking is turned off)
• Windows 10 Firefox 59.0.3 (64-bit) both the website and the localhost jupiter notebook have the issue (Ad blocking is turned off)
• Windows 10 Edge browser the website has the issue

Note All the other examples in the gallery that I looked at worked and when I have made visualizations in a jupyter notebook I have gotten them to work as expected on Firefox on both the Mac and Windows 10. The only time I have seen this issue is with the Candlestick example in the combinations of browser/OS described above.

Let me know what else I can do the help diagnose/fix this issue.

[jakevdp]

Is there any error in the javascript console when the chart fails to show?

[jakevdp]

Also, if you click "Open in Vega Editor", does the chart fail to show there as well?

[jtf621]

When loading the page from the docs I get the following errors in the console:

Blocked loading mixed active content “http://localhost:8888/static/components/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0”[Learn More]
modernizr.min.js:4:3946

WARN A scale with zero=false is used with bar mark. This can be misleading as the height of the bar can be arbitrary based on the scale domain. You may want to use point mark instead.
vega-lite@2.4:1:1350

Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://2fa4c84f-4d79-7042-a05f-a17181857d8b/browser-polyfill.js
Source Map URL: browser-polyfill.js.map[Learn More]

When I open in the Vega Editor the chart looks the same with no bars and the warning [Warning] A scale with zero=false is used with bar mark. This can be misleading as the height of the bar can be arbitrary based on the scale domain. You may want to use point mark instead. is repeated twice.

This was done on mac osx Firefox 60.0.1 (64-bit).

[jakevdp]

The warning is not a problem, but the "Source map error" indicates something is wrong. I'd raise the issue on the Vega-Lite repo: we can't do anything in this repository to address this kind of error.

[jtf621]

@jakevdp Thanks for the help. I am getting started with altair and I am not sure how to make a minimal example in vega-lite to test/show the issue. Can I just use the altair docs example? If not, how is the best way to get the generated vega-lite code out of the python/html to add to the issue?

[jtf621]

I see the "view source" link now. Working on the issue now.

[domoritz]

The source map error is not actually an error as sourcemaps are optional and the error is unrelated to it. One problem I noticed is that the example uses a non-standard date format. I fixed it in #915.

[jtf621]

@domoritz applying #915 on my mac with firefox did not change the behavior of the missing data. How can I help diagnose this further?

[jtf621]

@domoritz @jakevdp I have developed a minimal example that shows the issue exists even with ISO date string formats

import altair as alt
import pandas as pd

alt.renderers.enable('notebook')

df = pd.DataFrame(
[
      {
        "date": "2009-06-01",
        "open": 28.7,
        "close": 30.04,
      },
      {
        "date": "2009-06-02",
        "open": 30.04,
        "close": 29.63,
      },
      {
        "date": "2009-06-03",
        "open": 29.62,
        "close": 31.02,
      },
    ]
)

now create just the bar chart part of the candlestick plot

bar = alt.Chart(df).mark_bar().encode(
    x='yearmonthdate(date):T',
    y='open',
    y2='close',

)

bar

the plot has x and y axis with labels, but no data and the generated json is

{
  "config": {"view": {"width": 400, "height": 300}},
  "data": {
    "values": [
      {"close": 30.04, "date": "2009-06-01", "open": 28.7},
      {"close": 29.63, "date": "2009-06-02", "open": 30.04},
      {"close": 31.02, "date": "2009-06-03", "open": 29.62}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"type": "temporal", "field": "yearmonthdate(date)"},
    "y": {"type": "quantitative", "field": "open"},
    "y2": {"type": "quantitative", "field": "close"}
  },
  "$schema": "https://vega.github.io/schema/vega-lite/v2.4.1.json"
}

I copied this json into https://vega.github.io/editor/#/edited and found the plot looks that same as in my jupyter notebook (no data bars) and the vega editor reports [Info] No error or warnings

Next I removed the yearmonthdate call

bar2 = alt.Chart(df).mark_bar().encode(
    x='date:T',
    y='open',
    y2='close',

)

bar2 

and the plot has bars on it. The vega code generated is

{
  "config": {"view": {"width": 400, "height": 300}},
  "data": {
    "values": [
      {"close": 30.04, "date": "2009-06-01", "open": 28.7},
      {"close": 29.63, "date": "2009-06-02", "open": 30.04},
      {"close": 31.02, "date": "2009-06-03", "open": 29.62}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"type": "temporal", "field": "date"},
    "y": {"type": "quantitative", "field": "open"},
    "y2": {"type": "quantitative", "field": "close"}
  },
  "$schema": "https://vega.github.io/schema/vega-lite/v2.4.1.json"
}

and in the vega editor I see a plot with bars and the the editor reports [Info] No error or warnings

So it seems the problem is in the call to "yearmonthdate(date)" in the x field.

This was all done on a mac with firefox.

How can I help further?

[domoritz]

Does Altair support timeunit as a string in the field?

[jakevdp]

Does Altair support timeunit as a string in the field?

It does in master, but not yet in the released version. I was waiting on reviews of #887 and #899 before doing a release, but it's been about a week now so I might just do the new release without them.

[jtf621]

@jakevdp I am not sure why this is issue is closed. #915 did not fix this issue for me. See my most recent comment for a minimal example of issue. It seems the problem is in the call to "yearmonthdate(date)" in the x field.

[jakevdp]

GitHub closed it automatically because it was mentioned there. I'll reopen.

[joelostblom]

I am having a similar issue but can't create a reproducible example yet so just posting a comment here in the interim. If I open the site https://viz-learn.mds.ubc.ca/en/module3 in Firefox, click "1 How to visualize....", then "Slides" and then go forward a few slides, only the first 1-2 plots have points for me, the rest only show the axis and the chart background. It works fine in Chromium. In the developer console for Firefox I see this

Source map error: Error: request failed with status 404
Resource URL: https://cdn.jsdelivr.net/npm//vega@5
Source Map URL: vega.min.js.map

I tried turning of HTTPS everywhere, strict privacy mode, containers, and all addons, but the error is still there. Possibly related to #2539, although the error console there appears to show something else.