Is it possible reference a point from a series within the valueSuffix parameter?
I want to include a percentage value within the Suffix by dividing the height of the series 1 column by the height of the series 2 column.
So something like the following:
valueSuffix: ( series[1].max / series[2].max ) + ' %'
Is this possible?
Thanks in advance!
Armin
The API states this : valueSuffix: String
Which means the valueSuffix can only be a String. If you want something more complex than a string, consider using tooltip.formatter instead
Inside the formatter you will have access to the chart as this.series.chart and from the chart you can then access any series or any point you may wish to
Related
In highcharts stock charts, different series types have different parameters for example the paramaters for macd can be seen here:
https://api.highcharts.com/highstock/series.macd.params
I would like to be able to get a map of type names, like "macd" or "sm", to parameters. Preferably an example using the typescript version of Highstock, or even better if it was in angular-highcharts.
For example:
{
"sm" => ["index" : 1 , "period": 2],
"macd" => ["index": 11, "longperiod":12 , "period":23, "shortperiod":22],
.
.
.
}
Edit:
To clarify, how would I create an object with the default params across all indicators as shown for MACD here on line 97:
https://github.com/highcharts/highcharts/blob/9b3c23b50892f96487593fd7e553d9432e60f635/ts/Stock/Indicators/MACD/MACDIndicator.ts#L97
I would like to get the params before adding the series to the chart if possible.
This is a path to find params options for MACD indicator
chart.series[2].options.params. Another indicators can be show as a series linkedto bind to the series.
Demo: https://jsfiddle.net/BlackLabel/wa83fhdb/
The params for each type are available through the Highcharts.Series.types variable:
import * as Highcharts from "highcharts/highstock";
import HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);
import {Dictionary, PlotMacdOptions, Series, SeriesOptions} from
"highcharts";
import IndicatorsAll from "highcharts/indicators/indicators-all";
IndicatorsAll(Highcharts);
const seriesType = "macd";
const types: any= Highcharts.Series.types;
console.log( types[seriesType].defaultOptions.params);
I am using the sum aggregate to calculate some totals in an angular ui-grid.
The totals get displayed just fine but I could not figure out how to change the label that gets preceeds to the total.
if the total is 5000 for example, the footer will display : total : 5000
How do I remove the word total ? I see it in the source but I cannot figure out how to change it without changing the source.
Thanks
I found the 'undocumented' (http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions.columnDef) property that can be used for this purpose : aggregationLabel
you can remove that just bu adding this function
$scope.hideAgregationChar = function( aggregation ){
aggregation.rendered = aggregation.value;
};
and in your grid definition add this
customTreeAggregationFinalizerFn: $scope.hideAgregationChar,
or if you wan to change the word to another one just change the cell templates like this
cellTemplate: '<div class="ui-grid-cell-contents">\'Total\' (capital \'T\') {{col.getAggregationValue() | number:2 }}</div>'
that will change the total to Total for example.
You have to include just footerCellTemplate as below for that particular column which you need to aggregate sum.
footerCellTemplate: '<div class="ui-grid-cell-contents">\Total:\ {{col.getAggregationValue() | number:2 }}</div>'
for example, the above line will change the total to Total.
I have a Kendo Chart bound to a data model which is receiving a list of different points. The category axis is a date axis in which the maximum and minimum value are bound to the model. Always the span for the category axis is one whole year (12 months, not necessarily beginning from January).
The code for the axis is as follows:
.CategoryAxis(axis => axis
.Labels(labels => labels.Rotation(0).Format("MMM ‘yy"))
.Date().Min(Model.StartDate).Max(Model.EndDate).Justify(false)
)
The category axis renders correctly when I have more than 1 data point present in the chart, however when I have just one datapoint the category axis becomes a mess (all the labels become stacked and repeated).
i was wondering if there is a way to specify a mandatory number of ticks to the axis as to always have just 12 ticks corresponding to each month.
Thanks
Luis.
The only to have all the ticks is to append your data of chart with null values of missing months. So when you have got one data point you need to append other data point with null values but remaining other months. Please see below sample code:
<div id="kk"></div>
<script>
var _data=[{"weight":200,"createddate":"1/1/2014"},
{"weight":200,"createddate":"2/1/2014"},
{"weight":200,"createddate":"3/1/2014"},
{"weight":149.91,"createddate":"4/1/2014"},
{"weight":null,"createddate":"5/1/2014"},
{"weight":null,"createddate":"6/1/2014"},
{"weight":null,"createddate":"7/1/2014"},
{"weight":null,"createddate":"8/1/2014"},
{"weight":null,"createddate":"9/1/2014"},
{"weight":null,"createddate":"10/1/2014"},
{"weight":null,"createddate":"11/1/2014"},
{"weight":null,"createddate":"12/1/2014"}]
$("#kk").kendoChart({
dataSource: {
data:_data
},
seriesColors: ["Red"],
seriesDefaults: {
type: "column",
},
series: [{
name: "weight",
field: "weight",
categoryField: "createddate",
}],
categoryAxis: {
type: "date",
baseUnit: "months"
}
});
</script>
Please find a JSFiddle for the same.
This way when you get your JSON Data from Controller, either you can update the JSON Data at Controller Side and Append Missing Data Points with null value or else you can do it in javascript as well once you get the data in the View and before binding it with chart.
I'm trying to use the type:'datetime' for my x-axis, and am getting a graph on a vertical line and dates going all the way back to 1970. Is there any way to circumvent this error?
Here's my use case: I'm tracking my page performance at regular intervals. if the server goes down for any reason or the metric was unable to be tracked, then we end up with a gap in the line. the requirement is to show this as datetime, but if i populate the series with any null datapoints, Highcharts throws an error 15.
series: [{
data: [
{x:1389254400000,y:10},
{x:1389554400000,y:9},
null,
{x:1389854400000,y:12}]
}]
Here's the fiddle: http://jsfiddle.net/agjZB/23/
If i remove the null datapoint, everything works fine. Thanks for the extra eyes!
You have to make the NULL point the same format as your other points.
Or, don't include it. If you have no data for timestamp x why include it or if you have no data at all why include it?
Example of option 1:
series: [{
data: [
{x:1389254400000,y:10},
{x:1389554400000,y:9},
{x:1389554400000,y:null},
{x:1389854400000,y:12}]
}]
For line chart you shouldn't use points with the same x value, becasue a few feateaures like tooltip will not work correct. You need to set scatter type and lineWidth as 2.
I am using highchart, trying to make a chart that shows high and low values for the number of people occupying various rooms. So I have a data like this:
[[roomName, low, high], [roomName, low, high] ...]
For example:
["XRay", 12, 45], ["Waiting Room", 8, 22], ["Admitting", 22, 56]]
What I want to have happen is for the x Axis to use the room names as the values on the category axis. But I can't see to get this to happen. It uses them as the names of the points instead.
If I am just doing a column chart, I can set x and y properties for the points:
[x:"XRay", y:12], [x:"Waiting Room", y:8], [x:"Admitting", y:56]]
But I don't know how I can do this with column ranges.
I can of course manually parse the data and set the categories of the xAxis myself, but I am wondering if there is a better way.
Thanks!
It could be done in two ways, as suggested categories, or using label formatter, both are here: http://jsbin.com/oyudan/17/edit
Formats:
[ {x: 'string' } ... ]
are not proper.