CodePen

HTML

            
              h
            
          
!
via HTML Inspector

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var options = {
        animate: true, // Turns on animation for all series in this plot.
        // Will animate plot on calls to plot1.replot({resetAxes:true})
        animateReplot: true,
        cursor: { //Cursor attributes
            show: true,
            zoom: false,
            looseZoom: true,
            showHorizontalLine:false,
            showTooltip: false
        },
        series:[ 
            {  //array1 : bar chart
                label:'user',
                color:'#96EDFA',
                renderer: $.jqplot.BarRenderer,
                xaxis: 'xaxis',
                rendererOptions: {
                // Speed up the animation a little bit.
                // This is a number of milliseconds.  
                // Default for bar series is 3000.  
                animation: {
                    speed: 2500
                 },
                    barWidth: 40, //Create the bar
                    barPadding: -15,
                    barMargin: 0,
                    highlightMouseOver: false
                }
            },
            {  //array2 : point
                label:'team',
                color:'green',
                showLine: false, // Remove the line from the 
                xaxis: 'xaxis',
                rendererOptions: {
                    ………….
                }
            },
            {   //array3 : point
                label:'division',
                color:'blue',
                showLine: false, // Remove the line from the
                xaxis: 'x2axis',
                rendererOptions: {
                    ………….
                }
            },
            {   //array4 : point
                label:'business group',
                ………….
            }
        ],
        legend: {   // Show the legend and puts it outside the grid
            show: true,
            placement: 'outsideGrid'
        },
        axesDefaults: {
            pad: 0
        },
        axes: {
            xaxis: {  // These options will set up the x axis like a category axis.
                tickInterval: 1,
                drawMajorGridlines: false,
                drawMinorGridlines: false,
                drawMajorTickMarks: false,
                rendererOptions: {
                    tickInset: 0.5,
                    minorTicks: 1
                }
            },
            x2axis: {
                showTicks: false,
                ………….
            },
            yaxis: {
                rendererOptions: {
                    forceTickAt0: true
                }
            }
        },
        highlighter: {//On mouseover highlighter attributes
            show: true, 
            showLabel: true, 
            tooltipAxes: 'x',
            tooltipLocation : 'ne'
        }
};
$.jqplot("target div", [array1, array2, array3, array4], options);

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................