Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic coloring of bars, pies, slices, etc .. #5

Open
riclo opened this issue Jan 15, 2018 · 5 comments
Open

Dynamic coloring of bars, pies, slices, etc .. #5

riclo opened this issue Jan 15, 2018 · 5 comments

Comments

@riclo
Copy link

riclo commented Jan 15, 2018

What is the best way to give bars, pie's, slices color, during the creation of the data?
I want to do this in a microflow

I can see the conversion of the data in CreateLiteralInitializer, but what about the 'Options' part, where you can pass colors ?

var options = {
width: 400,
height: 240,
title: 'Toppings I Like On My Pizza',
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};

@riclo
Copy link
Author

riclo commented Jan 26, 2018

i just made an entry to pass a colorstring

@madnessxd
Copy link
Collaborator

The way I add the colors is by adding them to the widget settings:
image

You are bound to the colors that are set in the widget though. You can't change the color variably based on microflow variables if that was your intention.

@riclo
Copy link
Author

riclo commented Jan 26, 2018

I know for sure this can be neater, but what i did was :

in the microflow i created a colorstring for instance ["red", "blue", "green"].
In the CreateLiteralInitializer (which came along) I added a colorstring as a second parameter:
like :
public CreateLiteralInitializer(IContext context, IMendixObject ParameterParameter1, java.lang.String parmColorString)
{
super(context);
this.__ParameterParameter1 = ParameterParameter1;
this.parmColorString = parmColorString;
}

at the end of the function where the literal is created, i added:
literalOutput.append("chartcolor" + this.parmColorString);

Extracted the GoogleCharts.mpk.
Then I changed the base.js, where the data is being created.
Where I lookup this 'chartcolorString' and cut off that piece of string, so getting back the original string. This is the data piece. The rest of it is the colorstring.

           **var jsonString = this._contextObj ? this._contextObj.get(this.jsonDataSource) : "";
			// find colorstring
			var n = jsonString.indexOf("chartcolor");
			if( n > -1 )
			{
				// get colorstring
				var colorstring = jsonString.substr(n+10);	
				// get reduced jsonstring
				jsonString = jsonString.slice(0,n);
				this.colors = colorstring; 
			}**

and compress it back to a new GoogleCharts.mpk.

so now the chart is displayed in the colors the user wanted to.
in the properties 'colors' stays empty
screenshot_1
screenshot_2
screenshot_3
screenshot_4
@ @

@IncentroDennis
Copy link

That looks like a great solution. It might be a good addition to the java class and we could also maybe add similar parameters. It's easier to have everything in one flow at one place.

There are a lot of options in the parameters though, so I will look into what things we could add to the next version and what parameters are less used or too specific to certain graphs.
I personally do think that color is one of the most used variables. Maybe a general section will do for the other parameters.

@mrgroen
Copy link
Owner

mrgroen commented Dec 12, 2019

Would it be nice to make the whole options part dynamic?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants