Ask your JavaScript questions! Pay money and get answers fast! (more info)

Why is this chart not working (using the Morris chart library)? JavaScript

See screenshot. Only one date appears on the screen. I feel like this should work. I am using the Morris library for making charts:

[[LINK href="http://www.oesmith.co.uk/morris.js/lines.html"]]http://www.oesmith.co.uk/morris.js/lines.html
[[/LINK]]

The HTML of the page:

<blockquote><!DOCTYPE html>
<html lang="it">
<head>
<title>Data Visualization</title>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="en" name="language" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />

<link rel="stylesheet" href="/css/timeout.css" />
<script type="text/javascript" src="/js/timeout.js"></script>

<style type="text/css" id="per-page-styles"> h1 { color: #00f; }</style>

<script type="text/javascript" id="per-page-javascript">
window.setInterval(advance_to_next_slide, 10000);


var url_for_next_slide = '/?slide=start';



vector_of_data_points_for_chart =
{ day: '2012-11-4', page_views: 57950 },
{ day: '2012-11-5', page_views: 54129 },
{ day: '2012-11-6', page_views: 48424 },
{ day: '2012-11-7', page_views: 56361 },
{ day: '2012-11-8', page_views: 72742 },
{ day: '2012-11-9', page_views: 83078 },
{ day: '2012-11-10', page_views: 83526 },
{ day: '2012-11-11', page_views: 71058 },
{ day: '2012-11-12', page_views: 67723 },
{ day: '2012-11-13', page_views: 69417 },
{ day: '2012-11-14', page_views: 67247 },
{ day: '2012-11-15', page_views: 67875 },
{ day: '2012-11-16', page_views: 67658 },
{ day: '2012-11-17', page_views: 70434 },
{ day: '2012-11-18', page_views: 67617 },
{ day: '2012-11-19', page_views: 68055 },
{ day: '2012-11-20', page_views: 67819 },
{ day: '2012-11-21', page_views: 62572 },
{ day: '2012-11-22', page_views: 51885 },
{ day: '2012-11-23', page_views: 65214 },
{ day: '2012-11-24', page_views: 70397 },
{ day: '2012-11-25', page_views: 67112 },
{ day: '2012-11-26', page_views: 64923 },
{ day: '2012-11-27', page_views: 68019 },
{ day: '2012-11-28', page_views: 69440 },
{ day: '2012-11-29', page_views: 72491 },
{ day: '2012-11-30', page_views: 68987 },
{ day: '2012-12-1', page_views: 68255 },
{ day: '2012-12-2', page_views: 67707 },
{ day: '2012-12-3', page_views: 68488 },
{ day: '2012-12-4', page_views: 68622 },
{ day: '2012-12-5', page_views: 68029 },
{ day: '2012-12-6', page_views: 68947 },
{ day: '2012-12-7', page_views: 68345 },
{ day: '2012-12-8', page_views: 69333 },
{ day: '2012-12-9', page_views: 68612 },
{ day: '2012-12-10', page_views: 67356 },
{ day: '2012-12-11', page_views: 69420 },
{ day: '2012-12-12', page_views: 69045 },
{ day: '2012-12-13', page_views: 69568 },
{ day: '2012-12-14', page_views: 65715 },
{ day: '2012-12-15', page_views: 67321 },
{ day: '2012-12-16', page_views: 68357 },
{ day: '2012-12-17', page_views: 68163 },
{ day: '2012-12-18', page_views: 67014 },
{ day: '2012-12-19', page_views: 70145 },
{ day: '2012-12-20', page_views: 70679 },
{ day: '2012-12-21', page_views: 63835 },
{ day: '2012-12-22', page_views: 64665 },
{ day: '2012-12-23', page_views: 64681 },
{ day: '2012-12-24', page_views: 59964 },
{ day: '2012-12-25', page_views: 61551 },
{ day: '2012-12-26', page_views: 74084 },
{ day: '2012-12-27', page_views: 84004 },
{ day: '2012-12-28', page_views: 76722 },
{ day: '2012-12-29', page_views: 72143 },
{ day: '2012-12-30', page_views: 76698 },
{ day: '2012-12-31', page_views: 78531 },
{ day: '2013-1-1', page_views: 69325 },
{ day: '2013-1-2', page_views: 75810 },
{ day: '2013-1-3', page_views: 76697 },
{ day: '2013-1-4', page_views: 80363 },
{ day: '2013-1-5', page_views: 72734 },
{ day: '2013-1-6', page_views: 65388 },
{ day: '2013-1-7', page_views: 66864 },
{ day: '2013-1-8', page_views: 68314 },
{ day: '2013-1-9', page_views: 70849 },
{ day: '2013-1-10', page_views: 70665 },
{ day: '2013-1-11', page_views: 71328 },
{ day: '2013-1-12', page_views: 72401 },
{ day: '2013-1-13', page_views: 68307 },
{ day: '2013-1-14', page_views: 68724 },
{ day: '2013-1-15', page_views: 67731 },
{ day: '2013-1-16', page_views: 69101 },
{ day: '2013-1-17', page_views: 77431 },
{ day: '2013-1-18', page_views: 82336 },
{ day: '2013-1-19', page_views: 81175 },
{ day: '2013-1-20', page_views: 74364 },
{ day: '2013-1-21', page_views: 69531 },
{ day: '2013-1-22', page_views: 69639 },
{ day: '2013-1-23', page_views: 70656 },
{ day: '2013-1-24', page_views: 68156 },
{ day: '2013-1-25', page_views: 68978 },
{ day: '2013-1-26', page_views: 74800 },
{ day: '2013-1-27', page_views: 69964 },
{ day: '2013-1-28', page_views: 67484 },
{ day: '2013-1-29', page_views: 69866 },
{ day: '2013-1-30', page_views: 74105 },
{ day: '2013-1-31', page_views: 75676 },
{ day: '2013-2-1', page_views: 71111 },
{ day: '2013-2-2', page_views: 73384 },
{ day: '2013-2-3', page_views: 59961 },
{ day: '2013-2-4', page_views: 69577 },
{ day: '2013-2-5', page_views: 74808 },
{ day: '2013-2-6', page_views: 81030 },
{ day: '2013-2-7', page_views: 72509 },
{ day: '2013-2-8', page_views: 60977 },
{ day: '2013-2-9', page_views: 72071 },
{ day: '2013-2-10', page_views: 72304 },
{ day: '2013-2-11', page_views: 74709 },
{ day: '2013-2-12', page_views: 78521 },
{ day: '2013-2-13', page_views: 102840 },
{ day: '2013-2-14', page_views: 83583 },
{ day: '2013-2-15', page_views: 79857 },
{ day: '2013-2-16', page_views: 88392 },
{ day: '2013-2-17', page_views: 85676 },
{ day: '2013-2-18', page_views: 78157 },
{ day: '2013-2-19', page_views: 73496 },
{ day: '2013-2-20', page_views: 74152 },
{ day: '2013-2-21', page_views: 74893 },
{ day: '2013-2-22', page_views: 74716 },
{ day: '2013-2-23', page_views: 76998 },
{ day: '2013-2-24', page_views: 72385 }

</script>

</head>
<body>

<h1 id="banner-title">How many visitors per hour</h1>

<div id="content"><div id="data_visualization">


<div style="width:1400px;height:700px;" id="container"></div>

<link href="//cdn.oesmith.co.uk/morris-0.4.1.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>


<script type="text/javascript">

new Morris.Line({
// ID of the element in which to draw the chart.
element: 'container',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [
vector_of_data_points_for_chart
],
// The name of the data record attribute that contains x-values.
xkey: 'day',
// A list of names of data record attributes that contain y-values.
ykeys: ['page_views'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Page Views'],
xLabels: "day"
});
</script>

</div></div>


</body>




</html>
</blockquote>

Answers (1)

2013-03-02

Christianto answers:

Hi Lawrence,

This is work for me, please check this
http://jsbin.com/egeqeg/1/edit

<!DOCTYPE html>
<html lang="it">
<head>
<title>Data Visualization</title>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="en" name="language" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />

<link rel="stylesheet" href="/css/timeout.css" />
<link href="http://cdn.oesmith.co.uk/morris-0.4.1.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<script type="text/javascript" src="/js/timeout.js"></script>

<style type="text/css" id="per-page-styles"> h1 { color: #00f; }</style>

<script type="text/javascript" id="per-page-javascript">
vector_of_data_points_for_chart = [
{ day: '2012-11-4', page_views: 57950 },
{ day: '2012-11-5', page_views: 54129 },
{ day: '2012-11-6', page_views: 48424 },
{ day: '2012-11-7', page_views: 56361 },
{ day: '2012-11-8', page_views: 72742 },
{ day: '2012-11-9', page_views: 83078 },
{ day: '2012-11-10', page_views: 83526 },
{ day: '2012-11-11', page_views: 71058 },
{ day: '2012-11-12', page_views: 67723 },
{ day: '2012-11-13', page_views: 69417 },
{ day: '2012-11-14', page_views: 67247 },
{ day: '2012-11-15', page_views: 67875 },
{ day: '2012-11-16', page_views: 67658 },
{ day: '2012-11-17', page_views: 70434 },
{ day: '2012-11-18', page_views: 67617 },
{ day: '2012-11-19', page_views: 68055 },
{ day: '2012-11-20', page_views: 67819 },
{ day: '2012-11-21', page_views: 62572 },
{ day: '2012-11-22', page_views: 51885 },
{ day: '2012-11-23', page_views: 65214 },
{ day: '2012-11-24', page_views: 70397 },
{ day: '2012-11-25', page_views: 67112 },
{ day: '2012-11-26', page_views: 64923 },
{ day: '2012-11-27', page_views: 68019 },
{ day: '2012-11-28', page_views: 69440 },
{ day: '2012-11-29', page_views: 72491 },
{ day: '2012-11-30', page_views: 68987 },
{ day: '2012-12-1', page_views: 68255 },
{ day: '2012-12-2', page_views: 67707 },
{ day: '2012-12-3', page_views: 68488 },
{ day: '2012-12-4', page_views: 68622 },
{ day: '2012-12-5', page_views: 68029 },
{ day: '2012-12-6', page_views: 68947 },
{ day: '2012-12-7', page_views: 68345 },
{ day: '2012-12-8', page_views: 69333 },
{ day: '2012-12-9', page_views: 68612 },
{ day: '2012-12-10', page_views: 67356 },
{ day: '2012-12-11', page_views: 69420 },
{ day: '2012-12-12', page_views: 69045 },
{ day: '2012-12-13', page_views: 69568 },
{ day: '2012-12-14', page_views: 65715 },
{ day: '2012-12-15', page_views: 67321 },
{ day: '2012-12-16', page_views: 68357 },
{ day: '2012-12-17', page_views: 68163 },
{ day: '2012-12-18', page_views: 67014 },
{ day: '2012-12-19', page_views: 70145 },
{ day: '2012-12-20', page_views: 70679 },
{ day: '2012-12-21', page_views: 63835 },
{ day: '2012-12-22', page_views: 64665 },
{ day: '2012-12-23', page_views: 64681 },
{ day: '2012-12-24', page_views: 59964 },
{ day: '2012-12-25', page_views: 61551 },
{ day: '2012-12-26', page_views: 74084 },
{ day: '2012-12-27', page_views: 84004 },
{ day: '2012-12-28', page_views: 76722 },
{ day: '2012-12-29', page_views: 72143 },
{ day: '2012-12-30', page_views: 76698 },
{ day: '2012-12-31', page_views: 78531 },
{ day: '2013-1-1', page_views: 69325 },
{ day: '2013-1-2', page_views: 75810 },
{ day: '2013-1-3', page_views: 76697 },
{ day: '2013-1-4', page_views: 80363 },
{ day: '2013-1-5', page_views: 72734 },
{ day: '2013-1-6', page_views: 65388 },
{ day: '2013-1-7', page_views: 66864 },
{ day: '2013-1-8', page_views: 68314 },
{ day: '2013-1-9', page_views: 70849 },
{ day: '2013-1-10', page_views: 70665 },
{ day: '2013-1-11', page_views: 71328 },
{ day: '2013-1-12', page_views: 72401 },
{ day: '2013-1-13', page_views: 68307 },
{ day: '2013-1-14', page_views: 68724 },
{ day: '2013-1-15', page_views: 67731 },
{ day: '2013-1-16', page_views: 69101 },
{ day: '2013-1-17', page_views: 77431 },
{ day: '2013-1-18', page_views: 82336 },
{ day: '2013-1-19', page_views: 81175 },
{ day: '2013-1-20', page_views: 74364 },
{ day: '2013-1-21', page_views: 69531 },
{ day: '2013-1-22', page_views: 69639 },
{ day: '2013-1-23', page_views: 70656 },
{ day: '2013-1-24', page_views: 68156 },
{ day: '2013-1-25', page_views: 68978 },
{ day: '2013-1-26', page_views: 74800 },
{ day: '2013-1-27', page_views: 69964 },
{ day: '2013-1-28', page_views: 67484 },
{ day: '2013-1-29', page_views: 69866 },
{ day: '2013-1-30', page_views: 74105 },
{ day: '2013-1-31', page_views: 75676 },
{ day: '2013-2-1', page_views: 71111 },
{ day: '2013-2-2', page_views: 73384 },
{ day: '2013-2-3', page_views: 59961 },
{ day: '2013-2-4', page_views: 69577 },
{ day: '2013-2-5', page_views: 74808 },
{ day: '2013-2-6', page_views: 81030 },
{ day: '2013-2-7', page_views: 72509 },
{ day: '2013-2-8', page_views: 60977 },
{ day: '2013-2-9', page_views: 72071 },
{ day: '2013-2-10', page_views: 72304 },
{ day: '2013-2-11', page_views: 74709 },
{ day: '2013-2-12', page_views: 78521 },
{ day: '2013-2-13', page_views: 102840 },
{ day: '2013-2-14', page_views: 83583 },
{ day: '2013-2-15', page_views: 79857 },
{ day: '2013-2-16', page_views: 88392 },
{ day: '2013-2-17', page_views: 85676 },
{ day: '2013-2-18', page_views: 78157 },
{ day: '2013-2-19', page_views: 73496 },
{ day: '2013-2-20', page_views: 74152 },
{ day: '2013-2-21', page_views: 74893 },
{ day: '2013-2-22', page_views: 74716 },
{ day: '2013-2-23', page_views: 76998 },
{ day: '2013-2-24', page_views: 72385 }
];

var url_for_next_slide = '/?slide=start';
</script>

<script type="text/javascript">
jQuery(document).ready(function($){
new Morris.Line({
// ID of the element in which to draw the chart.
element: 'container',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: vector_of_data_points_for_chart,
// The name of the data record attribute that contains x-values.
xkey: 'day',
// A list of names of data record attributes that contain y-values.
ykeys: ['page_views'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Page Views'],
xLabels: "day"
});
window.setInterval(advance_to_next_slide, 10000);
});
</script>

</head>
<body>
<h1 id="banner-title">How many visitors per hour</h1>
<div id="content">
<div id="data_visualization">
<div style="width:1400px;height:700px;" id="container"></div>
</div>
</div>
</body>
</html>