(highlighter) : barchart data contains null values, jqplot provides wrong index

946 views
Skip to first unread message

Max

unread,
May 18, 2012, 4:51:20 AM5/18/12
to jqplot...@googlegroups.com
if you have a barchart with some null data, jqplot provides wrong index in the events it fires.

(i'm actually using primefaces , but it's the same with vanilla jqplot)

for example if you have the series:     [2, 6, null , 10];
 jqplot reports the 4th point as if is the 3rd one... (index=2)

is there any workaround?



thank you , have a nice day.


example: (i modified one of the examples of the dist/examples): 


<!DOCTYPE html>

<html>
<head>
<title>Bar Charts</title>

    <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
  
  <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
    <script class="include" type="text/javascript" src="../jquery.min.js"></script>
    
   
</head>
<body>
<div>

    <div><span>Moused Over: </span><span id="info2">Nothing</span></div>
    
    <div id="chart2" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>

    
 
 
  <script class="code" type="text/javascript">
  $(document).ready(function(){
        var s1 = [2, 6, null , 10];
        var s2 = [7, 5, null , 2];
        var ticks = ['a', 'b', 'c', 'd'];
        
        plot2 = $.jqplot('chart2', [s1, s2], {
            seriesDefaults: {
                renderer:$.jqplot.BarRenderer,
                pointLabels: { show: true }
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks
                }
            }
        });
    
        $('#chart2').bind('jqplotDataHighlight', 
            function (ev, seriesIndex, pointIndex, data) {
                $('#info2').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
            }
        );
            
        $('#chart2').bind('jqplotDataUnhighlight', 
            function (ev) {
                $('#info2').html('Nothing');
            }
        );
    });
  </script>

  
  
<!-- Don't touch this! -->


    <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
<!-- Additional plugins go here -->

  <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
  <script class="include" type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
  <script class="include" type="text/javascript" src="../plugins/jqplot.pieRenderer.min.js"></script>
  <script class="include" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
  <script class="include" type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>

<!-- End additional plugins -->


</div>
<script type="text/javascript" src="example.min.js"></script>
  
    </body>
    </html>
    

Sergei Rumjantsev

unread,
Jun 13, 2012, 6:43:36 AM6/13/12
to jqplot...@googlegroups.com
Hi Max

You have to set indexes while assigning data to chart.
For example:

var s1 = [[1,2], [2,6], [3,undefined] , [4,10]];
var s2 = [[1,7], [2,5], [3,undefined] , [4,2]];
var ticks = [[1,'a'], [2,'b'], [3,'c'] , [4,'d']];

I am not sure if it is 100% correct, but is should give you a clue about solution for your problem.

-
Sergei.

Chris Rollason

unread,
Mar 18, 2016, 12:32:03 PM3/18/16
to jqplot-users

 using the example off the jqplot website for a horizontal bargraph (converted to vertical).

I managed to replicate the issue using both "undefined" and "null".   However the highlighter appears to work correctly, if you use "NaN"  instead.

graph = $.jqplot('chart2', [[["01/16", 2], ["02/16", 4], ["03/16", 6], ["04/16", 4]],

                           [["01/16", NaN], ["02/16", 3], ["03/16", NaN], ["04/16", 4]],

                           [["01/16", 4], ["02/16", 7], ["03/16", NaN], ["04/16", 2]]], {

                seriesDefaults: {

                renderer: $.jqplot.BarRenderer,

                pointLabels: { show: false, location: 'e', edgeTolerance: -15 },

                shadowAngle: 135,

               },

               axes: {

                    xaxis: {

                        renderer: $.jqplot.CategoryAxisRenderer

                    }

               },

                   highlighter: {

                   show: true,

                   showmarker: false,

                   tooltipLocation: 'ne',

                   lineWidthAdjust: 0,

                   sizeAdjust: 0,

                   tooltipOffset: 0,

                   useAxesFormatters: false,

                   tooltipContentEditor: function (str, seriesIndex, pointIndex, jqPlot) {

                       var array = str.split(',');

                       return array[1];

                   }

               }

           });



Reply all
Reply to author
Forward
0 new messages