Line, Area and Combo

These three chart types are the most versatile and least restricted. They are perfect for displaying continuous data (the domain column is either numerical or a date) as well as discrete data points in a continuous fashion. All features work on them as well as the rangeStack.

Combo Chart

The Combo chart is the most versatile of all charts allowing the user to combine other chart types into one display. The Combo can have distinctly stylized data columns, each one belonging to a different type. To achieve this effect simply add settings to the chartOptions in the main configuration object.

In the following example, a Combo chart will be generated and each data column will be represented in a different way. For more information on the series option please look at the docs

$('#id').CreateChart({
    ...
    chartType: 'ComboChart',
    chartOptions: {
        // default: 'line'; other values: 'area', 'bars', 'candlesticks', 'steppedArea'
        seriesType: 'line',
        series: {
            '1' : {type: 'area', /* other series options */  },
            '2' : {type: 'bars', /* other series options */  },
            '3' : {type: 'candlesticks', /* other series options */  },
            '4' : {type: 'steppedArea', /* other series options */  }
        },
        ...
    }
});

The series configuration will be preserved even when the feature for removing columns is in use.

Examples

$('#chart').TempBuddyChart({
	chartType : 'LineChart',
	url : url,
	params : {
		action: 'petVolume'
	},
	chartOptions : {
		title: 'Pet Volume',
		width: 800,
		height: 350,
		hAxis: {title: 'Time'},
		vAxis: {title: 'Shriek power'},
		colors: ['#a52714', '#097138']
	},
	features : ['printableVersion']
});

$('#chart').TempBuddyChart({
	chartType : 'AreaChart',
	url : url,
	params : {
		action: 'cropYields'
	},
	chartOptions : {
		title: 'Crop Yields',
		width: 800,
		height: 350,
		isStacked: 'percent',
		colors: ['#a52714', '#097138']
	},
	features : ['printableVersion']
});

$('#dashboard').TempBuddyChart({
	chartType : 'ComboChart',
	url : url,
	params : {
		action: 'hiredPersonnelByMonth'
	},
	rangeStack : {
		printRange : function (range) {
			return range.map(function(v){
				return (v.getMonth()+1)+'/'+v.getFullYear()
			}).join(' : ');
		}
	},
	chartOptions : {
		height : 300,
		seriesType: 'line',
		series: {
			'0' : {color:'#34f'},
			'2' : {color:'#f43'},
			'1' : {type: 'area', color:'#fe4'},
			'3' : {type: 'bars', color:'#7c4'},
		}
	},
	preprocesses : [
		{call:'dateFrom_Y-M-D', params:[0]}
	],
	postprocesses : [
		// do not combine these two in production. Effects are additive
		{call:'addColumnSum', params:['Sum']},
		{call:'addColumnAvg', params:['Average']}
	],
	features : [
		'responsiveness',
		'removeColOnSelect',
		'removeRowOnSelect',
		'printableVersion'
	],
	removedRowLabelFactory : function (date) {
		return date.toDateString();
	},
	whenDrawn : (function(){
		var events = false;
		return function () {
			var wrap = this;
			if (!events) {
				events = !events;
				$('#refresh').click(function(){
					wrap.refreshData({action:'randomData'});
				});
			}
		};
	}())
});