Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2012/12/27|12:01',  7.3, 7.1],
          ['2012/12/26|12:22',  7, 8.9],
          ['2012/12/25|11:33',  8.3, 8],
          ['2012/12/24|11:33',  9, 7.8]
        ]);
        var options = {
                curveType: 'function',
                chartArea: {left: 70, top: 50, width: '100%', height: '85%'},
                width: 950, height: 800,
                interpolateNulls: true,
                pointSize: 5,
                legend: {position: 'none'},
                vAxis: {title: 'Count', viewWindow: {min: 7, max: 10}},
                hAxis: {title: 'Date', viewWindow: {min: 0, max: 4}}
                };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
      
      $(window).load(function() {
        // Note: You will probably need to tweak these deltas
        // for your labels to position nicely.
        var xDelta = 35;
        var yDelta = 13;
        var years = ['2012/12/27|12:01','2012/12/26|12:22','2012/12/25|11:33','2012/12/24|11:33'];
        $('text').each(function(i, el) {
            if (years.indexOf(el.textContent) != -1) {
                var g = el.parentNode;
                var x = el.getAttribute('x');
                var y = el.getAttribute('y');
                var width = el.getAttribute('width') || 70;
                var height = el.getAttribute('height') || 35;
      
                // A "ForeignObject" tag is how you can inject HTML into an SVG document.
               var fo = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
                fo.setAttribute('x', x - xDelta);
                fo.setAttribute('y', y - yDelta);
                fo.setAttribute('height', height);
                fo.setAttribute('width', width);
      
                var body = document.createElementNS("http://www.w3.org/1999/xhtml", "BODY");
                var p = document.createElement("P");
      
                p.setAttribute("style", "font-size:.8em; font-family:Arial;text-align:center;color:#555;");
                p.innerHTML = el.textContent.replace('|','<br />');
      
                body.appendChild(p);
                fo.appendChild(body);
      
                // Remove the original SVG text and replace it with the HTML.
                g.removeChild(el);
                g.appendChild(fo);
            }
        });
    });
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers