I have this chart https://playground.anychart.com/D7okDBpO/4
AFAIK the x labels are automatically formatted according to the anychart.format.outputDateFormat(), so the only way to format them is to call anychart.format.outputDateFormat("someformat"). The problem is that I have multiple charts on a page and they all need different formats, and changing this global setting from multiple charts leads to concurrency issues (on some charts, the x labels are formatted with multiple different formats).
Is there some other way to format them? Having access to the original data from the formatting function for x labels would be enough, but it's not there:
chart.xAxis().labels().format(function () {
console.log(this); // only contains the already formatted date
return this.value;
});
this.tickValue contains unformatted dates, so you can use the {%tickValue} and {%x} string tokens to format the axes labels and the tooltip respectively. Please check this sample, pay attention to lines 35-36.
Related
I have a Google Sheet workbook with multiple sheets being used to track COVID-19 cases in institutions across the country. The built-in Google Sheets geo chart works perfectly for the data visualization I need to accomplish, with one issue: It currently can't differentiate between actual 0 and "no data", which super skews how the
(essentially you can choose what color to use on the map for high value, mid value, low value, and no value. Where it should be using the color for "no value", it uses the low value color instead which makes the visualization confusing.)
The reason it's doing that is the array it's using as its data source contains zeroes to represent "no data available".
The array is imported from a different sheet by using ={'State Totals'!N4:P54}. I found an explanation for how to generally use a formula to return empty cells, the example there being =if(B2-C2>0, B2-C2, " ").
I'm extremely noob when it comes to these formulas, and I cannot figure out if I can nest an IF condition in an array import, or vice versa, or... what or how.
Here's a link to the sheet in question, if that helps at all. Really I just need a formula that
Imports the array values
Returns empty cells in place of zeroes where they appear
I don't want to affect the origin sheet's zero handling, just the one that the chart's using. (I also am absolutely not being paid enough to try and rig up a better map with Google Data Queries instead of the in-built Google Sheets chart maker, so here's to hoping it's a simple matter of syntax.)
instead of ={'State Totals'!N4:P54} use:
=ARRAYFORMULA(IF('State Totals'!N4:P54=0,,'State Totals'!N4:P54))
I've got a stacked bar graph that shows two categories of information. Now I have a requirement to show the total of the bars at the end of the bar. I've attached a mock-up showing what I'm trying to do -- the numbers in red are what I'm trying to add.
(source: michaelandlisa.us)
I couldn't find anything in the documentation on how to add totals, or on how to add annotations (which would also work).
Basically, ShieldUI jQuery chart plugin renders the series without text, as shown here.
To alter this behavior, you need to first enable the text.
Then, you can use a format function to either show some cumulative text, or return an empty string. More information on this approach is available here.
This can be coupled with a global counter to determine each Xth iteration.
I managed to get this to work by adding a Scatter chart of total values on top of the existing bar chart.
http://michaelandlisa.us/Images/Forums/stacked_with_totals_scatter.png
I also set the color on the series to "transparent" so the point wouldn't show up, and then I bumped the X and Y by 15 and 12 respectively. I also set the style to Bold, and set the format to "{point.y:n0}". Here's the relevant MVC code (where totals is a List of object):
.DataSeries(series => series.Scatter()
.Data(totals)
.CollectionAlias("Total")
.Color("transparent")
.AddToLegend(false).DataPointText(dtp =>
{
dtp.Enabled(true);
dtp.Format("{point.y:n0}");
dtp.Style(s => s.FontWeight(FontWeight.Bold));
dtp.Color("red");
dtp.X(15);
dtp.Y(12);
}))
Ext.Date contains formats a and A for am/pm or AM/PM, respectively.
I want to add a format, call it b, for a/p without the m. I have searched parseFunctions and formatFunctions but did not find where the old format is defined.
Can anyone shed some light on this matter?
Have a look at formatCodes in Ext.Date:
The base format-code to formatting-function hashmap used by the format
method. Formatting functions are strings (or functions which return
strings) which will return the appropriate value when evaluated in the
context of the Date object from which the format method is called. Add
to / override these mappings for custom date formatting.
Please see the the xy/timeseries chart I have posted here: http://imagebin.org/151195
How do I selectively render only the horizontal lines, and leave out the lines between the neighboring data points that don't have the same y value? Basically the result would be a series of horizontal lines?
You'll have to scan your data model to find the ordinate where dy/dx < ɛ, for some value of ɛ near zero. Of course, you'll have to scan past the initial flat part, and decide how to deal with a series that never rises above ɛ.
Once you know the desired ordinate, use setLowerBound() on your domain axis.
What is (in summary) the function of the renderer in ext js?
A renderer is basically the function responsible for showing the underlying data to the user in a fashion or format that looks nice or makes sense.
Some examples might make it more clear:
A date renderer could take a javascript Date object and format it nicely like:
January 27, 2011
A number renderer could take a number like 2.23535346 and format it to 2 decimals like:
2.26
A renderer could even take a string like 'Y' or 'N' and instead show it as an image like:
Basically, the sky is the limit.
The renderer allows you to format data from a store in any way you see fit. It's a function that takes an data value and can return HTML. This is used to keep code that generates HTML separate from the code that generates the data.
Renderes transforms the value of display field into custom fashion.
let say i want to display any prize value into dollar
{ xtype:'displayfield',
name:'name',
value:'45',
renderer:this.transformIntoDollarConvention
}
here, transformIntoDollarConvention is a function defind above the constructor with a return statemnt .
transformIntoDollarConvention:function(value)
{
return value+'$';
}