Flot canvas is not rendering in UI when using with knockoutjs

Question

I have problem going on with flot grap and knockout js

Flot Graph working when out side the knockout binding div In the fiddle the (div placeholder) for graph is nicely drawing if it is outside the knockout binding divs. Here is the jsfiddle - http://jsfiddle.net/keyur12/g9aLe/

Flot Graph not working when inside the knocout binding div As soon as if we add the div placeholder inside the knockout binding div then the canvas for the flot grap is not working. Here is the jsfiddle - http://jsfiddle.net/keyur12/fGBBR/

<div style="float:left">
    Test 1
<h2>People</h2>
<ul data-bind="foreach: people">
    <!-- flot grap div inside knoutout binding -->
    <div id="placeholder" style="width:400px;height:300px;float:right"></div>

    <li> hi1 </li>
</ul>
<div>

Any help is appreciated.

Answer 1

All markup within the foreach block is duplicated for each element within the array. So, in your markup above, you will have one

<div id="placeholder" style="width:400px;height:300px;float:right"></div>

for each person in the people array. So that will result in duplicate "placeholder" elements.

Also, you are trying to draw the graph in the document ready function with

 $.plot($("#placeholder"), data, options);

Which won't work because the element won't even exist yet. Can you explain what you are trying to do? Are you trying to draw a graph for each person? If so, you should create a custom binding (see: custom binding doc

Answer 2

Finally found my own solution after some hard work and re-thinking.

Basically to make the flot graph work inside the knockout binding one has to identify how observables are assigned the values.

1. if using getJSON call if observables are assgined values inside the getJSON call then the $.plot($("#placeholder0"), data, options); should go inside getJSON call as well with unique index to placeholders. Not in $(document).ready(function(){}); example:

   $.getJSON("someURL",function(data){ self.someObservableArray(data.someArrayObjects); $.plot($("#placeholder0"), data, options); });

2. if not using the getJSON call then call to $.plot($("#placeholder0"), data1, options); should be in

   $(document).ready(function(){}); after ko.applybindings();

example:

 $(document).ready(function(){
    ko.applybindings(new appModel());
    $.plot($("#placeholder0"), data, options);
    });

Here is the updated fiddle with working example - http://jsfiddle.net/keyur12/fGBBR/3/