Search code examples
javascriptjqplotscatter-plot

Representing multiple data points with equal value in jqPlot


I display a data set in a scatter plot using jqPlot. There are repeated values in the data set. Is there a way to represent the fact there are multiple data points in one location on the graph? Perhaps by growing the point marker bigger? Alternately, is there another kind of graph I should be using?

Here is my Javascript code for the scatter plot.

var qr=[[1,5],[4,5],[6,5],[4,5],[0,5],[4,5],[6,5],[4,5]];
var gr_html = $.jqplot('par_sca_div', [qr], {  
                seriesDefaults:{
                  showLine:false,
                  markerRenderer: $.jqplot.MarkerRenderer,
                    markerOptions: {
                      size: 5
                    }
                },
                series:[{ 
                  markerOptions: {
                    style: 'circle',
                    size:5,
                  },
                }],
                axes:{
                  xaxis:{
                    label:'Score',
                  },
                  yaxis:{
                    renderer:$.jqplot.canvasTextRenderer,
                    label:'Rate',
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                    labelOptions:{
                      fontSize: '10pt'
                    },
                  },
                }
      });

Solution

  • Use the pointLabels plugin and make your label reflect the amount of identical points.

    Add the labels to your array:

    var qr=[[1,5, null],[4,2, null],[6,5,'2'],[4,5,'3'],[0,5,null],[4,5,'3'],[6,5,'2'],[4,5,'3']];

    and enable point labels in your series:

    series:[{
       pointLabels:{
       show: true,
    },
    

    Here is a working jsfiddle example with the above.

    As for an algorithm of dynamically adding the label to your original array, you can iterate your original array and create a matrix which will represents the point and the number of repeats.

    For example:

    [4,5] will be represented as pointMatrix[4][5] with a value of 3.

    Then iterate your array again and using the matrix add the corresponding point label value to your original array.