DateAxisRenderer wouldn't render when used with knockout binding

I have written a knockout binding for jqplot, it works perfectly fine with the default renderer. When I use DateAxisRenderer as x axis renderer, it won't draw lines for some reason.

Here is the code which I used, you can see two charts here. One using knockout binding that does not work as intended and another without knockout binding that works as intended.

And the fiddle is here https://jsfiddle.net/0vauuf13/

Any help is appreciated.

<script type="text/javascript" src="https://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.dateAxisRenderer.js"></script>  <div id="chart3" style="height:300px;width:600px; "></div> <div id="chart-container">   <div id="chart4" style="height:300px;width:600px;" data-bind="jqplot:chartData"></div> </div>   $(document).ready(function() {    var line1 = [     ['2008-06-30 8:00AM', 4],     ['2008-7-14 8:00AM', 6.5],     ['2008-7-28 8:00AM', 5.7],     ['2008-8-11 8:00AM', 9],     ['2008-8-25 8:00AM', 8.2]   ];    var plotOptions = {     title: 'Customized Date Axis',     axes: {       xaxis: {         renderer: $.jqplot.DateAxisRenderer,         tickOptions: {           formatString: '%b %#d, %#I %p'         },         min: 'June 16, 2008 8:00AM',         tickInterval: '2 weeks'       }     },     series: [{       lineWidth: 4,       markerOptions: {         style: 'square'       }     }]   };   var plot3 = $('#chart3').jqplot([line1], plotOptions);    ko.applyBindings({     chartData: {       data: line1,       options: plotOptions     }   }, $("#chart-container")[0]); });   ko.bindingHandlers.jqplot = {   init: function(element, valueAccessor, allBindingsAccessor, context) {    },   update: function(element, valueAccessor, allBindingsAccessor, context) {     var value = ko.unwrap(valueAccessor()) || {};     var data = value.data || [];     var options = value.options || {};     if (data.length > 0) {       if ($(element).data('jqplot')) {         var plotObject = $(element).data('jqplot');         //plot.replot(data, options);         plotObject.destroy();       }       $(element).jqplot(data, options);     }   } }; 

Replay

Category: jquery Time: 2016-07-29 Views: 0

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.206 (s). 12 q(s)