mikbuch/index.html

## index.html
<!-- ChartJS plugin datasrouce example

chartjs-plugin-datasource: https://nagix.github.io/chartjs-plugin-datasource/
Samples: https://nagix.github.io/chartjs-plugin-datasource/samples/
Specific example: https://nagix.github.io/chartjs-plugin-datasource/samples/csv-index.html

Data source: https://gist.githubusercontent.com/mikbuch/32862308f4f5cac8141ad3ae49e0920c/raw/b2b256d69a52dd202668fe0343ded98371a35b15/sample-index.csv -->


<head>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script>
</head>
<body>
	<div>
		<canvas id="myChart"></canvas>
	</div>
    <script src="script.js"></script>
</body>

## sample-index.csv

          
            Temperature
            Precipitation

            
              January
              7
              8.1

            
              February
              7
              14.9

            
              March
              10
              41.0

            
              April
              15
              31.4

            
              May
              20
              42.6

            
              June
              23
              57.5

            
              July
              26
              36.0

## script.js
// ChartJS plugin datasrouce example

// chartjs-plugin-datasource: https://nagix.github.io/chartjs-plugin-datasource/
// Samples: https://nagix.github.io/chartjs-plugin-datasource/samples/
// Specific example: https://nagix.github.io/chartjs-plugin-datasource/samples/csv-index.html

// Data source: https://gist.githubusercontent.com/mikbuch/32862308f4f5cac8141ad3ae49e0920c/raw/b2b256d69a52dd202668fe0343ded98371a35b15/sample-index.csv

var chartColors = {
	red: 'rgb(255, 99, 132)',
	blue: 'rgb(54, 162, 235)'
};

var color = Chart.helpers.color;
var config = {
	type: 'bar',
	data: {
		datasets: [{
			type: 'line',
			yAxisID: 'temperature',
			backgroundColor: 'transparent',
			borderColor: chartColors.red,
			pointBackgroundColor: chartColors.red,
			tension: 0,
			fill: false
		}, {
			yAxisID: 'precipitation',
			backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
			borderColor: 'transparent'
		}]
	},
	plugins: [ChartDataSource],
	options: {
		title: {
			display: true,
			text: 'CSV data source (index) sample'
		},
		scales: {
			xAxes: [{
				scaleLabel: {
					display: true,
					labelString: 'Month'
				}
			}],
			yAxes: [{
				id: 'temperature',
				gridLines: {
					drawOnChartArea: false
				},
				scaleLabel: {
					display: true,
					labelString: 'Temperature (°C)'
				}
			}, {
				id: 'precipitation',
				position: 'right',
				gridLines: {
					drawOnChartArea: false
				},
				scaleLabel: {
					display: true,
					labelString: 'Precipitation (mm)'
				}
			}]
		},
		plugins: {
			datasource: {
				type: 'csv',
				url: 'https://gist.githubusercontent.com/mikbuch/32862308f4f5cac8141ad3ae49e0920c/raw/b2b256d69a52dd202668fe0343ded98371a35b15/sample-index.csv',
				delimiter: ',',
				rowMapping: 'index',
				datasetLabels: true,
				indexLabels: true
			}
		}
	}
};

window.onload = function() {
	var ctx = document.getElementById('myChart').getContext('2d');
	window.myChart = new Chart(ctx, config);
};
	<!-- ChartJS plugin datasrouce example

	chartjs-plugin-datasource: https://nagix.github.io/chartjs-plugin-datasource/
	Samples: https://nagix.github.io/chartjs-plugin-datasource/samples/
	Specific example: https://nagix.github.io/chartjs-plugin-datasource/samples/csv-index.html

	Data source: https://gist.githubusercontent.com/mikbuch/32862308f4f5cac8141ad3ae49e0920c/raw/b2b256d69a52dd202668fe0343ded98371a35b15/sample-index.csv -->


	<head>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script>
	</head>
	<body>
	<div>
	<canvas id="myChart"></canvas>
	</div>
	<script src="script.js"></script>
	</body>
	Temperature	Precipitation
January	7	8.1
February	7	14.9
March	10	41.0
April	15	31.4
May	20	42.6
June	23	57.5
July	26	36.0
	// ChartJS plugin datasrouce example

	// chartjs-plugin-datasource: https://nagix.github.io/chartjs-plugin-datasource/
	// Samples: https://nagix.github.io/chartjs-plugin-datasource/samples/
	// Specific example: https://nagix.github.io/chartjs-plugin-datasource/samples/csv-index.html

	// Data source: https://gist.githubusercontent.com/mikbuch/32862308f4f5cac8141ad3ae49e0920c/raw/b2b256d69a52dd202668fe0343ded98371a35b15/sample-index.csv

	var chartColors = {
	red: 'rgb(255, 99, 132)',
	blue: 'rgb(54, 162, 235)'
	};

	var color = Chart.helpers.color;
	var config = {
	type: 'bar',
	data: {
	datasets: [{
	type: 'line',
	yAxisID: 'temperature',
	backgroundColor: 'transparent',
	borderColor: chartColors.red,
	pointBackgroundColor: chartColors.red,
	tension: 0,
	fill: false
	}, {
	yAxisID: 'precipitation',
	backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
	borderColor: 'transparent'
	}]
	},
	plugins: [ChartDataSource],
	options: {
	title: {
	display: true,
	text: 'CSV data source (index) sample'
	},
	scales: {
	xAxes: [{
	scaleLabel: {
	display: true,
	labelString: 'Month'
	}
	}],
	yAxes: [{
	id: 'temperature',
	gridLines: {
	drawOnChartArea: false
	},
	scaleLabel: {
	display: true,
	labelString: 'Temperature (°C)'
	}
	}, {
	id: 'precipitation',
	position: 'right',
	gridLines: {
	drawOnChartArea: false
	},
	scaleLabel: {
	display: true,
	labelString: 'Precipitation (mm)'
	}
	}]
	},
	plugins: {
	datasource: {
	type: 'csv',
	url: 'https://gist.githubusercontent.com/mikbuch/32862308f4f5cac8141ad3ae49e0920c/raw/b2b256d69a52dd202668fe0343ded98371a35b15/sample-index.csv',
	delimiter: ',',
	rowMapping: 'index',
	datasetLabels: true,
	indexLabels: true
	}
	}
	}
	};

	window.onload = function() {
	var ctx = document.getElementById('myChart').getContext('2d');
	window.myChart = new Chart(ctx, config);
	};