Using the DashArray and PathLength Decorator for Graphs (incl. Hype Data Magic)

Here is a version with the additional little helper for graphs wrapping the dasharray and pathlength decorators to simplify setting the values:

CleanShot 2021-11-14 at 22.58.11@2x

HypeDataDecorator.observeBySelector(
	'[data-graph-percent], [data-graph-offset]', 
	function(hypeDocument, element, event){
		var graphPercent = element.getAttribute('data-graph-percent') || 0;
		var graphOffset = element.getAttribute('data-graph-offset') || 0;
		element.setAttribute('data-dasharray', '0,'+graphOffset+','+graphPercent+',200');
		element.setAttribute('data-pathlength', 100);
	},
	{ attributeFilter: ['data-graph-percent', 'data-graph-offset'] }
);

Download:
HypeDashPathDecoratorWithGraphHelper.hype.zip (169,4 KB)

5 Likes

like :+1: :slight_smile:

1 Like

I made a version that links to a data source using Hype Data Magic. Still has the offsets in there and needed a group as Hype Data Magic doesn't like to reside directly on a vector object… but it works!

CleanShot 2021-11-14 at 22.57.36@2x

/* hype data magic handler for graph */
HypeDataMagic.addDataHandler('graph', function(hypeDocument, element, event){
	if (event.data) {
		var graphPercent = event.data.percent;
		var graphOffset = event.data.offset;
		var vectorToolElm = element.firstChild.firstChild;
		if (vectorToolElm){
			vectorToolElm.setAttribute('data-graph-percent', graphPercent);
			vectorToolElm.setAttribute('data-graph-offset', graphOffset);
		} 
	}
});

with some sample data:

HypeDataMagic.setData({
	data: [
		{percent: 50, offset:0},
		{percent: 15, offset:50},
		{percent: 35, offset:65},
	]
});

Download:
HypeDashPathDecoratorWithDataMagic.hype.zip (56,4 KB)


Update: Here is another version that also includes the color and sets the rows based on a class name and only one graph handler and magic key pointing to the data:

/* hype data magic handler for graph */
HypeDataMagic.addDataHandler('graph', function(hypeDocument, element, event){
	if (event.data) {
		var graphOffset = 0;
		for(var i=0; i!=event.data.length; i++){
		
			var rowElm = element.querySelector('.row'+i);
			if (!rowElm) continue;
			
			var rowData = event.data[i]; 
			var rowPathElm = rowElm.querySelector('path');
			var graphPercent = rowData.percent;
			var graphColor = rowData.color;
							
			if (graphPercent){
				rowElm.setAttribute('data-graph-percent', graphPercent);
				rowElm.setAttribute('data-graph-offset', graphOffset);
				graphOffset += graphPercent;
			}
			
			if (!(!rowPathElm || !graphColor)) {
				rowPathElm.setAttribute('style','stroke:'+graphColor+';');
			}
			
		}
	}
});

HypeDataMagic.addDataHandler('bgcolor', function(hypeDocument, element, event){
	if (event.data) element.style.setProperty('background-color', event.data, 'important');
});	

HypeDataMagic.setData({
	data: [
		{label: 'test', percent: 65, color: '#941100'},
		{label: 'west', percent: 5,  color: '#0096FF'},
		{label: 'best', percent: 30, color: '#008F00'},
	]
});

Download:
HypeDashPathDecoratorWithDataMagicStaggerdGraph.hype.zip (59,7 KB)

1 Like

Here is a version with labels. The labels don't have a positional live preview as I would need to fiddle with transform in the IDE (as there is no API) and that's a major pain, but they position just fine when previewed as seen in the screenshot. I tried to keep the “coupling“ of the dynamic data and the design (view) pretty loose to retain a broad range of native settings to customize appearance and animation with the regular Hype capabilities. Also, the code is in Head HTML but could be easily bundled into a single file in the resource folder (in that case I’d exclude the HypeDataMagic.setData from the bundle, though. Depending on your needs, like maybe pulling in the data with a fetch command for instance).

CleanShot 2021-11-15 at 22.09.22

Download:
HypeDashPathDecoratorWithDataMagicStaggerdLabelsGraph.hype.zip (70,4 KB)

5 Likes

Wonderful! This helps me creating donut- and piecharts in a second! Great job!

4 Likes

Immer wieder gerne, Herr Tewes! Und danke für die Rückmeldung … schön Projekte die diesen Kniff benutzen auch mal in freier Wildbahn zu sehen.


Always a pleasure, Mr. Tewes! And thanks for the feedback... nice to see projects that use this trick in the wild.

3 Likes