Skip to content

Instantly share code, notes, and snippets.

@takezoe

takezoe/c3linechart.html

Last active February 5, 2018 18:39
Show Gist options
  • Save takezoe/64aa4eba9ba68e6474fc8acd10fc0439 to your computer and use it in GitHub Desktop.
Save takezoe/64aa4eba9ba68e6474fc8acd10fc0439 to your computer and use it in GitHub Desktop.
Download ZIP
Chart Example by C3 and Chart.js
Raw
c3linechart.html
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div style="width:600px;text-align:center;color:gray;">
Number of messages (last 1 hour)
</div>
<div id="stage" style="width:600px;height:150px;"></div>
</body>
<script>
Plotly.plot( 'stage', [
{
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
y: [0, 2, 4, 8, 160, 0, 0, 0, 0, 0],
name: 'Messages'
},
{
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
y: [200, 200, 200, 200, 200, 200, 200, 200, 200, 200],
line: {
color: 'red'
},
name: 'Limit'
}
], {
showlegend: false,
margin: { t: 0, b: 0 }
},
{displayModeBar: false}
);
</script>
Raw
chartjs.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<body>
<div style="width:600px;text-align:center;color:gray;">
Number of messages (last 1 hour)
</div>
<div style="width:600px;">
<canvas id="stage" height="100"></canvas>
</div>
</body>
<script>
var ctx = document.getElementById("stage").getContext('2d');
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: [0,1,2,3,4,5,6,7,8,9],
datasets: [{
label: 'Messages',
data: [1,2,3,4,5,6,30,8,9,10],
backgroundColor: 'rgba(0,0,0,0)',
borderColor: 'blue',
lineTension: 0
},
{
label: 'Limit',
data: [20,20,20,20,20,20,20,20,20,20],
backgroundColor: 'rgba(0,0,0,0)',
borderColor: 'red',
lineTension: 0
}]
},
options: {
legend: { display: false },
animation: { duration: 0 }
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment