How do you use ECharts' formatter to specify international number formats? - echarts

I'm building an API to create ECharts configs and would like the data labels to appear in the correct format based on where the end user is reading the chart from.
For example, if a number in a chart is 10,000 I would like it to appear as 10,000 in North America and 10.000 in Europe.
It looks like it's not possible to set a global format in ECharts, so I will need to use the formatter option. I thought this would be as simple as passing in a function that uses JavaScript's toLocaleString() or Intl.NumberFormat, but the ECharts docs make this look much more complicated.
I haven't found any examples of formatter that show both the inputs and outputs for common formatting scenarios, so I'm hoping to get some help in understanding the right way to do this.
Below is a very simple example of the function I'm hoping to include in formatter, but this particular example doesn't work.
formatter: function(d){
return d.toLocaleString()
}

Answering my own question so someone who needs this info can find it in the future. It turned out to be very simple, but I couldn't find a simple example like this anywhere!
Because ECharts was already displaying a value as a default label on my chart, I assumed that any function I included in formatter would use that value (that's the assumption in the simple function in my question).
I learned that when you add a function to formatter, it doesn't use the default value automatically. You need to pass in a specific reference to a piece of data using their params dataset.
In my example, I needed to use params.value to access the data I needed. My series dataset also includes both x and y columns in an array, so I needed to reference only one of the columns to get the labels to work.
params is detailed in the ECharts docs, but in the series type sections, it wasn't clear (at least to me) how to use it.
Here's what a simplified version of my working function looks like:
formatter: function(params){
let label = params.value[1] // this is my y column
return label.toLocaleString()
}

Related

Can I get the style object and Get the property of it?

I wanted to use javascript addin's to get the style object and get some proerties of it for example maybe paragraph property and get the indentation of this specific style but I cant get to the style object and get the property of it. I know that there is a collection of every style in document but I cant get any properties of those. There is way to change style in selected range but it could be very fine if I could get style from the range maybe and like i said erlier get some properties of it.
This is code in Word VBA that is example of property i want to see value of:
documents("[file_name]").Styles([index]).ParagraphFormat.LeftIndent
We can set the value to any variable:
Dim var As Integer/Long
Let var = documents("[file_name]").Styles([index]).ParagraphFormat.LeftIndent
As far as I know the office.js API for Word does not currently (v. 1.4) provide any Style objects with the kind of properties that you are used to seeing via the Object Model that VBA uses. All it lets you do is get the style names (localized and built-in) associated with another object such as a range, a paragraph, or various style properties associated with a table.
i.e. at the moment, the only way you would be able to get detailed style information would probably be to retrieve the document's XML and interpret that. Hard, I suspect.
I think that probably answers your question but in case you were looking for code to retrieve a style, to get the style name of a range, say, is straightforward, e.g. in Script Lab you can start with one of the basic JavaScript samples and modify its run function so it looks like this:
function run() {
return Word.run(function(context) {
var range = context.document.getSelection();
range.load("style");
return context.sync().then(function() {
console.log('The selected style was "' + range.style + '".');
});
});
}
Precisely which style name you get depends on the range - if you select two paragraphs with different styles, the style name will be "", and so on.

Chart is not visible in Parameter Variation Experiment page in AnyLogic

I created the parameter variation experiment to observe the changes in model outcome by changing specific parameter "ContactRateInfectious" values. Once I set the parameter values and Create default UI, no chart appeared. The image of my experiment page is given below.
I was expecting to see a chart that looked like this:
Let me know how can I achieve this.
Thank you.
You open the AnyLogic example models
You search for "Parameter Variation"
You open the first model you find (hint: it is called "Bass diffusion")
You copy the chart over
You figure out how they fill the chart from the model runs (see the Param-Var experiment properties in the example model)
You adapt it to your model
Done :)

Visio ShapeSheet ShapeData: keep two rows in sync

I have two Shape Data rows for a Shape's ShapeSheet:
Shape Data Label Prompt Type Format Value Invisible
Prop.Type "Type" "" 4 "Alpha;Beta;Gamma;Delta;Epsilon;Zeta;Eta;Theta;Iota;Kappa" INDEX(4,Prop.Type.Format) False
Prop.Abbrev "Abbrev" No Formula 4 "A;B;G;D;E;Z;E;T;I;K" INDEX(4,Prop.Abbrev.Format) True
The way I intent to use this is to have the user select the Type, say Epsilon, and then have the Abbrev automatically switch to the corresponding value in the Prop.Abbrev.Format.
Note: the values used here are placeholders for the actual values for my application, which are not shown here so they don't distract from the real answer I need, how to keep the selections in sync when the first one is chosen or changed.
Thanks for any help you can give!
I don't have Visio on this machine, so I am unable to copy and paste a working solution. The approach gets a little complicated, but extremely flexible.
Save your lists in the User section, rather than Prop - this then becomes underlying data for use in properties. If you are using a master stencil then this also helps with managing the fields.
You can now store an index in your data as well - this index points to the appropriate values in your arrays. You can use Actions and side menus to set the index which, when referenced properly, means you can have the full name and/or abbreviation in the side menu and the ShapeSheet does all the work underneath.
The functions you want to look at are:
Index (e.g. INDEX(1,User.Type) will return "Beta". (0-based)
Lookup (e.g. LOOKUP("D", User.Abbrev) will return "3". (0-based)
GetAtRef
SetAtRef
SetAtRefExpr
SetF
I had a similar business problem which relied on setting a background colour based on the value of shape data. Your final solution could end up including formulas like this: =SETF(GetRef(Prop.Type),"GUARD(INDEX(LOOKUP(Prop.X,Prop.X.Format),User.Type))").
For more in-depth discussion - check out https://superuser.com/questions/1277331/fillforegnd-in-shapesheet-using-wrong-data and the extended discussion at http://visguy.com/vgforum/index.php?topic=8205.15 - the latter link also includes an example file with working shapesheets (well, working to the extent that they exposed my problem).

Adding and removing Measures dynamically in sapui5 VizFrame

I would like to change Measures dynamically in my VizFrame like in ChartDemo App from sapui5 docs [link below].
https://sapui5.netweaver.ondemand.com/test-resources/sap/viz/demokit/chartdemo/index.html
So when I click to one of my five checkboxes the proper Measure will be added or removed in case of unchecking.
I have one json from which I get data.
I've tried with this code:
if(oCheckBox.getSelected()){
oVizFrame.removeFeed(feedValuesAxis);
feedValuesAxis.setValues("ValueFromJSON");
oVizFrame.addFeed(feedValuesAxis);
}
But it causes error:
[50005] - valueAxis : does not meet the minimum or maximum number of
feeds definition.
I am using SAP UI5 version 1.28.
I have one VizFrame, one Dataset with all Measures and two FeedItem one for values and one for Dimension.
I guess I have to create a binding, right? But how should I do it? Thanks a lot for any pieces of advice.
Simply, I have missed array when putting value into setValues() method.
So the answer is:
feedValuesAxis.setValues(["ValueFromJSON"]);

Formatting a line chart

I have a line chart in a report (rdlc), that I cannot get formatted correctly. There are 2 main things I am trying to accomplish.
1) The x-axis is a date, right now it is being displayed as the full date with time, and I want it to be displayed as mm/dd/yyyy. I have attempted to change this by using =FormateDateTime(Fields!EndDate.Value, DateFormat.ShortDate) This is exactly how I saw it in Microsoft's examples, even the one included in VS2008 (what I am using), but for some reason it says that .ShortDate is and unrecognized identifier. I am thinking this might be a bug. So any ideas on how to get it into the mm/dd/yyyy format?
2) I want the values that are being plotted not to be there actual value but the previous values before added to the value. This is to accomplish a continual upward slope, showing the totals. I would also like to filter out zero's since the first 20 entries are so are 0. When I try to use the filter option it for some reason makes the chart just a flat line.
Any suggestions to any of these problems or a link to a good tutorial would be great as I am new to using these reports. Thanks!
Update: I have accomplished these by applying changes to the actual data being supplied, I would still like to know an easier better way to do this.
You can format the date in the lable under the general tab like this.
=Format(Fields!POWDate.Value, "M/dd/yyyy")
As of now I have fixed the problem by formating the data in the SQL query to the way I would like it to be displayed in the report.