Skip to content

Instantly share code, notes, and snippets.

View marorika's full-sized avatar

marorika

View GitHub Profile
@marorika
marorika / chart-js-bubble.html
Created March 29, 2018 15:48
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myBubble" style="width: 100%; height: 300px;"></canvas>
<script>
var myBubbleElement = document.getElementById("myBubble");
var myBubble = new Chart(myBubbleElement, {
type: 'bubble', // チャートのタイプ
data: { // チャートの内容
datasets: [{
label: 'red',
data: [{x:4, y:5}, {x:5, y:9, r:10}],
@marorika
marorika / chart-js-scatter.html
Last active March 29, 2018 15:46
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myScatter" style="width: 100%; height: 300px;"></canvas>
<script>
var myScatterElement = document.getElementById("myScatter");
var myScatter = new Chart(myScatterElement, {
type: 'scatter', // チャートのタイプ
data: { // チャートの内容
datasets: [{
label: 'red',
data: [{x:4, y:5}, {x:5, y:9}],
@marorika
marorika / chart-js-polar-area.html
Last active April 4, 2018 16:02
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myPolarArea" style="width: 100%; height: 300px;"></canvas>
<script>
var myPolarAreaElement = document.getElementById("myPolarArea");
var myPolarArea = new Chart(myPolarAreaElement, {
type: 'polarArea', // チャートのタイプ
data: { // チャートの内容
labels: ["one", "two", "three"],
datasets: [{
label: 'polarArea',
@marorika
marorika / chart-js-pie.html
Last active April 4, 2018 16:02
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myPie" style="width: 100%; height: 300px;"></canvas>
<script>
var myPieElement = document.getElementById("myPie");
var myPie = new Chart(myPieElement, {
type: 'pie', // チャートのタイプ
data: { // チャートの内容
labels: ["one", "two", "three"],
datasets: [{
label: 'pie',
@marorika
marorika / chart-js-doughnut.html
Last active April 4, 2018 16:03
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myDoughnut" style="width: 100%; height: 300px;"></canvas>
<script>
var myDoughnutElement = document.getElementById("myDoughnut");
var myDoughnut = new Chart(myDoughnutElement, {
type: 'doughnut', // チャートのタイプ
data: { // チャートの内容
labels: ["one", "two", "three"],
datasets: [{
@marorika
marorika / chart-js-radar.html
Created March 29, 2018 15:39
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myRadar" style="width: 100%; height: 300px;"></canvas>
<script>
var myRadarElement = document.getElementById("myRadar");
var myRadar = new Chart(myRadarElement, {
type: 'radar', // チャートのタイプ
data: { // チャートの内容
labels: ["one", "two", "three", "four", "five", "six"],
datasets: [{
@marorika
marorika / chart-js-bar.html
Created March 29, 2018 15:38
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myBar" style="width: 100%; height: 300px;"></canvas>
<script>
var myBarElement = document.getElementById("myBar");
var myBar = new Chart(myBarElement, {
type: 'bar', // チャートのタイプ
data: { // チャートの内容
labels: ["one", "two", "three", "four", "five", "six"],
datasets: [{
label: 'red',
@marorika
marorika / chart-js-line.html
Created March 29, 2018 15:29
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myLine" style="width: 100%; height: 300px;"></canvas>
<script>
var ctx = document.getElementById("myLine");
var myLine = new Chart(ctx, {
type: 'line', // チャートのタイプ
data: { // チャートの内容
labels: ["one", "two", "three", "four", "five", "six"],
datasets: [{
@marorika
marorika / setting-chart-js.html
Last active March 27, 2018 16:53
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!-- その他内容（任意） -->
</head>
<body>
@marorika
marorika / sample-c3-js.html
Created March 25, 2018 10:38
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.1/c3.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.1/c3.min.js"></script>
<div id="sample-c3" style="width: 100%; height: 300px;"></div>
<script type="text/javascript">
var chart = c3.generate({
bindto: '#sample-c3',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250]