mercredi 9 septembre 2015

How to draw two line chart by Morris.js and give them a 2 random array?

I want to draw a 2 line charts in the same graph with a random (y-axis) values when i press a button that will make a random array to give it to the function that make the line, i found morris.js library that enables us to draw a line chart with easy way , so how to get a random array and give it to the function that make the line beside that the first line has a range on y-axis(0-2-4-...-14) and the second one has a range on y axis(16-18-20-...-30) line chart describe the temperature in 7 cities (city1, city2 ,..., city7)

here is the morris code to draw 2 line chart with specified y(values)

Morris.Line({
element: 'line-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75,  b: 65 },
{ y: '2008', a: 50,  b: 40 },
{ y: '2009', a: 75,  b: 65 },
{ y: '2010', a: 50,  b: 40 },
{ y: '2011', a: 75,  b: 65 },
{ y: '2012', a: 100, b: 90 }
] ,
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
 });

i want here to replace the years in x axis by city1,...,city7 and replace the values in y axis with random values with a specified range for the 2 line chart

in html

<!DOCTYPE html>
<html>
<head>
<script src="http://ift.tt/1NqbyXU min.js"></script>
<script src="http://ift.tt/Qr2aCe"></script>
<script src="http://ift.tt/1sHJvIM"></script>
<meta charset=utf-8 />
<title>Morris.js Line Chart Example</title>
</head>
<body>
<div id="line-example"></div>
</body>
</html>

the line chart from the above code




Aucun commentaire:

Enregistrer un commentaire