Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
  
<!DOCTYPE html>
​
<html>
<head>
    
    <link class="include" rel="stylesheet" type="text/css" href="http://www.jqplot.com/deploy/dist/jquery.jqplot.min.css" />
    
    <script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/jquery.min.js"></script>
    
   
</head>
<body>
   
<div id="overviewChart"></div>
​
    <script type="text/javascript" src="http://www.jqplot.com/deploy/dist/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 language="javascript" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
    <script language="javascript" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
    <script language="javascript" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.dateAxisRenderer.min.js"></script>
    <script language="javascript" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.cursor.min.js"></script>
​
    <script type="text/javascript" src="example.min.js"></script>
​
</body>
​
​
</html>
​
 
var testData1 = [
    ['2008-10-29 10:00:00', 0],
    ['2008-10-29 11:00:00', 1]
];
​
​
var testData2 = [
    ['2008-10-29 10:00:00', 0],
    ['2008-10-29 10:00:10', 1],
    ['2008-10-29 10:00:11', 0],
    ['2008-10-29 10:00:14', 1]
];
​
function draw(data) {
​
​
    function getTicks() {
​
        var ticks = [];
​
        for (var i = 0; i < data.length; i++) {
            var item = data[i];
            var dateStr = item[0];
            ticks.push(dateStr);
        }
​
        return ticks;
    }
​
    var overviewChart = $.jqplot('overviewChart', [data], {
        title: 'Rotated Axis Text',
        axes: {
            xaxis: {
                renderer: $.jqplot.DateAxisRenderer,
                rendererOptions: {
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer
                },
                ticks: getTicks(),
                tickOptions: {
​
                    formatString: '%#m/%#d/%y - %#H h - %#M m - %#S s',
                    fontSize: '10pt',
                    fontFamily: 'Tahoma',
                    angle: -40
                }
            },
            yaxis: {
                rendererOptions: {
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer
                },
                tickOptions: {
                    fontSize: '10pt',
                    fontFamily: 'Tahoma',
                    angle: 30
                }
            }
        },
        series: [{
            lineWidth: 4,
            markerOptions: {
                style: 'square'
            }
        }],
        cursor: {
            zoom: true,
            looseZoom: true
        }
    });
​
}
​
draw(testData2);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers