I am using GWT Highcharts and want to create Semi circle donut (http://www.highcharts.com/demo/pie-semi-circle). This is done in javascript with plotOptions.pie.startAngle und plotOptions.pie.endAngle. There seems to be no method for that in GWT Highcharts. I then tried to set it manually with .setOption("/plotOptions/pie/endAngle", "90"), but this had no effect. Maybe this was not support in HighStock 1.2.4 (latest version that is supported by GWT Highcharts)?
My code looks like this:
final Chart chart = new Chart()
.setType(Series.Type.PIE)
.setChartTitleText("Browser market shares at a specific website, 2010")
.setPlotBackgroundColor((String) null)
.setPlotBorderWidth(null)
.setPlotShadow(false)
.setOption("/plotOptions/pie/startAngle", "-90")
.setOption("/plotOptions/pie/endAngle", "90")
.setPiePlotOptions(new PiePlotOptions()
.setAllowPointSelect(true)
.setCursor(PlotOptions.Cursor.POINTER)
.setPieDataLabels(new PieDataLabels()
.setConnectorColor("#000000")
.setEnabled(true)
.setColor("#000000")
.setFormatter(new DataLabelsFormatter() {
#Override
public String format(DataLabelsData dataLabelsData) {
return "<b>" + dataLabelsData.getPointName() + "</b>: " + dataLabelsData.getYAsDouble() + " %";
}
})
)
)
.setLegend(new Legend()
.setLayout(Legend.Layout.VERTICAL)
.setAlign(Legend.Align.RIGHT)
.setVerticalAlign(Legend.VerticalAlign.TOP)
.setX(-100)
.setY(100)
.setFloating(true)
.setBorderWidth(1)
.setBackgroundColor("#FFFFFF")
.setShadow(true)
)
.setToolTip(new ToolTip()
.setFormatter(new ToolTipFormatter() {
#Override
public String format(ToolTipData toolTipData) {
return "<b>" + toolTipData.getPointName() + "</b>: " + toolTipData.getYAsDouble() + " %";
}
})
);
The working javscript is looking like this:
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares',
align: 'center',
verticalAlign: 'middle',
y: 50
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
{
name: 'Others',
y: 0.7,
dataLabels: {
enabled: false
}
}
]
}]
});
});
Is there any way to get this working with GWT Highcharts?
I think that may be problem with Highcharts version, according to docs - it's supported from 2.3.4. Well, there is no 2.3.4 version, there should be 2.3.5.
Highstock 1.2.4 is version released between Highcharts 2.3.3 and 2.3.5. Is there any chanse you can update Highstock to 1.2.5 ? In 1.2.5 it's supported for sure.
Related
I'm having some issues in the migration process to the newer version of Hibernate Search, mainly related to dynamic fields and the associated analyzer not being applied.
First, i'm building the analyzers:
private void buildLocalizedAnalyzer(ElasticsearchAnalysisConfigurationContext builder) {
SupportedLanguage.stream().forEach(
supportedLanguage ->
{
builder.analyzer(supportedLanguage.getDescription() + "Analyzer").custom()
.tokenizer(STANDARD)
.tokenFilters(LOWERCASE, EDGE_NGRAM_3,
supportedLanguage.getDescription() + "Stemmer",
supportedLanguage.getDescription() + "Stop"
);
builder.tokenFilter(supportedLanguage.getDescription() + "Stemmer")
.type("stemmer").param("language", supportedLanguage.getDescription());
builder.tokenFilter(supportedLanguage.getDescription() + "Stop")
.type("stop").param("stopwords", "_" + supportedLanguage.getDescription() + "_");
}
);
}
And then, using a property binder and a bridge, i'm indexing the required fields:
#Override
public void bind(PropertyBindingContext context) {
context.dependencies().useRootOnly();
var rootField = context.indexSchemaElement()
.objectField(context.bridgedElement().name());
SupportedLanguage.stream().forEach(
supportedLanguage -> context
.indexSchemaElement()
.fieldTemplate("localized_analyzer_" + supportedLanguage.name().toLowerCase(), f -> f
.asString()
.analyzer(supportedLanguage.getDescription() + "Analyzer"))
.matchingPathGlob("properties.search_" + supportedLanguage.name().toLowerCase() + "_*"));
context.bridge(List.class, new PropertyValueBinder.Bridge(rootField.toReference()));
}
In the property bridge:
private void indexEnumPropertiesForLocalizedSearch(DocumentElement target,
PropertyValueEnum propertyValue,
EnumValue enumValue) {
var fieldName = PREFIX_SEARCH + DEFAULT + DELIMITER + propertyValue.getProperty().getCode();
var indexedValue = ((EnumValueString) enumValue).getValue();
target.addValue(fieldName, indexedValue);
enumValue.getTranslations().forEach((language, translation) -> {
var fieldNameTranslated = PREFIX_SEARCH + language.getCode() + DELIMITER + propertyValue.getProperty().getCode();
var indexedValueTranslated = translation.getValue();
target.addValue(fieldNameTranslated, indexedValueTranslated);
});
}
But when i'm retrieving the termvectors, no analyzer has been applied and the search doesn't work:
_termvectors/8?fields=properties.search_en_category
{
"_index": "product-000001",
"_type": "_doc",
"_id": "8",
"_version": 1,
"found": true,
"took": 0,
"term_vectors": {
"properties.search_en_category": {
"field_statistics": {
"sum_doc_freq": 4,
"doc_count": 4,
"sum_ttf": 4
},
"terms": {
"Category three": {
"term_freq": 1,
"tokens": [
{
"position": 0,
"start_offset": 0,
"end_offset": 14
}
]
}
}
}
}
}
Am i missing something in the configuration/indexing process?
Thanks in advance
Did you make sure to drop and re-create your index before testing? The field templates are part of the schema, so you need to create the schema before they are effective. See https://docs.jboss.org/hibernate/stable/search/reference/en-US/html_single/#mapper-orm-schema-management
If that's not the problem, please provide the full code of your binder/bridge.
I have the following problem with com.byteowls.vaadin.chartjs ChartJs - I do not know how to remove gridLines conditionally without removing the labels. Here is the following code I have for creating the ChartJs :
`
BarChartOptions options = barChartConfig.options();
options.title().text(title).display(true);
options.legend().position(Position.RIGHT);
options.tooltips().mode(InteractionMode.X);
options.legend().labels().boxWidth(10).fontSize(10);
options.tooltips().position(Tooltips.PositionMode.NEAREST);
LinearScale yScale = new LinearScale();
yScale.stacked(true);
yScale.ticks().beginAtZero(true);
options.scales().add(Axis.Y, yScale);
DefaultScale xScale = new DefaultScale();
xScale.stacked(true);
xScale.ticks().autoSkip(false).callback("function(value,index,values){\n" +
"if(index % 2 !== 0){\n" +
" return undefined;\n" +
"\n" +
"} \n" +
"return value;\n" +
"\n" +
"}");
xScale.gridLines().lineWidth(1).color("rgb(0,0,0)");
options.scales().add(Axis.X, xScale);
ChartJs horizontalStackedChart = new ChartJs(barChartConfig);
horizontalStackedChart.setHeight(70, Sizeable.Unit.PERCENTAGE);
horizontalStackedChart.setWidthFull();
return horizontalStackedChart;`
and here is the Image: Chart Image 1
And there is the image I want to happen but with the labels from the previous chart: Chart Image 2
After i found on internet that there is a callback functions for the ticks are tried many ways but no one helps. I want to show gridLines after two datasets how it looks like in 'Chart Image 2' but the labels are gone. And I do not understand why this is happening. Is it possible actually?
Thanks in advance for the help!
You can set the lineColor of your xAxis gridLines to a function where you set the desired lines that you want to remove to a fully opague collor.
Example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'red'
}]
},
options: {
scales: {
x: {
grid: {
color: (ctx) => (ctx.index % 2 === 0 ? 'rgba(0,0,0,0)' : 'red')
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>
I'm wondering if it's possible to label the radial axis' for each category differently which appear only when hovering over a value. Probably easiest to explain with an example. So in this picture, the "English" marks have a range of 50 -100 which pops up when I hover over one of the values on that axis
Radar chart axis 1
What I then want to happen is when i hover over the "Behaviour" category for example is the radial axis labels for that category to show up which are labelled differently.
Radar chart Axis 2
I know this might be difficult (or impossible) to do but is there a creative way in ChartJS or HighCharts where this might be possible?
Thanks!
This is possible with Highcharts. You need to only find a common scale, use multiple y-axis and mock labels and tooltip values, for example:
var yLabels = [
[60, 70, 80, 90, 100],
['Average', 'Satisfactory', 'Good', 'Excellent', 'Outstanding']
];
Highcharts.chart('container', {
yAxis: [...],
xAxis: {
lineWidth: 0,
tickmarkPlacement: 'on',
categories: ['English', 'Behaviour', 'Physics', 'Chemistry', 'Biology', 'History']
},
tooltip: {
shared: true,
formatter: function() {
var points = this.points,
returnStr = this.x;
points.forEach(function(point) {
returnStr += (
'<br />' + point.series.name + ': ' + yLabels[point.point.x][point.y - 1]
);
});
return returnStr;
}
},
plotOptions: {
series: {
point: {
events: {
mouseOver: function() {
this.series.chart.yAxis[this.x].update({
labels: {
enabled: true
}
});
},
mouseOut: function() {
this.series.chart.yAxis[this.x].update({
labels: {
enabled: false
}
}, false);
}
}
}
}
},
...
});
Live demo: http://jsfiddle.net/BlackLabel/82dyogrp/
API Reference:
https://api.highcharts.com/highcharts/pane
https://api.highcharts.com/highcharts/yAxis
https://api.highcharts.com/highcharts/tooltip.formatter
I'm developing an application using Java Spring and ExtJS. The front end contains a panel with some fields including 3 comboboxes. To fill the comboboxes, I have defined a function which is fired on ComboBox afterRender. I have a store for each combobox (each combobox is filled from different tables).
The problem is when the page is rendered, the function is called 3 times but only the 3rd combo box is filled, or the JSON string returned contains only the value for last combo box. Actually the request for all 3 comboboxes are sent, but only the last request is processed.
Can anyone give me an idea how to handle this problem?
This is how i defied a combo box.
{
xtype: 'combobox',
x: 300,
y: 70,
store: 'TasksStr',
msgTarget: 'side',
displayField: 'label',
valueField: "value",
itemId: 'TaskRef',
fieldLabel: 'Task Ref',
name: 'taskRef'
} //Similarly 2 more combo boxes for Project and Status
This is the controller:
init: function(application) {
this.control({
"#TaskRef": {
afterrender: this.onComboboxAfterRender,
select: this.onFormBlur
},
"#ProjectRef": {
afterrender: this.onComboboxAfterRender,
select: this.onFormBlur
},
"#StatusRef": {
afterrender: this.onComboboxAfterRender,
select: this.onFormBlur
}
});
}
This is the store:
Ext.define('MainApp.store.TasksStr', {
extend: 'Ext.data.Store',
requires: [
'MainApp.model.Model'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'TasksStr',
model: 'MainApp.model.Model',
proxy: {
type: 'ajax',
url: 'http://localhost:8080/project/Tasks',
reader: {
type: 'json',
root: 'data',
totalProperty: 'count'
}
}
}, cfg)]);
}
});
This is the controller in java:
#RequestMapping(value="/{id}")
public String getElanLUT(#PathVariable("id") String Id, ModelMap model ){
System.out.println(Id);
try{
ABCDao.set(Id);
List<ABC> List = Dao.getABC();
model.addAttribute("data", List);
model.addAttribute("success", true);
model.addAttribute("count", List.size());
}catch(Exception e){
model.addAttribute("success", false);
e.printStackTrace();
}
return "jsonTemplate";
}
While running this code, the console for java prints all 3 Id's but the value returned is just the 3rd one.
Thanks in advance.!
You need to create store instances for all 3 combo boxes.
{
xtype: 'combobox',
x: 300,
y: 70,
store: Ext.create('MainApp.store.TasksStr'),
msgTarget: 'side',
displayField: 'label',
valueField: "value",
itemId: 'TaskRef',
fieldLabel: 'Task Ref',
name: 'taskRef'
}
I need to implement gwt-highcharts draggable data points in java, similar to what's done in js here:
http://jsfiddle.net/highcharts/AyUbx/ (code below)
I can't figure out how to do that in java from the gwt-highcharts javadocs. None of the mouse or click eventhandler documentation mentions how to capture drag info, or even how to capture mouse-up events, which combined with click events, would let me detect a drag action. I haven't found this anywhere else on the Web. Any help or examples would be greatly appreciated. I'm using GWT 2.5.1, and the latest versions of gwt-highcharts and jquery as of 2014-01-03. Thanks in advance. -Dan
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false,
zoomType: 'x'
},
xAxis: {
//categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
cursor: 'ns-resize',
point: {
events: {
drag: function(e) {
// Returning false stops the drag and drops. Example:
/*
if (e.newY > 300) {
this.y = 300;
return false;
}
*/
$('#drag').html(
'Dragging <b>' + this.series.name + '</b>, <b>' +
this.category + '</b> to <b>' +
Highcharts.numberFormat(e.newY, 2) + '</b>'
);
},
drop: function() {
$('#drop').html(
'In <b>' + this.series.name + '</b>, <b>' +
this.category + '</b> was set to <b>' +
Highcharts.numberFormat(this.y, 2) + '</b>'
);
}
}
},
stickyTracking: false
},
column: {
stacking: 'normal'
}
},
tooltip: {
yDecimals: 2
},
series: [{
data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
//draggableX: true,
draggableY: true,
dragMinY: 0,
type: 'column',
minPointLength: 2
}, {
data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse(),
draggableY: true,
dragMinY: 0,
type: 'column',
minPointLength: 2
}, {
data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
draggableY: true
}]
});