CODEWITHSUNDEEP
javascriptjqueryjqplot
user3151498
user3151498

Reputation: 11

JQPlot - Only partial bars are displayed

I am trying to implement JQPLOT Bar chart but it's displaying only few bars ( two bars against tick 'e' with combo value '2 null 2') . Below is my code. Could you please suggest whats wrong here. I have added alert statement to display values in array and result is mentioned as comment:

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 9]><script type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
<script type="text/javascript" src="js/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.pointLabels.min.js"></script> 
<script type="text/javascript" src="js/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.json2.min.js"></script>

 <script type="text/javascript">  
 $(document).ready(function(){

     var DelayFeed = [[]];
     var DelayConfirmation = [[]];
     var CorruptFeed = [[]];
     var FeedName = [[]];

     var feedData = $.ajax({           
            url: "FeedServlet",           
            dataType : 'json',
            async: false
            }).responseText;

     var arrayData = JSON.parse(feedData);

     for (var i = 0; i < arrayData.length; i++) {   

         DelayFeed[0].push([ arrayData[i].DelayFeed ]);
         DelayConfirmation[0].push([ arrayData[i].DelayConfirmation ]);
         CorruptFeed[0].push([ arrayData[i].CorruptFeed ]);
         FeedName[0].push([ arrayData[i].FeedName ]);

        }

     alert(DelayFeed[0]); //8,7,4,3,3
     alert(DelayConfirmation[0]); //4,4,4,2,2
     alert(CorruptFeed[0]); //4,4,4,2,2

     $.jqplot('chart_div', [ DelayConfirmation, DelayFeed, CorruptFeed ]  
     , { seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        rendererOptions: {
            barDirection: 'vertical'
},
        pointLabels: { show:true }
  },
         series:[
      {label:'Delay - Confirmation'},
      {label:'Delay - Feed'},
      {label:'Corrupt Feed'}
  ],
         legend: {
      show: true,
      placement: 'outsideGrid'
  },
  axes: {
                 xaxis: {
          renderer: $.jqplot.CategoryAxisRenderer,
          ticks: ['a', 'b', 'c', 'd', 'e'];
      },

  }
});

        });
</script> 
</head>
<body>
            <div class="work-area">
            <div id="chart_div" style="width: 800px; height: 400px;"></div>
            </div>
        </body>
</html>

Upvotes: 1

Views: 96

Answers (1)

meccanismo.complesso
meccanismo.complesso

Reputation: 381

At a first look, it seems a problem with the format of data passed within $.jqplot() function. In fact if you replace the three data arguments with these:

var DelayFeed = [8,7,4,3,3];
var DelayConfirmation = [4,4,4,2,2];
var CorruptFeed = [4,4,4,2,2]; 

$.jqplot('chart_div', [ DelayConfirmation, DelayFeed, CorruptFeed ]

you obtain the following (and correct) barchart enter image description here

You need to use three simple arrays ( "[ ]" ) and not embedded arrays ( "[[ ]]" ). Thus, i would try to use 

$.jqplot('chart_div', [ DelayConfirmation[0], DelayFeed[0], CorruptFeed[0] ]

Upvotes: 1

Related Questions