Skip to content

Instantly share code, notes, and snippets.

@hygull
Last active March 25, 2017 18:22
Show Gist options
  • Select an option

  • Save hygull/9c11d02d86b2021e04efdcd82ce00bf1 to your computer and use it in GitHub Desktop.

Select an option

Save hygull/9c11d02d86b2021e04efdcd82ce00bf1 to your computer and use it in GitHub Desktop.
charjs creation created by hygull - https://repl.it/GNhh/2
.container {
width: 80%;
margin: 15px auto;
}
h2{
color:green;
font-family: tahoma;
font-weight: bold;
}
.span_lw{
color:blue;
}
.span_dash{
color:red;
}
.span_wh{
color:black;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
</head>
<body>
<!--A simple line chart showing the relation between paid bust rent by Rishikesh, Darshan & Mukund (When they come to office)-->
<div class="container">
<h2>Line chart <span class="span_dash">- </span>Bus rent details, <span class='span_wh'>while coming to office</span><span class='span_lw'> (Lask week)</span></h2>
<div>
<br>
<canvas id="myChart"></canvas>
</div>
</div>
<script type="text/javascript" src="index.js">
</script>
</body>
</html>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'],
datasets: [{
label: 'Rishikesh',
data: [14,10,14,12,10,14,10],//[12, 19, 3, 17, 6, 3, 7],
backgroundColor: "rgba(0,0,255,0.5)"//"rgba(153,255,51,0.6)"
}, {
label: 'Darshan',
data: [10,14,12,10,12,14,14],//[2, 29, 5, 5, 2, 3, 10],
backgroundColor: "rgba(255,0,0,0.6)"//"rgba(255,153,0,0.6)"
},{
label:"Mukund",
data:[18,15,15,18,15,18,15],
backgroundColor:"rgba(0,0,255,0.5)"
}
]
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment