index.html

<!DOCTYPE html>
<html>
<head>
	<title>highchARRRts - A web interface for constructing interactive charts</title>
	<style>
		body{
			font-family: "HelveticaNeue-Light", "Helvetica Neue Light","Helvetica Neue", Helvetica,sans-serif;
			font-weight: 300;
		}
		ul,ol{
			margin:0;
			font-weight: bold;
			/*padding:0;*/
		}
		#main-option-list li{
			margin-bottom:11px;
		}
		#main-option-list li span{
			font-weight:normal;

		}
		.option-group{
			display:none;
		}
		#chart-container{
            min-width: 400px;
            height: 400px;
            margin: 0 auto;
        }
        a{
        	color:#26b6f1;
        }
        #attrib{
        	font-size:12px;
        	font-weight:bold;
        }
        h3{
        	margin:0;
        	padding:0;
        	font-size:20px;
        }
	</style>
	<script src="libs/jquery-1.9.1.min.js"></script>
    <script src="libs/highcharts.js"></script>
    <script src="libs/miso.ds.deps.ie.0.4.1.min.js"></script>

</head>
<body>
	<div style="float:left;width:250px;">
		<div><img src="imgs/pirate-arr-slim.png" width="235"/></div>
		<h3>make interactive charts</h3>
		<div id="attrib"><a href="http://github.com/csvsoundsystem/highchARRRts" target="_blank">a csv soundsystem project</a></div>
	</div>

	<div style="float:left;">
		<ol id="main-option-list">
			<li>
				<span>Enter the key of your Google spreadsheet of your data:</span> <input id="data-path" type="textfield"></input>
			</li>
			<li><span>Set some general options</span>
				<div>
					<input id="chart-title" type="texfield" placeholder="Title"></input>
					<input id="x-axis-label" type="texfield" placeholder="X-Axis label"></input>
					<input id="y-axis-label" type="texfield" placeholder="Y-Axis label"></input>
				</div>
			</li>
			<li>
				<span>What is your data?: </span>
				<select id="template-selector">
					<option value=""></option>
					<option value="categorical">Categorical</option>
					<option value="scatter">Scatter</option>
					<option value="datetime">Time series</option>
				</select>
				<div id="categorical-options" class="option-group">
					<span>Type:</span> <select class="chart-type-selector">
		                <option value='line'>Line</option>
		                <option value='column'>Column</option>
		                <option value='area'>Area</option>
		                <option value='bar'>Bar</option>
		            </select>
				</div>
				<div id="scatter-options" class="option-group">
					<span>Type:</span> <select class="chart-type-selector">
		                <option value='scatter'>Scatter</option>
		                <option value='column'>Column</option>
		                <option value='area'>Area</option>
		                <option value='bar'>Bar</option>
		            </select>
		            <input class="x-val" type="texfield" placeholder="X-Value column name"></input>
		            <input class="y-val" type="texfield" placeholder="Y-Value column name"></input>
				</div>
				<div id="datetime-options" class="option-group">
					<span>Type:</span> <select class="chart-type-selector">
		                <option value='line'>Line</option>
		                <option value='spline'>Spline</option>
		                <option value='scatter'>Scatter</option>
		                <option value='column'>Column</option>
		                <option value='area'>Area</option>
		                <option value='bar'>Bar</option>
		            </select>
		            <input class="date-col" type="texfield" placeholder="Date column name"></input>
		            <input class="val-col" type="texfield" placeholder="Value column name"></input>
		            <input class="date-format" type="texfield" placeholder="Date format (YYYY-MM-DD)"></input>
				</div>
			</li>
			<li><span>Draw / Update chart with new option</span> <input id="draw-redraw" type="submit" value="GO!"></li>
		</ol>
	</div>
	<div id="chart-container"></div>

	<script>
		(function(){
			var CHART_INFO ={
				template: null,
				c_type: 'line'
			}
			$("#template-selector").change(function(){
				var template = $(this).val();
				$('.option-group').hide();
				$("#"+template+"-options").show();

				CHART_INFO.template = template;

				if (template == 'scatter'){
					CHART_INFO.c_type = 'scatter'
				}else if (template == 'datetime'){
					CHART_INFO.c_type = 'line'
				}
			});

			$('.chart-type-selector').change(function(){
                var chart_type = $(this).val();
                CHART_INFO.c_type = chart_type;
                // calcChartData();
                // draw_redraw();

			});

			function draw_redraw(){
				var tmpl = CHART_INFO.template;
				var type = CHART_INFO.c_type;
				var title = $("#chart-title").val();
				var x_axis_label = $("#x-axis-label").val();
				var y_axis_label = $("#y-axis-label").val();

				var x_col = $('.x-val').val();
				var y_col = $('.y-val').val();

				var date_col = $('.date-col').val();
				var val_col = $('.val-col').val();
				var date_format = $('.date-format').val();

				var data_path = $('#data-path').val()

				if (tmpl == 'categorical'){
					categorical_plot(type, title, x_axis_label, y_axis_label, data_path);
				}else if (tmpl == 'scatter'){
					// CHART_INFO.c_type = type = 'scatter'
					scatter_plot(type, title, x_axis_label, y_axis_label, x_col, y_col, data_path)
				}else if (tmpl == 'datetime'){
					// CHART_INFO.c_type = type = 'line'
					datetime_plot(type, title, x_axis_label, y_axis_label, date_col, val_col, date_format, data_path)
				}
				
			}

			$('#draw-redraw').click(function(){
				draw_redraw();
			});

			function datetime_plot(type, title, x_axis_label, y_axis_label, date_col, val_col, date_format, data_path){
				var chart;
                    var CHART_OPTIONS = {
                        c_type: type,
                        date_col: date_col,
                        date_format: date_format,
                        val_col: val_col,
                        title: title,
                        x_label: x_axis_label,
                        y_label: y_axis_label,
                        color_array : ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf', '#aec7e8', '#ffbb78', '#98df8a','#ff9896', '#c5b0d5','#c49c94', '#f7b6d2', '#c7c7c7', '#dbdb8d', '#9edae5']
                    };

                    var ds = new Miso.Dataset({
                          importer : Miso.Dataset.Importers.GoogleSpreadsheet,
                          parser : Miso.Dataset.Parsers.GoogleSpreadsheet,
                          key : data_path,
                          worksheet : "1"
                        // url : data_path,
                        // delimiter: ','
                    });

                    ds.fetch({
                        success : function() {
                            calcChartData();
                        },
                        error: function(){
                            alert('Oh no! There was an error!')
                        }
                    });

                    function calcChartData(){
                        var series_data = constructDataSeries();
                        buildGraph(series_data);

                    };
                    function sortTimeData(rows){
                        /* HighCharts will get confused if the data isn't in the proper order */
                        rows.sort(function(a, b){
                            var dateA = new Date(a[CHART_OPTIONS.date_col])
                            var dateB = new Date(b[CHART_OPTIONS.date_col])
                            return dateA - dateB //sort by date ascending
                        });
                        return rows

                    }
                    function constructDataSeries(){
                        var series = [];
                        var rows = ds.toJSON();
                        var sorted_rows = sortTimeData(rows);
                        /* This assumes that your first column is your name column. We could also make CHART_OPTIONS.name_col to explicitly choose that */
                        var first_col_name = ds.columnNames()[0];

                        /* Group by name */
                        var nested = {};
                        var index_counter = 0;
                        _.each(sorted_rows, function(row, index){
                            var series_name = row[first_col_name];

                            if (!nested[series_name]){
                                nested[series_name] = {};
                                nested[series_name]['data'] = new Array();
                                nested[series_name]['color_index'] = index_counter;
                                index_counter++;
                            };
                            var date_object = moment.utc(row[CHART_OPTIONS.date_col], CHART_OPTIONS.date_format).valueOf()
                            var arr = [date_object, row[CHART_OPTIONS.val_col]]

                            nested[series_name]['data'].push(arr);
                        });


                        /* Format for HighCharts */
                        for (var serie in nested){
                            if (_.has(nested, serie)){
                                /* We only have 20 colors in our initial color hash, thank you ColorBrewer */
                                /* So if you load more than 20 series, each one thereafter will just have a random one of those colors */
                                if (nested[serie]['color_index'] > 20){
                                    var random = Math.floor(Math.random() * (20 + 1));
                                    nested[serie]['color_index'] = random;
                                };
                                var obj = {
                                    'name': serie,
                                    'color': CHART_OPTIONS.color_array[nested[serie]['color_index']],
                                    'data': nested[serie]['data']
                                };
                                series.push(obj)
                            }
                        }
                        return series;
                    };

                    function constructColumnNames(){
                        var col_names = [];

                        /* For each column, start at 1 to skip the first column which holds the name */
                        for (var i = 1; i < ds.columnNames().length; i++){
                            col_names.push(ds.columnNames()[i]);
                        };
                        return col_names;

                    };

                    function buildGraph(series_data){
                        chart = new Highcharts.Chart({
                            chart: {
                                renderTo: 'chart-container',
                                type: CHART_OPTIONS.c_type
                            },
                            title: {
                                text: CHART_OPTIONS.title,
                                style: {
                                    color: '#303030',
                                    font: 'normal 15px "Arial", sans-serif'
                                }
                            },
                            subtitle: {
                                text: ''
                            },
                            xAxis: {
                                type: 'datetime',
                                title: {
                                    text: CHART_OPTIONS.x_label,
                                    style: {
                                        color: '#303030',
                                        font: 'normal 13px "Arial", sans-serif'
                                    }
                                }
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: CHART_OPTIONS.y_label,
                                    style: {
                                        color: '#303030',
                                        font: 'normal 13px "Arial", sans-serif'
                                    }
                                },
                            },
                            legend: {
                                layout: 'vertical',
                                backgroundColor: '#FFFFFF',
                                align: 'right',
                                verticalAlign: 'top',
                                x: 0,
                                y: 0,
                                floating: true,
                                shadow: false,
                                borderRadius:0
                            },
                            tooltip: {
                                formatter: function() {
                                    return this.series.name + '<br/>'+
                                        moment(this.x).format(CHART_OPTIONS.date_format) +': '+ this.y;
                                },
                                borderRadius: 1,
                                borderWidth: 1,
                                shadow: false
                            },
                            plotOptions: {
                                column: {
                                    pointPadding: 0.2,
                                    borderWidth: 0
                                }
                            },
                            series: series_data
                        });
                    };
			}

			function categorical_plot(type, title, x_axis_label, y_axis_label, data_path){
				var chart;
                    var CHART_OPTIONS = {
                        c_type: type,
                        title: title,
                        x_label: x_axis_label,
                        y_label: y_axis_label,
                        color_array : ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf', '#aec7e8', '#ffbb78', '#98df8a','#ff9896', '#c5b0d5','#c49c94', '#f7b6d2', '#c7c7c7', '#dbdb8d', '#9edae5']
                    };

                    var ds = new Miso.Dataset({
                          importer : Miso.Dataset.Importers.GoogleSpreadsheet,
                          parser : Miso.Dataset.Parsers.GoogleSpreadsheet,
                          key : data_path,
                          worksheet : "1"
                    });

                    ds.fetch({
                        success : function() {
                            calcChartData();
                        },
                        error: function(){
                            alert('Oh no! There was an error.');
                        }
                    });

                    function calcChartData(){
                        var series_data = constructDataSeries();
                        var column_names = constructColumnNames();
                        buildGraph(series_data, column_names);

                    };
                    function constructDataSeries(){
                        var series = [];
                        var rows = ds.toJSON();
                        var first_col_name = ds.columnNames()[0];

                        // For each row
                        _.each(rows, function(row, index){
                            var row_values = [];

                            // For each column, start at 1 to skip the first column which holds the name
                            for (var i = 1; i < ds.columnNames().length; i++){
                                row_values.push(row[ds.columnNames()[i]]);
                            };

                            // We only have 20 colors in our initial color hash, thank you ColorBrewer
                            // So if you load more than 20 series, each one thereafter will just have a random one of those colors
                            if (index > 20){
                                var random = Math.floor(Math.random() * (20 + 1));
                                index = random;
                            }
                            // Create a highchart series data object
                            var obj = {
                                name: row[ds.columnNames()[0]],
                                color: CHART_OPTIONS.color_array[index],
                                data: row_values

                            };
                            series.push(obj);
                        });
                        return series;

                    };

                    function constructColumnNames(){
                        var col_names = [];

                        // For each column, start at 1 to skip the first column which holds the name
                        for (var i = 1; i < ds.columnNames().length; i++){
                            col_names.push(ds.columnNames()[i]);
                        };
                        return col_names;

                    };

                    function buildGraph(series_data, column_names){
                        chart = new Highcharts.Chart({
                            chart: {
                                renderTo: 'chart-container',
                                type: CHART_OPTIONS.c_type
                            },
                            title: {
                                text: CHART_OPTIONS.title,
                                style: {
                                    color: '#303030',
                                    font: 'normal 15px "Arial", sans-serif'
                                }
                            },
                            subtitle: {
                                text: ''
                            },
                            xAxis: {
                                categories: column_names,
                                title: {
                                    text: CHART_OPTIONS.x_label,
                                    style: {
                                        color: '#303030',
                                        font: 'normal 13px "Arial", sans-serif'
                                    }
                                }
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: CHART_OPTIONS.y_label,
                                    style: {
                                        color: '#303030',
                                        font: 'normal 13px "Arial", sans-serif'
                                    }
                                },
                            },
                            legend: {
                                layout: 'vertical',
                                backgroundColor: '#FFFFFF',
                                align: 'right',
                                verticalAlign: 'top',
                                x: 0,
                                y: 0,
                                floating: true,
                                shadow: false,
                                borderRadius:0
                            },
                            tooltip: {
                                formatter: function() {
                                    return this.series.name + '<br/>' +
                                        this.x +': '+ this.y;
                                },
                                borderRadius: 1,
                                borderWidth: 1,
                                shadow: false
                            },
                            plotOptions: {
                                column: {
                                    pointPadding: 0.2,
                                    borderWidth: 0
                                }
                            },
                            series: series_data
                        });
                    };
			}


			function scatter_plot(type, title, x_axis_label, y_axis_label, x_col, y_col, data_path){
				var chart;
                    var CHART_OPTIONS = {
                        c_type: type,
                        x_col: x_col,
                        y_col: y_col,
                        title: title,
                        x_label: x_axis_label,
                        y_label: y_axis_label,
                        color_array : ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf', '#aec7e8', '#ffbb78', '#98df8a','#ff9896', '#c5b0d5','#c49c94', '#f7b6d2', '#c7c7c7', '#dbdb8d', '#9edae5']
                    };

                    var ds = new Miso.Dataset({
                          importer : Miso.Dataset.Importers.GoogleSpreadsheet,
                          parser : Miso.Dataset.Parsers.GoogleSpreadsheet,
                          key : data_path,
                          worksheet : "1"
                    });

                    ds.fetch({
                        success : function() {
                            calcChartData();
                        },
                        error: function(){
                            alert('Oh no! There was an error!')
                        }
                    });

                    function calcChartData(){
                        var series_data = constructDataSeries();
                        buildGraph(series_data);

                    };
                    function sortByXValue(rows){
                        /* HighCharts will get confused if the data isn't in the proper order */
                        rows.sort(function(a, b){
                            var A = a[CHART_OPTIONS.x_col]
                            var B = b[CHART_OPTIONS.x_col]
                            return A - B //sort by x ascending
                        });
                        return rows

                    };

                    function constructDataSeries(){
                        var series = [];
                        var rows = ds.toJSON();
                        var sorted_rows = sortByXValue(rows)
                        /* This assumes that your first column is your name column. We could also make CHART_OPTIONS.name_col to explicitly choose that */
                        var first_col_name = ds.columnNames()[0];

                        /* Group by name */
                        var nested = {};
                        var index_counter = 0;
                        _.each(sorted_rows, function(row, index){
                            var series_name = row[first_col_name];

                            if (!nested[series_name]){
                                nested[series_name] = {};
                                nested[series_name]['data'] = new Array();
                                nested[series_name]['color_index'] = index_counter;
                                index_counter++;
                            };
                            var arr = [row[CHART_OPTIONS.x_col], row[CHART_OPTIONS.y_col]]

                            nested[series_name]['data'].push(arr);
                        });


                        /* Format for HighCharts */
                        for (var serie in nested){
                            if (_.has(nested, serie)){
                                /* We only have 20 colors in our initial color hash, thank you ColorBrewer */
                                /* So if you load more than 20 series, each one thereafter will just have a random one of those colors */
                                if (nested[serie]['color_index'] > 20){
                                    var random = Math.floor(Math.random() * (20 + 1));
                                    nested[serie]['color_index'] = random;
                                };
                                var obj = {
                                    'name': serie,
                                    'color': CHART_OPTIONS.color_array[nested[serie]['color_index']],
                                    'data': nested[serie]['data']
                                };
                                series.push(obj)
                            }
                        }
                        return series;
                    };

                    function constructColumnNames(){
                        var col_names = [];

                        /* For each column, start at 1 to skip the first column which holds the name */
                        for (var i = 1; i < ds.columnNames().length; i++){
                            col_names.push(ds.columnNames()[i]);
                        };
                        return col_names;

                    };

                    function buildGraph(series_data){
                        chart = new Highcharts.Chart({
                            chart: {
                                renderTo: 'chart-container',
                                type: CHART_OPTIONS.c_type
                            },
                            title: {
                                text: CHART_OPTIONS.title,
                                style: {
                                    color: '#303030',
                                    font: 'normal 15px "Arial", sans-serif'
                                }
                            },
                            subtitle: {
                                text: ''
                            },
                            xAxis: {
                                title: {
                                    text: CHART_OPTIONS.x_label,
                                    style: {
                                        color: '#303030',
                                        font: 'normal 13px "Arial", sans-serif'
                                    }
                                },
                                startOnTick: true,
                                endOnTick: true,
                                showLastLabel: true
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: CHART_OPTIONS.y_label,
                                    style: {
                                        color: '#303030',
                                        font: 'normal 13px "Arial", sans-serif'
                                    }
                                },
                            },
                            legend: {
                                layout: 'vertical',
                                backgroundColor: '#FFFFFF',
                                align: 'right',
                                verticalAlign: 'top',
                                x: 0,
                                y: 0,
                                floating: true,
                                shadow: false,
                                borderRadius:0
                            },
                            tooltip: {
                                formatter: function() {
                                    return this.series.name + '<br/>'+
                                        CHART_OPTIONS.x_label +': '+ this.x +'<br/>'+ CHART_OPTIONS.x_label +': ' + this.y;
                                },
                                borderRadius: 1,
                                borderWidth: 1,
                                shadow: false
                            },
                            plotOptions: {
                                column: {
                                    pointPadding: 0.2,
                                    borderWidth: 0
                                }
                            },
                            series: series_data
                        });
                    };

			}
		}).call(this);
	</script>

</body>
</html>