Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>My first column chart by Highcharts</title>
- <!-- 1. Add JQuery and Highcharts in the head of your page -->
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
- <script src="http://code.highcharts.com/highcharts.js"></script>
- <!-- 2. You can add print and export feature by adding this line -->
- <script src="http://code.highcharts.com/modules/exporting.js"></script>
- <!-- 3. Add the JavaScript with the Highchart options to initialize the chart -->
- <script type="text/javascript">
- jQuery(document).ready(function() {
- var options = {
- chart: {
- renderTo: 'container',
- type: 'column'
- },
- title: {
- text: 'Tiny Tool Monthly Sales'
- },
- subtitle: {
- text: '2014 Q1-Q2'
- },
- xAxis: {
- categories: []
- },
- yAxis: {
- title: {
- text: 'Sales'
- }
- },
- series: []
- };
- // JQuery function to process the csv data
- $.get('column-data.csv', function(data) {
- // Split the lines
- var lines = data.split('\n');
- $.each(lines, function(lineNo, line) {
- var items = line.split(',');
- // header line contains names of categories
- if (lineNo == 0) {
- $.each(items, function(itemNo, item) {
- //skip first item of first line
- if (itemNo > 0) options.xAxis.categories.push(item);
- });
- }
- // the rest of the lines contain data with their name in the first position
- else {
- var series = {
- data: []
- };
- $.each(items, function(itemNo, item) {
- if (itemNo == 0) {
- series.name = item;
- } else {
- series.data.push(parseFloat(item));
- }
- });
- options.series.push(series);
- }
- });
- //putting all together and create the chart
- var chart = new Highcharts.Chart(options);
- });
- });
- </script>
- </head>
- <body>
- <!-- 3. Add the container -->
- <div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement