Question

I am using this plugin http://almende.github.com/chap-links-library/js/timeline/doc/ to render a timeline from some JSON data. Here's the entire relevant code:

<script>
function doEverything() {
var timeline;

$.getJSON("tljson.json",function(result){
  items = [JSON.stringify(result)];
  drawVisualization();
});

function drawVisualization() {

var options = {'width':  '100%'};

timeline = new links.Timeline(document.getElementById('mytimeline'));
        timeline.draw(window.items, options);
 };
 }
</script>
<body onload="doEverything();">

When I alert 'window.items'; it displays as expected. However, the Console on inspector shows

Uncaught TypeError: Cannot call method 'valueOf' of undefined 

And the timeline doesn't render. What am I doing wrong?

EDIT:

Output of console.log(JSON.stringify(result)):

[{"content":"rubygem-aws-2.6.0 is available<br><a href='https://bugzilla.redhat.com/show_bug.cgi?id=863368'>View on BugZilla</a>","start":"863368"},{"content":"Recent update of rubygem-nokogiri breaks rubygem-aws-sdk<br><a href='https://bugzilla.redhat.com/show_bug.cgi?id=816706'>View on BugZilla</a>","start":"816706"},{"content":"Please update rubygem-aws-sdk to 1.3.5<br><a href='https://bugzilla.redhat.com/show_bug.cgi?id=800616'>View on BugZilla</a>","start":"800616"},{"content":"Review Request: rubygem-aws-sdk - AWS SDK for Ruby<br><a href='https://bugzilla.redhat.com/show_bug.cgi?id=723472'>View on BugZilla</a>","start":"723472"},{"content":"Please add EPEL branches for rubygem-aws<br><a href='https://bugzilla.redhat.com/show_bug.cgi?id=723152'>View on BugZilla</a>","start":"723152"},{"content":"Unable to resolve dependency of rubygem-aws-2.4.2.2-2.fc15 (updates)<br><a href='https://bugzilla.redhat.com/show_bug.cgi?id=716343'>View on BugZilla</a>","start":"716343"},{"content":"rubygem-aws-2.5.7 is available<br><a href='https://bugzilla.redhat.com/show_bug.cgi?id=703433'>View on BugZilla</a>","start":"703433"},{"content":"rubygem-aws-2.5.1 is available<br><a href='https://bugzilla.redhat.com/show_bug.cgi?id=703117'>View on BugZilla</a>","start":"703117"},{"content":"rubygem-aws-2.4.5 is available<br><a href='https://bugzilla.redhat.com/show_bug.cgi?id=691728'>View on BugZilla</a>","start":"691728"},{"content":"Update rubygem-aws to 2.3.34<br><a href='https://bugzilla.redhat.com/show_bug.cgi?id=668955'>View on BugZilla</a>","start":"668955"},{"content":"Review Request: rubygem-aws - Ruby gem for all Amazon Web Services<br><a href='https://bugzilla.redhat.com/show_bug.cgi?id=637378'>View on BugZilla</a>","start":"637378"}]

EDIT: latest code: (console still returns unknown data type for timeline.draw):

<script>
function doEverything() {
var timeline;

$.getJSON("tljson.json",function(result){
drawVisualization(result);
});

function drawVisualization(result) {
//console.log (JSON.stringify(result));
var options = {
            'width':  '100%'
        };

timeline = new links.Timeline(document.getElementById('mytimeline'));
    timeline.draw(JSON.stringify(result), options);
};
}
</script>
<body onload="doEverything();">
Was it helpful?

Solution

You should pass items as a parameter to drawVisualization. Please don't plan to add variables to global namespace. Here is the corrected code:

<script>
  function doEverything() {
    var timeline;

    $.getJSON("tljson.json",function(result){
      drawVisualization(result);
    });

    function drawVisualization(items) {

        var options = {'width':  '100%'};
        console.log(items);
        var timeline = new links.Timeline(document.getElementById('mytimeline'));
        timeline.draw(items, options);
     }
   }
</script>
<body onload="doEverything();">

OTHER TIPS

It seems that your variable items is not recognized since you have not declared it yet as global variable. You may declare it first like this:

<script>
var items;

function doEverything() {
    var timeline;

    // rest of your code
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top