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>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<title>Morris.js Bar Chart Example</title>
</head>
<body>
  <div id="bar-example"></div>
</body>
</html>
​
 
/*
 * Play with this code and it'll update in the panel opposite.
 *
 * Why not try some of the options above?
 */
Morris.Line({
  element: 'bar-example',
  data:[
{
yAxis: 9.4,
xAxis: "2016-07-01"
},
{
yAxis: 5.77,
xAxis: "2016-07-02"
},
{
yAxis: 6.66,
xAxis: "2016-07-03"
},
{
yAxis: 5.77,
xAxis: "2016-07-04"
},
{
yAxis: 5.16,
xAxis: "2016-07-05"
},
{
yAxis: 8.77,
xAxis: "2016-07-06"
},
{
yAxis: 8.49,
xAxis: "2016-07-07"
},
{
yAxis: 5.16,
xAxis: "2016-07-08"
},
{
yAxis: 6.38,
xAxis: "2016-07-09"
},
{
yAxis: 9.38,
xAxis: "2016-07-10"
},
{
yAxis: 7.27,
xAxis: "2016-07-11"
},
{
yAxis: 5.16,
xAxis: "2016-07-12"
},
{
yAxis: 7.88,
xAxis: "2016-07-13"
},
{
yAxis: 7.27,
xAxis: "2016-07-14"
},
{
yAxis: 5.16,
xAxis: "2016-07-15"
},
{
yAxis: 10.6,
xAxis: "2016-07-16"
},
{
yAxis: 9.38,
xAxis: "2016-07-17"
},
{
yAxis: 8.77,
xAxis: "2016-07-18"
},
{
yAxis: 5.16,
xAxis: "2016-07-19"
},
{
yAxis: 6.66,
xAxis: "2016-07-20"
},
{
yAxis: 9.99,
xAxis: "2016-07-21"
},
{
yAxis: 5.16,
xAxis: "2016-07-22"
},
{
yAxis: 7.27,
xAxis: "2016-07-23"
},
{
yAxis: 3.05,
xAxis: "2016-07-24"
},
{
yAxis: 8.16,
xAxis: "2016-07-25"
},
{
yAxis: 3.66,
xAxis: "2016-07-26"
},
{
yAxis: 6.05,
xAxis: "2016-07-27"
},
{
yAxis: 4.27,
xAxis: "2016-07-28"
},
{
yAxis: 13.65,
xAxis: "2016-07-29"
}
],
  xkey: 'xAxis',
  ykeys: ['yAxis'],
  labels: ['unit']
});
$( "#bar-example svg rect" ).on('click', function() {
   thisDate = $(".morris-hover-row-label").html();
    thisDataHtml = $(".morris-hover-point").html().split(":");
    thisData = thisDataHtml[1].trim();
​
    // alert !!
    alert( "Data: "+thisData+"\nDate: "+thisDate );
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers