search

almende / vis

⚠️ This project is not maintained anymore! Please go to https://github.com/visjs
7.85k stars 1.48k forks source link

Something is wrong with the Timeline scale. #1951

Open ghost opened 8 years ago

ghost commented 8 years ago

Hi, I've copied the example on the vis.js website, but when I run it using a local server, it throws the warning: Something is wrong with the Timeline scale. Limited drawing of grid lines to 1000 lines. I have no idea what this is. Copying the HTML from the examples works, but I don't want to have to do that as it makes it a lot less manageable... How can I fix this? Thanks.

brichbe commented 8 years ago

If I'm reading this right, the only difference should be the script and link tags that reference the vis.js and vis.css files. If you copy from the website, those files won't be found, but copying from the examples they might be. If that's not the problem, you need to provide an example jsbin.

asiegf commented 8 years ago

I have managed to fix this error by including the css from vis.

tuarrep commented 7 years ago

@asiegfried Not working for me :(

mojoaxel commented 7 years ago

@mafzst Can you please provide an simple example of your problem e.g. on jsbin.

tuarrep commented 7 years ago

@mojoaxel Actually I haven't this issue anymore. I encounter it when I provide an empty groups object in constructor. It seems to me over complicated to me to share an example because I've wrapped the timeline in Reactjs components.

mojoaxel commented 7 years ago

Closing...Feel free to reopen if the problem still exists and can be reproduced.

lillian27 commented 7 years ago

EDIT: This is apparently happens if the rel attribute is omitted from the link tag. If rel="stylesheet" is added then the timeline renders properly. The rel atribute is required per the spec so I guess this counts as user error :-/ However, the error shown in this case was not at all helpful.

Yes this is broken still/again. Running code below in jsbin shows the previously mentioned timeline scale error. Note this is just the basic usage example with the js/css references updated to use the cdn urls listed on the download page. I also tried this locally with downloaded versions of the js/css with the same results.

https://jsbin.com/bocuyut/edit?html,console,output

When served locally from django 1.10 or opening directly in Chrome, the js console says:

Something is wrong with the Timeline scale. Limited drawing of grid lines to 1000 lines. TimeAxis._repaintLabels @ vis.js:27788 TimeAxis.redraw @ vis.js:27674 (anonymous) @ vis.js:21506 Core._redraw @ vis.js:21505 (anonymous) @ vis.js:816

<!DOCTYPE HTML>
<html>
<head>
  <title>Timeline | Basic demo</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.0/vis.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.0/vis.css"/>
</head>
<body>

<p>
  A basic timeline. You can move and zoom the timeline, and select items.
</p>

<div id="visualization"></div>

<script type="text/javascript">
  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id: 1, content: 'item 1', start: '2014-04-20'},
    {id: 2, content: 'item 2', start: '2014-04-14'},
    {id: 3, content: 'item 3', start: '2014-04-18'},
    {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
    {id: 5, content: 'item 5', start: '2014-04-25'},
    {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
  ]);

  // Configuration for the Timeline
  var options = {};

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>
rbkn commented 7 years ago

I'm having this issue using the npm import of the library within the Ember js framework - I can import the js files as a module, but the CSS is normally managed by the framework at compile-time and this error appears to result.

mojoaxel commented 7 years ago

I can confirm this: http://jsbin.com/xuxeve/2/edit?html,console,output We should fix this!

tandibar commented 7 years ago

I am integrating visjs into an angular project based on webpack and i cannot integrate the css as in every other project. I have to load the visjs css separately in its own tag with the rel attribute to get it working. This is really painful. Do you already know how to fix this?

Kandarp143 commented 6 years ago

Hi all, I am using polymer. and following is my timeline polymer element code.

But when I try to use it in index.html <legacy-element></legacy-element> its give me same error. I have read all comments and issues regarding this but no success. Please help.

lzh370 commented 6 years ago

I also found this problem, I use timeline in two page, a complete HTML every refresh are completely normal, another is through the jquery.artDialog.js pop loading, will have a great chance of this problem, the display time is completely wrong. Their JS code is exactly the same. I hope it works out, thank you! tim 20171010175936 Refresh ten times, there will be five normal display. tim 20171010180643

mgween commented 6 years ago

I'm also having this issue with my vue project. Has anybody figured out a good way for webpack users to include the css?

mgween commented 6 years ago

After looking around a bit more. I found this example. Importing the css this way works for me.

dandohotaru commented 6 years ago

@mgween Indeed, for webpack scenario, a combination of https://github.com/almende/vis#example-4-integrate-visjs-components-directly-in-your-webpack-build and https://github.com/mojoaxel/vis-webpack-demo did the trick for me as well

import { DataSet, Timeline } from 'vis/index-timeline-graph2d';
import 'vis/dist/vis-timeline-graph2d.min.css';

...
    var container = document.getElementById('container');
    var data = new DataSet([
      { id: 1, content: 'item 1', start: '2013-04-20' },
      { id: 2, content: 'item 2', start: '2013-04-14' },
      { id: 3, content: 'item 3', start: '2013-04-18' },
      { id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19' },
      { id: 5, content: 'item 5', start: '2013-04-25' },
      { id: 6, content: 'item 6', start: '2013-04-27' }
    ]);
    var timeline = new Timeline(container, data, {});

and the webpack setup

module: {
  module: {
    rules: [{
      test: /node_modules[\\\/]vis[\\\/].*\.js$/,
      loader: 'babel-loader',
      query: {
        cacheDirectory: true,
        presets: [ "babel-preset-es2015" ].map(require.resolve),
        plugins: [
          "transform-es3-property-literals", // #2452
          "transform-es3-member-expression-literals", // #2566
          "transform-runtime" // #2566
        ]
      }
    }]
  }
}
chamamme commented 5 years ago

I fixed this issue by adding rel to both link and 'script' tags. <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js" rel="script"></script>