jQuery Scatterplot Plugin Examples


Default implementation

            $(document).ready(function () {
                $('#defaultDemo').scatter();
                $('#defaultPoint').plot();
            });
        

Typical implementation

            $(document).ready(function () {
                $('#typicalDemo').scatter({ height: 500, width: 500, xLabel: 'X-Label Test', yLabel: 'Y-Label Test', rows: 5, columns: 5, subsections: 4 });
                $('#typicalPoint1').plot({ xPos: 100, yPos: 100, color: 'red' });
                $('#typicalPoint2').plot({ xPos: 320, yPos: 145, radius: 20, color: 'blue' });
                $('#typicalPoint3').plot({ xPos: 460, yPos: 410, radius: 10, color: 'green' });
            });
        

Responsive implementation (w/ Units)

            $(document).ready(function () {
                $('#responsiveDemo').scatter({ height: 500, width: '50%', xLabel: 'X-Label Test', yLabel: 'Y-Label Test', rows: 5, columns: 5, subsections: 5, responsive: true, xUnits: ["0%", "20%", "40%", "60%", "80%", "100%"], yUnits: [0, 10, 20, 30, 40, 50] });
                $('#responsivePoint1').plot({ xPos: '10%', yPos: '10%', color: 'red' });
                $('#responsivePoint2').plot({ xPos: '60%', yPos: '40%', radius: 20, color: 'blue' });
                $('#responsivePoint3').plot({ xPos: '90%', yPos: '75%', radius: 10, color: 'green' });
            });