highcharts-android
highcharts-android copied to clipboard
highcharts
Data labels in HeatMap not displayed
After upgrading the library version: I refactored the data labels to match the new function requirements like (but stil not work):
1: options.setPlotOptions(getPlotOptions());
private HIPlotOptions getPlotOptions() {
HIPlotOptions plotOptions = new HIPlotOptions();
plotOptions.setSeries(new HIHeatmap());
plotOptions.getSeries().setDataLabels(getDataLabels());
return plotOptions;
}
private ArrayList<HIDataLabels> getDataLabels() {
ArrayList<HIDataLabels> hiDataLabelsArrayList = new ArrayList<HIDataLabels>();
HIDataLabels hiDataLabels = new HIDataLabels();
hiDataLabels.setEnabled(true);
hiDataLabels.setColor(HIColor.initWithHexValue("000000"));
hiDataLabelsArrayList.add(hiDataLabels);
return hiDataLabelsArrayList;
}
2:HIChartView chartView = new HIChartView(mContext);
3:chartView.setOptions(options);
I also tried to add it her:
private ArrayList<HISeries> getSeries() {
HIHeatmap heatmap = new HIHeatmap();
heatmap.setName(nameSeries);
heatmap.setData(heatmapData);
**heatmap.setDataLabels(getDataLabels());**
heatmap.setKeys(mKeys);
return new ArrayList<>(Collections.singletonList(heatmap));
}
Hi @nathanb2 ! Try to follow this example and avoid plotOptions - sometimes they are not working well for some chart types.
Hi @soommy12, I tried many solutions and the example of the website works with the old datalabel version. heatmap.setDataLabels(new HIDataLabels()); Object in place of the new request list. Please can you give me a working example using the updated library requesting a list of datalabels?
Yes, sure @nathanb2 ! Here you go:
HIHeatmap heatmap = new HIHeatmap();
HIDataLabels dataLabels = new HIDataLabels();
dataLabels.setEnabled(true);
dataLabels.setColor(HIColor.initWithHexValue("000000"));
ArrayList<HIDataLabels> dataLabelsArrayList = new ArrayList<>();
dataLabelsArrayList.add(dataLabels);
heatmap.setDataLabels(dataLabelsArrayList);
@soommy12 this is precisely matching the code I tried but doesn't work:
this is my datalabel builder:
private ArrayList<HIDataLabels> getDataLabels() {
ArrayList<HIDataLabels> hiDataLabelsArrayList = new ArrayList<HIDataLabels>();
HIDataLabels hiDataLabels = new HIDataLabels();
hiDataLabels.setEnabled(true);
hiDataLabels.setColor(HIColor.initWithHexValue("000000"));
hiDataLabelsArrayList.add(hiDataLabels);
return hiDataLabelsArrayList;
}
and i tried to set the labels in many places: plot options, series, heatmap object like what i wrote in the issue: "I also tried to add it her:"
private ArrayList<HISeries> getSeries() {
HIHeatmap heatmap = new HIHeatmap();
heatmap.setName(nameSeries);
heatmap.setData(heatmapData);
**heatmap.setDataLabels(getDataLabels());**
heatmap.setKeys(mKeys);
return new ArrayList<>(Collections.singletonList(heatmap));
}
Yes, but with your example you were using HIPlotOptions which won't work in that case. Please try to follow the example which I already shared with you. Add your series directly to HIOptions as the example shows. Do not use HIPlotOptions.
options.setSeries(new ArrayList<>(Collections.singletonList(heatmap)));
@soommy12 this is what I describe to you in my last comment In this case, i didn't use HIPlotOptions
Can you please share your whole code then? Especially the place where exactly did you use your getSeries() method. That would be helpful, because at this moment I have no clue what are you doing wrong. For me, using the example code works as intended. The only change I made is the code regarding data labels which I shared in one of my previous posts. I need the context of your project to understand your problem better. Thanks in advence.
@soommy12 this is the not working code using implementation 'com.github.highcharts:highcharts-android:v9.2.2':
`package com...;
import android.content.Context;
import com.highsoft.highcharts.common.hichartsclasses.HICSSObject; import com.highsoft.highcharts.common.hichartsclasses.HIChart; import com.highsoft.highcharts.common.hichartsclasses.HICredits; import com.highsoft.highcharts.common.hichartsclasses.HIDataLabels; import com.highsoft.highcharts.common.hichartsclasses.HIEvents; import com.highsoft.highcharts.common.hichartsclasses.HIExporting; import com.highsoft.highcharts.common.hichartsclasses.HIHeatmap; import com.highsoft.highcharts.common.hichartsclasses.HILegend; import com.highsoft.highcharts.common.hichartsclasses.HIOptions; import com.highsoft.highcharts.common.hichartsclasses.HIPlotOptions; import com.highsoft.highcharts.common.hichartsclasses.HISeries; import com.highsoft.highcharts.common.hichartsclasses.HISolidgauge; import com.highsoft.highcharts.common.hichartsclasses.HIStyle; import com.highsoft.highcharts.common.hichartsclasses.HITitle; import com.highsoft.highcharts.common.hichartsclasses.HITooltip; import com.highsoft.highcharts.common.hichartsclasses.HIXAxis; import com.highsoft.highcharts.common.hichartsclasses.HIYAxis; import com.highsoft.highcharts.common.HIColor; import com.highsoft.highcharts.core.HIChartView; import com.highsoft.highcharts.core.HIFunction; import com.leadermes.emerald.R;
import org.jetbrains.annotations.NotNull;
import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; import java.util.HashMap;
public class HeatMapBuilder {
private final boolean isFullScreen;
private Context mContext;
private int insightsID;
private static final String HEAT_MAP = "heatmap";
private ArrayList<String> YLabels;
private ArrayList<String> XLabels;
private String chartType;
HIOptions options = new HIOptions();
private String YTitle;
private int marginTop;
private int marginBottom;
private int plotBorderWidth;
private int titleFontSize;
private String legendAlign;
private String legendLayoutOrientation;
private int legendMargin;
private String legendVerticalAlign;
private int legendY;
private int legendSymbolHeight;
private String minColor;
private String maxColor;
private String nameSeries;
private String dataLabelsColor;
private ArrayList<Object[]> heatmapData;
private ArrayList<String> mKeys;
public HeatMapBuilder(Context context, boolean isFullScreen, int insightsID){
this.mContext = context;
this.isFullScreen = isFullScreen;
this.insightsID = insightsID;
initDefaultValues();
}
private void initDefaultValues() {
chartType = HEAT_MAP;
YTitle = "";
marginTop = 40;
marginBottom = 80;
titleFontSize = 24;
plotBorderWidth = 1;
YLabels = new ArrayList<>();
XLabels = new ArrayList<>();
heatmapData = new ArrayList<>();
legendAlign = "right";
legendLayoutOrientation = "vertical";
legendMargin = 0;
legendVerticalAlign = "top";
legendY = 25;
legendSymbolHeight = 280;
nameSeries = "";
dataLabelsColor = "000000";
minColor = "#FFFFFF";
maxColor = "#7cb5ec";
mKeys = new ArrayList<>();
HITitle title = new HITitle();//remove title
title.setText("");
options.setTitle(title);
HIExporting exporting = new HIExporting();//remove icons
exporting.setEnabled(false);
options.setExporting(exporting);
HICredits credits = new HICredits();//remove highchart.com credit
credits.setEnabled(false);
options.setCredits(credits);
}
/**
* init options to build the view
* Use default values initialized in initDefaultValues()
* If you want to custom call setters before calling this function
*/
public void initOptions(String title) {
options.setTitle(getTitle(title, titleFontSize));
initOptions();
}
/**
* init options to build the view
* Use default values initialized in initDefaultValues()
* If you want to custom call setters before calling this function
*/
public void initOptions() {
options.setChart(getChart(chartType));
options.setXAxis(getXAxis());
options.setYAxis(getYAxis());
options.setLegend(getLegend());
options.setTooltip(setTooltip());
options.setSeries(getSeries());
/* also try without this*/
options.setPlotOptions(getPlotOptions());
options.additionalOptions = new HashMap<>();
options.additionalOptions.put("colorAxis", getColorAxisOptions());
}
@NotNull
private HIPlotOptions getPlotOptions() {
/*try with and without this */
HIPlotOptions plotOptions = new HIPlotOptions();
plotOptions.setSeries(new HIHeatmap());
plotOptions.getSeries().setDataLabels(getDataLabels());
return plotOptions;
}
@NotNull
private HIChart getChart(String type) {
HIChart chart = new HIChart();
chart.setZoomType("xy");
chart.setType(type);
chart.setPlotBorderWidth(plotBorderWidth);
chart.setEvents(new HIEvents());
return chart;
}
@NotNull
private ArrayList<HIXAxis> getXAxis() {
HIXAxis xaxis = new HIXAxis();
xaxis.setCategories(XLabels);
if (isFullScreen) {
xaxis.setGridLineWidth(1);
xaxis.setGridLineColor(HIColor.initWithHexValue("000000"));
}
return new ArrayList<>(Collections.singletonList(xaxis));
}
@NotNull
private ArrayList<HIYAxis> getYAxis() {
HIYAxis yaxis = new HIYAxis();
yaxis.setCategories(YLabels);
yaxis.setTitle(new HITitle());
yaxis.getTitle().setText(YTitle);
if (isFullScreen) {
yaxis.setGridLineWidth(1);
yaxis.setGridLineColor(HIColor.initWithHexValue("000000"));
}
return new ArrayList<>(Collections.singletonList(yaxis));
}
@NotNull
private HILegend getLegend() {
HILegend legend = new HILegend();
legend.setEnabled(false);
return legend;
}
@NotNull
private HITooltip setTooltip() {
HITooltip tooltip = new HITooltip();
tooltip.setUseHTML(true);
tooltip.setShared(true);
if (insightsID == 230 || insightsID == 231 || insightsID == 237 || insightsID == 239){
tooltip.setFormatter(new HIFunction("function () { return '" + " <b>' + this.point.YName + '</b><br>" + " ' + this.point.XName + ' " +
" <b>' + this.point.valueInPercentage + '</b><br>" + mContext.getString(R.string.target_) + " <b>' " +
"+ this.point.target + '</b><br>" + mContext.getString(R.string.percentage) + " <b>' + this.point.Percentage + '</b>' }"));
}else {
tooltip.setFormatter(new HIFunction("function () { return '" + mContext.getString(R.string.good_units) + " <b>' + this.point.unitsProducedOK + '</b><br>" + mContext.getString(R.string.theoretical_units) +
" <b>' + this.point.unitsProducedTheoretically + '</b><br>" + mContext.getString(R.string.percentage) + " <b>' + this.point.percentage + ' %</b>' }"));
}
return tooltip;
}
@NotNull
private ArrayList<HISeries> getSeries() {
HIHeatmap heatmap = new HIHeatmap();
heatmap.setName(nameSeries);
heatmap.setData(heatmapData);
/*try to add this also before setdata()*/
heatmap.setDataLabels(getDataLabels());
heatmap.setKeys(mKeys);
return new ArrayList<>(Collections.singletonList(heatmap));
}
@NotNull
private ArrayList<HIDataLabels> getDataLabels() {
ArrayList<HIDataLabels> hiDataLabelsArrayList = new ArrayList<HIDataLabels>();
HIDataLabels hiDataLabels = new HIDataLabels();
hiDataLabels.setEnabled(true);
/*also try to add this:
hiDataLabels.setStyle(new HIStyle());
hiDataLabels.getStyle().setColor("000000");*/
hiDataLabels.setColor(HIColor.initWithHexValue("000000"));
hiDataLabelsArrayList.add(hiDataLabels);
return hiDataLabelsArrayList;
}
@NotNull
private HashMap<String, Object> getColorAxisOptions() {
HashMap<String, Object> colorAxisOptions = new HashMap<>();
colorAxisOptions.put("min", 0);
colorAxisOptions.put("minColor", minColor);
colorAxisOptions.put("maxColor", maxColor);
return colorAxisOptions;
}
@NotNull
private HITitle getTitle(String titleTxt, int fontSizePx) {
HITitle title = new HITitle();
title.setText(titleTxt);
title.setStyle(new HICSSObject());
title.getStyle().setFontSize(fontSizePx + "px");
return title;
}
public HIChartView getChartView() {
HIChartView chartView = new HIChartView(mContext);
options.getChart().setBackgroundColor(HIColor.initWithRGBA(255, 255, 255, 0.0));//without backgroud the chart not displayed
chartView.setOptions(options);
chartView.setBackgroundColor(mContext.getResources().getColor(R.color.transparentColor));
return chartView;
}
} `
This is the working code using implementation 'com.highsoft.highcharts:highcharts:6.1.4':
`package com....
import android.content.Context;
import com.highsoft.highcharts.Common.HIChartsClasses.HIChart; import com.highsoft.highcharts.Common.HIChartsClasses.HICredits; import com.highsoft.highcharts.Common.HIChartsClasses.HIDataLabels; import com.highsoft.highcharts.Common.HIChartsClasses.HIEvents; import com.highsoft.highcharts.Common.HIChartsClasses.HIExporting; import com.highsoft.highcharts.Common.HIChartsClasses.HIHeatmap; import com.highsoft.highcharts.Common.HIChartsClasses.HILegend; import com.highsoft.highcharts.Common.HIChartsClasses.HIOptions; import com.highsoft.highcharts.Common.HIChartsClasses.HIPlotOptions; import com.highsoft.highcharts.Common.HIChartsClasses.HISeries; import com.highsoft.highcharts.Common.HIChartsClasses.HIStyle; import com.highsoft.highcharts.Common.HIChartsClasses.HITitle; import com.highsoft.highcharts.Common.HIChartsClasses.HITooltip; import com.highsoft.highcharts.Common.HIChartsClasses.HIXAxis; import com.highsoft.highcharts.Common.HIChartsClasses.HIYAxis; import com.highsoft.highcharts.Common.HIColor; import com.highsoft.highcharts.Core.HIChartView; import com.highsoft.highcharts.Core.HIFunction; import com.leadermes.emerald.R;
import org.jetbrains.annotations.NotNull;
import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; import java.util.HashMap;
public class HeatMapBuilder {
private final boolean isFullScreen;
private Context mContext;
private int insightsID;
private static final String HEAT_MAP = "heatmap";
private ArrayList<String> YLabels;
private ArrayList<String> XLabels;
private String chartType;
HIOptions options = new HIOptions();
private String YTitle;
private int marginTop;
private int marginBottom;
private int plotBorderWidth;
private int titleFontSize;
private String legendAlign;
private String legendLayoutOrientation;
private int legendMargin;
private String legendVerticalAlign;
private int legendY;
private int legendSymbolHeight;
private String minColor;
private String maxColor;
private String nameSeries;
private String dataLabelsColor;
private ArrayList<Object[]> heatmapData;
private ArrayList<String> mKeys;
public HeatMapBuilder(Context context, boolean isFullScreen, int insightsID){
this.mContext = context;
this.isFullScreen = isFullScreen;
this.insightsID = insightsID;
initDefaultValues();
}
private void initDefaultValues() {
chartType = HEAT_MAP;
YTitle = "";
marginTop = 40;
marginBottom = 80;
titleFontSize = 24;
plotBorderWidth = 1;
YLabels = new ArrayList<>();
XLabels = new ArrayList<>();
heatmapData = new ArrayList<>();
legendAlign = "right";
legendLayoutOrientation = "vertical";
legendMargin = 0;
legendVerticalAlign = "top";
legendY = 25;
legendSymbolHeight = 280;
nameSeries = "";
dataLabelsColor = "000000";
minColor = "#FFFFFF";
maxColor = "#7cb5ec";
mKeys = new ArrayList<>();
HITitle title = new HITitle();//remove title
title.setText("");
options.setTitle(title);
HIExporting exporting = new HIExporting();//remove icons
exporting.setEnabled(false);
options.setExporting(exporting);
HICredits credits = new HICredits();//remove highchart.com credit
credits.setEnabled(false);
options.setCredits(credits);
}
/**
* init options to build the view
* Use default values initialized in initDefaultValues()
* If you want to custom call setters before calling this function
*/
public void initOptions(String title) {
options.setTitle(getTitle(title, titleFontSize));
initOptions();
}
/**
* init options to build the view
* Use default values initialized in initDefaultValues()
* If you want to custom call setters before calling this function
*/
public void initOptions() {
options.setChart(getChart(chartType));
options.setXAxis(getXAxis());
options.setYAxis(getYAxis());
options.setLegend(getLegend());
options.setTooltip(setTooltip());
options.setSeries(getSeries());
/* options.setPlotOptions(getPlotOptions());*/
options.additionalOptions = new HashMap<>();
options.additionalOptions.put("colorAxis", getColorAxisOptions());
}
@NotNull
private HIChart getChart(String type) {
HIChart chart = new HIChart();
chart.setZoomType("xy");
chart.setType(type);
chart.setPlotBorderWidth(plotBorderWidth);
chart.setEvents(new HIEvents());
return chart;
}
@NotNull
private ArrayList<HIXAxis> getXAxis() {
HIXAxis xaxis = new HIXAxis();
xaxis.setCategories(XLabels);
if (isFullScreen) {
xaxis.setGridLineWidth(1);
xaxis.setGridLineColor(HIColor.initWithHexValue("000000"));
}
return new ArrayList<>(Collections.singletonList(xaxis));
}
@NotNull
private ArrayList<HIYAxis> getYAxis() {
HIYAxis yaxis = new HIYAxis();
yaxis.setCategories(YLabels);
yaxis.setTitle(new HITitle());
yaxis.getTitle().setText(YTitle);
if (isFullScreen) {
yaxis.setGridLineWidth(1);
yaxis.setGridLineColor(HIColor.initWithHexValue("000000"));
}
return new ArrayList<>(Collections.singletonList(yaxis));
}
@NotNull
private HILegend getLegend() {
HILegend legend = new HILegend();
legend.setEnabled(false);
return legend;
}
@NotNull
private HITooltip setTooltip() {
HITooltip tooltip = new HITooltip();
tooltip.setUseHTML(true);
tooltip.setShared(true);
if (insightsID == 230 || insightsID == 231 || insightsID == 237 || insightsID == 239){
tooltip.setFormatter(new HIFunction("function () { return '" + " <b>' + this.point.YName + '</b><br>" + " ' + this.point.XName + ' " +
" <b>' + this.point.valueInPercentage + '</b><br>" + mContext.getString(R.string.target_) + " <b>' " +
"+ this.point.target + '</b><br>" + mContext.getString(R.string.percentage) + " <b>' + this.point.Percentage + '</b>' }"));
}else {
tooltip.setFormatter(new HIFunction("function () { return '" + mContext.getString(R.string.good_units) + " <b>' + this.point.unitsProducedOK + '</b><br>" + mContext.getString(R.string.theoretical_units) +
" <b>' + this.point.unitsProducedTheoretically + '</b><br>" + mContext.getString(R.string.percentage) + " <b>' + this.point.percentage + ' %</b>' }"));
}
return tooltip;
}
@NotNull
private ArrayList<HISeries> getSeries() {
HIHeatmap heatmap = new HIHeatmap();
heatmap.setName(nameSeries);
heatmap.setDataLabels(new HIDataLabels());
heatmap.getDataLabels().setEnabled(true);
heatmap.getDataLabels().setColor(HIColor.initWithHexValue(dataLabelsColor));
heatmap.setData(heatmapData);
heatmap.setKeys(mKeys);
return new ArrayList<>(Collections.singletonList(heatmap));
}
@NotNull
private HashMap<String, Object> getColorAxisOptions() {
HashMap<String, Object> colorAxisOptions = new HashMap<>();
colorAxisOptions.put("min", 0);
colorAxisOptions.put("minColor", minColor);
colorAxisOptions.put("maxColor", maxColor);
return colorAxisOptions;
}
@NotNull
private HITitle getTitle(String titleTxt, int fontSizePx) {
HITitle title = new HITitle();
title.setText(titleTxt);
title.setStyle(new HIStyle());
title.getStyle().setFontSize(fontSizePx + "px");
return title;
}
public HIChartView getChartView() {
HIChartView chartView = new HIChartView(mContext);
options.getChart().setBackgroundColor(HIColor.initWithRGBA(255, 255, 255, 0.0));//without backgroud the chart not displayed
chartView.setOptions(options);
chartView.setBackgroundColor(mContext.getResources().getColor(R.color.transparentColor));
return chartView;
}
} `
Hi @nathanb2 ! I'm really sorry for late response, I missed the notification... I tested your code and the problem was keys property on heatmap. Passing an empty list was causing that chart data was not showing (when it comes to data I used the same list which was supplied in this example). Keys are not needed in this example since the data for heatmap is required to be array of arrays so it is already structured properly. I commented heatmap.setKeys(mKeys); line in your getSeries() method. That resulted in working code.
@soommy12 Sorry but it's not working for me because we are using a lot of properties in mKeys (below the list), the list is not empty, when i call initOptions() before i already setKeys with list like this: mKeys.add("x"); mKeys.add("y"); mKeys.add("value"); mKeys.add("color"); mKeys.add("YName"); mKeys.add("XName"); mKeys.add("valueInPercentage"); mKeys.add("target"); mKeys.add("Percentage");
This solution works fine with the library version 6.1.4
@nathanb2 I addded the same keys which you posted and chart is being rendered. Please share all data which you are compliting your chart. I cannot guess what you are adding to all that empty array lists and so on. 6.1.4 version is pretty old and we do not support backward compatibility. Some options probably are not supported any more or the way of initializing them is different in current library. Please share all you options to let me find where the issue is.
@soommy12 in IOS it's working fine. in Android: My Builder class:
`package com.example.ChartsHelpers;
import android.content.Context;
import com.highsoft.highcharts.common.hichartsclasses.HICSSObject; import com.highsoft.highcharts.common.hichartsclasses.HIChart; import com.highsoft.highcharts.common.hichartsclasses.HICredits; import com.highsoft.highcharts.common.hichartsclasses.HIDataLabels; import com.highsoft.highcharts.common.hichartsclasses.HIEvents; import com.highsoft.highcharts.common.hichartsclasses.HIExporting; import com.highsoft.highcharts.common.hichartsclasses.HIHeatmap; import com.highsoft.highcharts.common.hichartsclasses.HILegend; import com.highsoft.highcharts.common.hichartsclasses.HIOptions; import com.highsoft.highcharts.common.hichartsclasses.HIPlotOptions; import com.highsoft.highcharts.common.hichartsclasses.HISeries; import com.highsoft.highcharts.common.hichartsclasses.HISolidgauge; import com.highsoft.highcharts.common.hichartsclasses.HIStyle; import com.highsoft.highcharts.common.hichartsclasses.HITitle; import com.highsoft.highcharts.common.hichartsclasses.HITooltip; import com.highsoft.highcharts.common.hichartsclasses.HIXAxis; import com.highsoft.highcharts.common.hichartsclasses.HIYAxis; import com.highsoft.highcharts.common.HIColor; import com.highsoft.highcharts.core.HIChartView; import com.highsoft.highcharts.core.HIFunction; import com.leadermes.emerald.R;
import org.jetbrains.annotations.NotNull;
import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; import java.util.HashMap;
public class HeatMapBuilder {
private final boolean isFullScreen;
private Context mContext;
private int insightsID;
private static final String HEAT_MAP = "heatmap";
private ArrayList<String> YLabels;
private ArrayList<String> XLabels;
private String chartType;
HIOptions options = new HIOptions();
private String YTitle;
private int marginTop;
private int marginBottom;
private int plotBorderWidth;
private int titleFontSize;
private String legendAlign;
private String legendLayoutOrientation;
private int legendMargin;
private String legendVerticalAlign;
private int legendY;
private int legendSymbolHeight;
private String minColor;
private String maxColor;
private String nameSeries;
private String dataLabelsColor;
private ArrayList<Object[]> heatmapData;
private ArrayList<String> mKeys;
public HeatMapBuilder(Context context, boolean isFullScreen, int insightsID){
this.mContext = context;
this.isFullScreen = isFullScreen;
this.insightsID = insightsID;
initDefaultValues();
}
private void initDefaultValues() {
chartType = HEAT_MAP;
YTitle = "";
marginTop = 40;
marginBottom = 80;
titleFontSize = 24;
plotBorderWidth = 1;
YLabels = new ArrayList<>();
XLabels = new ArrayList<>();
heatmapData = new ArrayList<>();
legendAlign = "right";
legendLayoutOrientation = "vertical";
legendMargin = 0;
legendVerticalAlign = "top";
legendY = 25;
legendSymbolHeight = 280;
nameSeries = "";
dataLabelsColor = "000000";
minColor = "#FFFFFF";
maxColor = "#7cb5ec";
mKeys = new ArrayList<>();
HITitle title = new HITitle();//remove title
title.setText("");
options.setTitle(title);
HIExporting exporting = new HIExporting();//remove icons
exporting.setEnabled(false);
options.setExporting(exporting);
HICredits credits = new HICredits();//remove highchart.com credit
credits.setEnabled(false);
options.setCredits(credits);
}
/**
* init options to build the view
* Use default values initialized in initDefaultValues()
* If you want to custom call setters before calling this function
*/
public void initOptions(String title) {
options.setTitle(getTitle(title, titleFontSize));
initOptions();
}
/**
* init options to build the view
* Use default values initialized in initDefaultValues()
* If you want to custom call setters before calling this function
*/
public void initOptions() {
options.setChart(getChart(chartType));
options.setXAxis(getXAxis());
options.setYAxis(getYAxis());
options.setLegend(getLegend());
options.setTooltip(setTooltip());
options.setSeries(getSeries());
options.setPlotOptions(getPlotOptions());
options.additionalOptions = new HashMap<>();
options.additionalOptions.put("colorAxis", getColorAxisOptions());
}
@NotNull
private HIPlotOptions getPlotOptions() {
//try with and without this
HIPlotOptions plotOptions = new HIPlotOptions();
plotOptions.setSeries(new HIHeatmap());
plotOptions.getSeries().setDataLabels(getDataLabels());
return plotOptions;
}
@NotNull
private HIChart getChart(String type) {
HIChart chart = new HIChart();
chart.setZoomType("xy");
chart.setType(type);
chart.setPlotBorderWidth(plotBorderWidth);
chart.setEvents(new HIEvents());
return chart;
}
@NotNull
private ArrayList<HIXAxis> getXAxis() {
HIXAxis xaxis = new HIXAxis();
xaxis.setCategories(XLabels);
if (isFullScreen) {
xaxis.setGridLineWidth(1);
xaxis.setGridLineColor(HIColor.initWithHexValue("000000"));
}
return new ArrayList<>(Collections.singletonList(xaxis));
}
@NotNull
private ArrayList<HIYAxis> getYAxis() {
HIYAxis yaxis = new HIYAxis();
yaxis.setCategories(YLabels);
yaxis.setTitle(new HITitle());
yaxis.getTitle().setText(YTitle);
if (isFullScreen) {
yaxis.setGridLineWidth(1);
yaxis.setGridLineColor(HIColor.initWithHexValue("000000"));
}
return new ArrayList<>(Collections.singletonList(yaxis));
}
@NotNull
private HILegend getLegend() {
HILegend legend = new HILegend();
legend.setEnabled(false);
return legend;
}
@NotNull
private HITooltip setTooltip() {
HITooltip tooltip = new HITooltip();
tooltip.setUseHTML(true);
tooltip.setShared(true);
if (insightsID == 230 || insightsID == 231 || insightsID == 237 || insightsID == 239){
tooltip.setFormatter(new HIFunction("function () { return '" + " <b>' + this.point.YName + '</b><br>" + " ' + this.point.XName + ' " +
" <b>' + this.point.valueInPercentage + '</b><br>" + mContext.getString(R.string.target_) + " <b>' " +
"+ this.point.target + '</b><br>" + mContext.getString(R.string.percentage) + " <b>' + this.point.Percentage + '</b>' }"));
}else {
tooltip.setFormatter(new HIFunction("function () { return '" + mContext.getString(R.string.good_units) + " <b>' + this.point.unitsProducedOK + '</b><br>" + mContext.getString(R.string.theoretical_units) +
" <b>' + this.point.unitsProducedTheoretically + '</b><br>" + mContext.getString(R.string.percentage) + " <b>' + this.point.percentage + ' %</b>' }"));
}
return tooltip;
}
@NotNull
private ArrayList<HISeries> getSeries() {
HIHeatmap heatmap = new HIHeatmap();
heatmap.setName(nameSeries);
heatmap.setData(heatmapData);
//try to add this also before setdata()
heatmap.setDataLabels(getDataLabels());
heatmap.setKeys(mKeys);
return new ArrayList<>(Collections.singletonList(heatmap));
}
@NotNull
private ArrayList<HIDataLabels> getDataLabels() {
ArrayList<HIDataLabels> hiDataLabelsArrayList = new ArrayList<HIDataLabels>();
HIDataLabels hiDataLabels = new HIDataLabels();
hiDataLabels.setEnabled(true);
//also try to add this:
// hiDataLabels.setStyle(new HIStyle()); // hiDataLabels.getStyle().setColor("000000"); hiDataLabels.setColor(HIColor.initWithHexValue("000000")); hiDataLabelsArrayList.add(hiDataLabels); return hiDataLabelsArrayList; }
@NotNull
private HashMap<String, Object> getColorAxisOptions() {
HashMap<String, Object> colorAxisOptions = new HashMap<>();
colorAxisOptions.put("min", 0);
colorAxisOptions.put("minColor", minColor);
colorAxisOptions.put("maxColor", maxColor);
return colorAxisOptions;
}
@NotNull
private HITitle getTitle(String titleTxt, int fontSizePx) {
HITitle title = new HITitle();
title.setText(titleTxt);
title.setStyle(new HICSSObject());
title.getStyle().setFontSize(fontSizePx + "px");
return title;
}
public HIChartView getChartView() {
HIChartView chartView = new HIChartView(mContext);
options.getChart().setBackgroundColor(HIColor.initWithRGBA(255, 255, 255, 0.0));//without backgroud the chart not displayed
chartView.setOptions(options);
chartView.setBackgroundColor(mContext.getResources().getColor(R.color.transparentColor));
return chartView;
}
public ArrayList<String> getYLabels() {
return YLabels;
}
public void setYLabels(ArrayList<String> YLabels) {
this.YLabels = YLabels;
}
public ArrayList<String> getXLabels() {
return XLabels;
}
public void setXLabels(ArrayList<String> XLabels) {
this.XLabels = XLabels;
}
public String getChartType() {
return chartType;
}
public void setChartType(String chartType) {
this.chartType = chartType;
}
public HIOptions getOptions() {
return options;
}
public void setOptions(HIOptions options) {
this.options = options;
}
public String getYTitle() {
return YTitle;
}
public void setYTitle(String YTitle) {
this.YTitle = YTitle;
}
public int getMarginTop() {
return marginTop;
}
public void setMarginTop(int marginTop) {
this.marginTop = marginTop;
}
public int getMarginBottom() {
return marginBottom;
}
public void setMarginBottom(int marginBottom) {
this.marginBottom = marginBottom;
}
public int getPlotBorderWidth() {
return plotBorderWidth;
}
public void setPlotBorderWidth(int plotBorderWidth) {
this.plotBorderWidth = plotBorderWidth;
}
public int getTitleFontSize() {
return titleFontSize;
}
public void setTitleFontSize(int titleFontSize) {
this.titleFontSize = titleFontSize;
}
public String getLegendAlign() {
return legendAlign;
}
public void setLegendAlign(String legendAlign) {
this.legendAlign = legendAlign;
}
public String getLegendLayoutOrientation() {
return legendLayoutOrientation;
}
public void setLegendLayoutOrientation(String legendLayoutOrientation) {
this.legendLayoutOrientation = legendLayoutOrientation;
}
public int getLegendMargin() {
return legendMargin;
}
public void setLegendMargin(int legendMargin) {
this.legendMargin = legendMargin;
}
public String getLegendVerticalAlign() {
return legendVerticalAlign;
}
public void setLegendVerticalAlign(String legendVerticalAlign) {
this.legendVerticalAlign = legendVerticalAlign;
}
public int getLegendY() {
return legendY;
}
public void setLegendY(int legendY) {
this.legendY = legendY;
}
public int getLegendSymbolHeight() {
return legendSymbolHeight;
}
public void setLegendSymbolHeight(int legendSymbolHeight) {
this.legendSymbolHeight = legendSymbolHeight;
}
public String getMinColor() {
return minColor;
}
public void setMinColor(String minColor) {
this.minColor = minColor;
}
public String getMaxColor() {
return maxColor;
}
public void setMaxColor(String maxColor) {
this.maxColor = maxColor;
}
public String getNameSeries() {
return nameSeries;
}
public void setNameSeries(String nameSeries) {
this.nameSeries = nameSeries;
}
public String getDataLabelsColor() {
return dataLabelsColor;
}
public void setDataLabelsColor(String dataLabelsColor) {
this.dataLabelsColor = dataLabelsColor;
}
public ArrayList<Object[]> getHeatmapData() {
return heatmapData;
}
public void setHeatmapData( ArrayList<Object[]> heatmapData) {
this.heatmapData = heatmapData;
}
public ArrayList<String> getKeys() {
return mKeys;
}
public void setKeys(ArrayList<String> mKeys) {
this.mKeys = mKeys;
}
} ` How i call the builder and add the view
HeatMapBuilder h = new HeatMapBuilder(getContext(), false, mInsightItem.getID()); h.setXLabels(heatMatricesData.getXLabels()); h.setYLabels(heatMatricesData.getYLabels()); h.setHeatmapData(heatMatricesData.getHeatMapData()); h.setKeys(getKeys(mInsightItem.getID())); h.initOptions(); mChartContainer.addView(h.getChartView());
The keys public static ArrayList<String> getKeys(int id) { ArrayList<String> mKeys = new ArrayList<>(); mKeys.add("x"); mKeys.add("y"); mKeys.add("value"); mKeys.add("color"); mKeys.add("YName"); mKeys.add("XName"); mKeys.add("valueInPercentage"); mKeys.add("target"); mKeys.add("Percentage"); return mKeys; }
JSON {"XLabels":["Availability PE ","Availability OEE ","Cycle Time Efficiency ","Quality index ","PE ","OEE "],"YLabels":["total","Tue-1","Tue-2","Tue-3","Wed-1","Wed-2","Wed-3","Thu-1","Thu-2","Thu-3","Fri-1","Fri-2","Fri-3","Sat-1","Sat-2","Sat-3","Sun-1","Sun-2","Sun-3","Mon-1","Mon-2","Mon-3"],"heatMapData":[[0,0,"93.91%","rgba(26,183,6,0.9","total","Availability PE ","93.91%","59.93%","157%"],[1,0,"85.41%","rgba(26,183,6,0.9","total","Availability OEE ","85.41%","74.93%","114%"],[2,0,"81.78%","rgba(26,183,6,0.6","total","Cycle Time Efficiency ","81.78%","89.01%","92%"],[3,0,"87.17%","rgba(26,183,6,0.35","total","Quality index ","87.17%","100%","87%"],[4,0,"59.62%","rgba(26,183,6,0.9","total","PE ","59.62%","53.34%","112%"],[5,0,"54.22%","rgba(26,183,6,0.1","total","OEE ","54.22%","66.69%","81%"],[0,1,"85.94%","rgba(26,183,6,0.9","Tue-1","Availability PE ","85.94%","59.93%","143%"],[1,1,"80.38%","rgba(26,183,6,0.9","Tue-1","Availability OEE ","80.38%","74.93%","107%"],[2,1,"86.89%","rgba(26,183,6,0.85","Tue-1","Cycle Time Efficiency ","86.89%","89.31%","97%"],[3,1,"91.51%","rgba(26,183,6,0.6","Tue-1","Quality index ","91.51%","100%","92%"],[4,1,"61.55%","rgba(26,183,6,0.9","Tue-1","PE ","61.55%","53.53%","115%"],[5,1,"57.57%","rgba(26,183,6,0.3","Tue-1","OEE ","57.57%","66.92%","86%"],[0,2,"83.73%","rgba(26,183,6,0.9","Tue-2","Availability PE ","83.73%","59.93%","140%"],[1,2,"80%","rgba(26,183,6,0.9","Tue-2","Availability OEE ","80%","74.93%","107%"],[2,2,"95.03%","rgba(26,183,6,0.9","Tue-2","Cycle Time Efficiency ","95.03%","89.53%","106%"],[3,2,"62.62%","rgba(164,35,35,0.16000003","Tue-2","Quality index ","62.62%","100%","63%"],[4,2,"44.61%","rgba(26,183,6,0.15","Tue-2","PE ","44.61%","53.66%","83%"],[5,2,"42.62%","rgba(164,35,35,0.14666665","Tue-2","OEE ","42.62%","67.09%","64%"],[0,3,"87.24%","rgba(26,183,6,0.9","Tue-3","Availability PE ","87.24%","59.93%","146%"],[1,3,"83.38%","rgba(26,183,6,0.9","Tue-3","Availability OEE ","83.38%","74.93%","111%"],[2,3,"94.03%","rgba(26,183,6,0.9","Tue-3","Cycle Time Efficiency ","94.03%","89.54%","105%"],[3,3,"63.17%","rgba(164,35,35,0.16000003","Tue-3","Quality index ","63.17%","100%","63%"],[4,3,"46.4%","rgba(26,183,6,0.3","Tue-3","PE ","46.4%","53.66%","86%"],[5,3,"44.35%","rgba(164,35,35,0.120000005","Tue-3","OEE ","44.35%","67.09%","66%"],[0,4,"89.71%","rgba(26,183,6,0.9","Wed-1","Availability PE ","89.71%","59.93%","150%"],[1,4,"82.64%","rgba(26,183,6,0.9","Wed-1","Availability OEE ","82.64%","74.93%","110%"],[2,4,"85.43%","rgba(26,183,6,0.8","Wed-1","Cycle Time Efficiency ","85.43%","89.14%","96%"],[3,4,"80.17%","rgba(230,145,25,0.9","Wed-1","Quality index ","80.17%","100%","80%"],[4,4,"54.77%","rgba(26,183,6,0.9","Wed-1","PE ","54.77%","53.43%","103%"],[5,4,"50.45%","rgba(230,145,25,0.9","Wed-1","OEE ","50.45%","66.8%","76%"],[0,5,"95.74%","rgba(26,183,6,0.9","Wed-2","Availability PE ","95.74%","59.93%","160%"],[1,5,"88.01%","rgba(26,183,6,0.9","Wed-2","Availability OEE ","88.01%","74.93%","117%"],[2,5,"80.75%","rgba(26,183,6,0.55","Wed-2","Cycle Time Efficiency ","80.75%","89.12%","91%"],[3,5,"89.7%","rgba(26,183,6,0.5","Wed-2","Quality index ","89.7%","100%","90%"],[4,5,"61.8%","rgba(26,183,6,0.9","Wed-2","PE ","61.8%","53.41%","116%"],[5,5,"56.81%","rgba(26,183,6,0.25","Wed-2","OEE ","56.81%","66.78%","85%"],[0,6,"95.33%","rgba(26,183,6,0.9","Wed-3","Availability PE ","95.33%","59.93%","159%"],[1,6,"84.43%","rgba(26,183,6,0.9","Wed-3","Availability OEE ","84.43%","74.93%","113%"],[2,6,"80.9%","rgba(26,183,6,0.55","Wed-3","Cycle Time Efficiency ","80.9%","88.71%","91%"],[3,6,"89.01%","rgba(26,183,6,0.45","Wed-3","Quality index ","89.01%","100%","89%"],[4,6,"60.89%","rgba(26,183,6,0.9","Wed-3","PE ","60.89%","53.17%","115%"],[5,6,"53.93%","rgba(26,183,6,0.1","Wed-3","OEE ","53.93%","66.47%","81%"],[0,7,"95.29%","rgba(26,183,6,0.9","Thu-1","Availability PE ","95.29%","59.93%","159%"],[1,7,"86.77%","rgba(26,183,6,0.9","Thu-1","Availability OEE ","86.77%","74.93%","116%"],[2,7,"80.65%","rgba(26,183,6,0.55","Thu-1","Cycle Time Efficiency ","80.65%","89.02%","91%"],[3,7,"87.39%","rgba(26,183,6,0.35","Thu-1","Quality index ","87.39%","100%","87%"],[4,7,"59.79%","rgba(26,183,6,0.9","Thu-1","PE ","59.79%","53.35%","112%"],[5,7,"54.45%","rgba(26,183,6,0.1","Thu-1","OEE ","54.45%","66.7%","82%"],[0,8,"94.91%","rgba(26,183,6,0.9","Thu-2","Availability PE ","94.91%","59.93%","158%"],[1,8,"85.3%","rgba(26,183,6,0.9","Thu-2","Availability OEE ","85.3%","74.93%","114%"],[2,8,"80.66%","rgba(26,183,6,0.55","Thu-2","Cycle Time Efficiency ","80.66%","88.87%","91%"],[3,8,"89.64%","rgba(26,183,6,0.5","Thu-2","Quality index ","89.64%","100%","90%"],[4,8,"60.98%","rgba(26,183,6,0.9","Thu-2","PE ","60.98%","53.27%","114%"],[5,8,"54.81%","rgba(26,183,6,0.1","Thu-2","OEE ","54.81%","66.6%","82%"],[0,9,"96.12%","rgba(26,183,6,0.9","Thu-3","Availability PE ","96.12%","59.93%","160%"],[1,9,"86.93%","rgba(26,183,6,0.9","Thu-3","Availability OEE ","86.93%","74.93%","116%"],[2,9,"80.18%","rgba(26,183,6,0.5","Thu-3","Cycle Time Efficiency ","80.18%","88.94%","90%"],[3,9,"89.42%","rgba(26,183,6,0.45","Thu-3","Quality index ","89.42%","100%","89%"],[4,9,"61.3%","rgba(26,183,6,0.9","Thu-3","PE ","61.3%","53.31%","115%"],[5,9,"55.44%","rgba(26,183,6,0.15","Thu-3","OEE ","55.44%","66.65%","83%"],[0,10,"98.49%","rgba(26,183,6,0.9","Fri-1","Availability PE ","98.49%","59.93%","164%"],[1,10,"89.41%","rgba(26,183,6,0.9","Fri-1","Availability OEE ","89.41%","74.93%","119%"],[2,10,"77.67%","rgba(26,183,6,0.35","Fri-1","Cycle Time Efficiency ","77.67%","88.98%","87%"],[3,10,"89.38%","rgba(26,183,6,0.45","Fri-1","Quality index ","89.38%","100%","89%"],[4,10,"60.85%","rgba(26,183,6,0.9","Fri-1","PE ","60.85%","53.33%","114%"],[5,10,"55.24%","rgba(26,183,6,0.15","Fri-1","OEE ","55.24%","66.68%","83%"],[0,11,"98.34%","rgba(26,183,6,0.9","Fri-2","Availability PE ","98.34%","59.93%","164%"],[1,11,"85.48%","rgba(26,183,6,0.9","Fri-2","Availability OEE ","85.48%","74.93%","114%"],[2,11,"79.27%","rgba(26,183,6,0.5","Fri-2","Cycle Time Efficiency ","79.27%","88.5%","90%"],[3,11,"89%","rgba(26,183,6,0.45","Fri-2","Quality index ","89%","100%","89%"],[4,11,"61.4%","rgba(26,183,6,0.9","Fri-2","PE ","61.4%","53.04%","116%"],[5,11,"53.38%","rgba(230,145,25,0.9","Fri-2","OEE ","53.38%","66.31%","80%"],[0,12,"95.77%","rgba(26,183,6,0.9","Fri-3","Availability PE ","95.77%","59.93%","160%"],[1,12,"85.93%","rgba(26,183,6,0.9","Fri-3","Availability OEE ","85.93%","74.93%","115%"],[2,12,"80.04%","rgba(26,183,6,0.5","Fri-3","Cycle Time Efficiency ","80.04%","88.86%","90%"],[3,12,"89.34%","rgba(26,183,6,0.45","Fri-3","Quality index ","89.34%","100%","89%"],[4,12,"60.85%","rgba(26,183,6,0.9","Fri-3","PE ","60.85%","53.25%","114%"],[5,12,"54.6%","rgba(26,183,6,0.1","Fri-3","OEE ","54.6%","66.58%","82%"],[0,13,"95.44%","rgba(26,183,6,0.9","Sat-1","Availability PE ","95.44%","59.93%","159%"],[1,13,"85.91%","rgba(26,183,6,0.9","Sat-1","Availability OEE ","85.91%","74.93%","115%"],[2,13,"79.73%","rgba(26,183,6,0.5","Sat-1","Cycle Time Efficiency ","79.73%","88.89%","90%"],[3,13,"89.39%","rgba(26,183,6,0.45","Sat-1","Quality index ","89.39%","100%","89%"],[4,13,"60.47%","rgba(26,183,6,0.9","Sat-1","PE ","60.47%","53.28%","113%"],[5,13,"54.43%","rgba(26,183,6,0.1","Sat-1","OEE ","54.43%","66.61%","82%"],[0,14,"95.35%","rgba(26,183,6,0.9","Sat-2","Availability PE ","95.35%","59.93%","159%"],[1,14,"87.44%","rgba(26,183,6,0.9","Sat-2","Availability OEE ","87.44%","74.93%","117%"],[2,14,"81.26%","rgba(26,183,6,0.55","Sat-2","Cycle Time Efficiency ","81.26%","89.1%","91%"],[3,14,"89.8%","rgba(26,183,6,0.5","Sat-2","Quality index ","89.8%","100%","90%"],[4,14,"61.98%","rgba(26,183,6,0.9","Sat-2","PE ","61.98%","53.4%","116%"],[5,14,"56.84%","rgba(26,183,6,0.25","Sat-2","OEE ","56.84%","66.76%","85%"],[0,15,"94.85%","rgba(26,183,6,0.9","Sat-3","Availability PE ","94.85%","59.93%","158%"],[1,15,"84.68%","rgba(26,183,6,0.9","Sat-3","Availability OEE ","84.68%","74.93%","113%"],[2,15,"80.07%","rgba(26,183,6,0.5","Sat-3","Cycle Time Efficiency ","80.07%","88.8%","90%"],[3,15,"89.49%","rgba(26,183,6,0.45","Sat-3","Quality index ","89.49%","100%","89%"],[4,15,"60.35%","rgba(26,183,6,0.9","Sat-3","PE ","60.35%","53.22%","113%"],[5,15,"53.88%","rgba(26,183,6,0.1","Sat-3","OEE ","53.88%","66.54%","81%"],[0,16,"95.86%","rgba(26,183,6,0.9","Sun-1","Availability PE ","95.86%","59.93%","160%"],[1,16,"86.84%","rgba(26,183,6,0.9","Sun-1","Availability OEE ","86.84%","74.93%","116%"],[2,16,"80.38%","rgba(26,183,6,0.5","Sun-1","Cycle Time Efficiency ","80.38%","88.96%","90%"],[3,16,"89.52%","rgba(26,183,6,0.5","Sun-1","Quality index ","89.52%","100%","90%"],[4,16,"61.36%","rgba(26,183,6,0.9","Sun-1","PE ","61.36%","53.32%","115%"],[5,16,"55.59%","rgba(26,183,6,0.15","Sun-1","OEE ","55.59%","66.66%","83%"],[0,17,"94.47%","rgba(26,183,6,0.9","Sun-2","Availability PE ","94.47%","59.93%","158%"],[1,17,"84.2%","rgba(26,183,6,0.9","Sun-2","Availability OEE ","84.2%","74.93%","112%"],[2,17,"80.64%","rgba(26,183,6,0.55","Sun-2","Cycle Time Efficiency ","80.64%","88.78%","91%"],[3,17,"89.16%","rgba(26,183,6,0.45","Sun-2","Quality index ","89.16%","100%","89%"],[4,17,"60.3%","rgba(26,183,6,0.9","Sun-2","PE ","60.3%","53.21%","113%"],[5,17,"53.75%","rgba(26,183,6,0.1","Sun-2","OEE ","53.75%","66.53%","81%"],[0,18,"95.46%","rgba(26,183,6,0.9","Sun-3","Availability PE ","95.46%","59.93%","159%"],[1,18,"87.03%","rgba(26,183,6,0.9","Sun-3","Availability OEE ","87.03%","74.93%","116%"],[2,18,"81.61%","rgba(26,183,6,0.6","Sun-3","Cycle Time Efficiency ","81.61%","89.03%","92%"],[3,18,"89.81%","rgba(26,183,6,0.5","Sun-3","Quality index ","89.81%","100%","90%"],[4,18,"62.29%","rgba(26,183,6,0.9","Sun-3","PE ","62.29%","53.36%","117%"],[5,18,"56.79%","rgba(26,183,6,0.25","Sun-3","OEE ","56.79%","66.71%","85%"],[0,19,"95.11%","rgba(26,183,6,0.9","Mon-1","Availability PE ","95.11%","59.93%","159%"],[1,19,"86.48%","rgba(26,183,6,0.9","Mon-1","Availability OEE ","86.48%","74.93%","115%"],[2,19,"78.83%","rgba(26,183,6,0.45","Mon-1","Cycle Time Efficiency ","78.83%","89%","89%"],[3,19,"93.86%","rgba(26,183,6,0.7","Mon-1","Quality index ","93.86%","100%","94%"],[4,19,"62.63%","rgba(26,183,6,0.9","Mon-1","PE ","62.63%","53.34%","117%"],[5,19,"56.95%","rgba(26,183,6,0.25","Mon-1","OEE ","56.95%","66.69%","85%"],[0,20,"95.31%","rgba(26,183,6,0.9","Mon-2","Availability PE ","95.31%","59.93%","159%"],[1,20,"87.09%","rgba(26,183,6,0.9","Mon-2","Availability OEE ","87.09%","74.93%","116%"],[2,20,"75.68%","rgba(26,183,6,0.25","Mon-2","Cycle Time Efficiency ","75.68%","89.06%","85%"],[3,20,"100%","rgba(26,183,6,0.9","Mon-2","Quality index ","100%","100%","100%"],[4,20,"64.24%","rgba(26,183,6,0.9","Mon-2","PE ","64.24%","53.37%","120%"],[5,20,"58.7%","rgba(26,183,6,0.4","Mon-2","OEE ","58.7%","66.73%","88%"],[0,21,"95.53%","rgba(26,183,6,0.9","Mon-3","Availability PE ","95.53%","59.93%","159%"],[1,21,"85.01%","rgba(26,183,6,0.9","Mon-3","Availability OEE ","85.01%","74.93%","113%"],[2,21,"77.18%","rgba(26,183,6,0.35","Mon-3","Cycle Time Efficiency ","77.18%","88.76%","87%"],[3,21,"100%","rgba(26,183,6,0.9","Mon-3","Quality index ","100%","100%","100%"],[4,21,"65.45%","rgba(26,183,6,0.9","Mon-3","PE ","65.45%","53.2%","123%"],[5,21,"58.24%","rgba(26,183,6,0.4","Mon-3","OEE ","58.24%","66.51%","88%"]],"mHeatMatricesTarget":[{"AvailabilityOEE":0.85409266,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.939064,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.8178031,"CycleTimeEfficiencyTarget":0.89005125,"OEE":0.54222083,"OEETarget":0.6669451,"PE":0.5961649,"PETarget":0.5334374,"QualityIndex":0.8717019,"QualityIndexTarget":1.0,"arg":"total","argID":"total","noneData":false},{"AvailabilityOEE":0.8038217,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.8593803,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.86891127,"CycleTimeEfficiencyTarget":0.89308816,"OEE":0.5757391,"OEETarget":0.66922075,"PE":0.6155331,"PETarget":0.5352575,"QualityIndex":0.9151384,"QualityIndexTarget":1.0,"arg":"Tue-1","argID":"2856","noneData":false},{"AvailabilityOEE":0.8,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.8373266,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.95034206,"CycleTimeEfficiencyTarget":0.8953342,"OEE":0.42624247,"OEETarget":0.67090374,"PE":0.4461302,"PETarget":0.5366036,"QualityIndex":0.6261835,"QualityIndexTarget":1.0,"arg":"Tue-2","argID":"2857","noneData":false},{"AvailabilityOEE":0.83382046,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.87243336,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.9403438,"CycleTimeEfficiencyTarget":0.8953692,"OEE":0.44346693,"OEETarget":0.67092997,"PE":0.4640032,"PETarget":0.5366246,"QualityIndex":0.63168406,"QualityIndexTarget":1.0,"arg":"Tue-3","argID":"2858","noneData":false},{"AvailabilityOEE":0.8263911,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.89713496,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.85429436,"CycleTimeEfficiencyTarget":0.89143944,"OEE":0.5045382,"OEETarget":0.66798526,"PE":0.54772955,"PETarget":0.53426933,"QualityIndex":0.80169475,"QualityIndexTarget":1.0,"arg":"Wed-1","argID":"2859","noneData":false},{"AvailabilityOEE":0.88012046,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.957405,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.8074612,"CycleTimeEfficiencyTarget":0.8912189,"OEE":0.5680981,"OEETarget":0.66782,"PE":0.6179835,"PETarget":0.5341372,"QualityIndex":0.8969643,"QualityIndexTarget":1.0,"arg":"Wed-2","argID":"2860","noneData":false},{"AvailabilityOEE":0.84425884,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.9533239,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.8089637,"CycleTimeEfficiencyTarget":0.88708156,"OEE":0.5392639,"OEETarget":0.66471976,"PE":0.6089283,"PETarget":0.5316576,"QualityIndex":0.8900883,"QualityIndexTarget":1.0,"arg":"Wed-3","argID":"2861","noneData":false},{"AvailabilityOEE":0.86772656,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.95286316,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.80651724,"CycleTimeEfficiencyTarget":0.8901886,"OEE":0.5444576,"OEETarget":0.667048,"PE":0.5978768,"PETarget":0.5335197,"QualityIndex":0.87394786,"QualityIndexTarget":1.0,"arg":"Thu-1","argID":"2862","noneData":false},{"AvailabilityOEE":0.853012,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.9490617,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.80655587,"CycleTimeEfficiencyTarget":0.88873994,"OEE":0.54811347,"OEETarget":0.66596246,"PE":0.60983133,"PETarget":0.5326515,"QualityIndex":0.89640886,"QualityIndexTarget":1.0,"arg":"Thu-2","argID":"2863","noneData":false},{"AvailabilityOEE":0.8693111,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.96121883,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.80182457,"CycleTimeEfficiencyTarget":0.88942754,"OEE":0.55437887,"OEETarget":0.6664777,"PE":0.61299044,"PETarget":0.53306353,"QualityIndex":0.8942141,"QualityIndexTarget":1.0,"arg":"Thu-3","argID":"2864","noneData":false},{"AvailabilityOEE":0.89411765,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.9849387,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.7767305,"CycleTimeEfficiencyTarget":0.8898424,"OEE":0.5523795,"OEETarget":0.6667886,"PE":0.60848814,"PETarget":0.5333122,"QualityIndex":0.8938393,"QualityIndexTarget":1.0,"arg":"Fri-1","argID":"2865","noneData":false},{"AvailabilityOEE":0.8548193,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.983368,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.79274017,"CycleTimeEfficiencyTarget":0.8849619,"OEE":0.5337576,"OEETarget":0.6631314,"PE":0.6140247,"PETarget":0.53038716,"QualityIndex":0.8900499,"QualityIndexTarget":1.0,"arg":"Fri-2","argID":"2866","noneData":false},{"AvailabilityOEE":0.8592902,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.9576547,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.8004493,"CycleTimeEfficiencyTarget":0.88855284,"OEE":0.54602295,"OEETarget":0.66582227,"PE":0.6085272,"PETarget":0.5325393,"QualityIndex":0.8934164,"QualityIndexTarget":1.0,"arg":"Fri-3","argID":"2867","noneData":false},{"AvailabilityOEE":0.85914147,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.9544331,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.797328,"CycleTimeEfficiencyTarget":0.8889085,"OEE":0.5442908,"OEETarget":0.66608876,"PE":0.60466075,"PETarget":0.5327525,"QualityIndex":0.89386564,"QualityIndexTarget":1.0,"arg":"Sat-1","argID":"2868","noneData":false},{"AvailabilityOEE":0.87439024,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.9534575,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.8125795,"CycleTimeEfficiencyTarget":0.8909575,"OEE":0.56844306,"OEETarget":0.6676241,"PE":0.6198448,"PETarget":0.5339805,"QualityIndex":0.8979638,"QualityIndexTarget":1.0,"arg":"Sat-2","argID":"2869","noneData":false},{"AvailabilityOEE":0.8467909,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.9485158,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.80071443,"CycleTimeEfficiencyTarget":0.887987,"OEE":0.5388075,"OEETarget":0.66539824,"PE":0.6035344,"PETarget":0.5322002,"QualityIndex":0.8948973,"QualityIndexTarget":1.0,"arg":"Sat-3","argID":"2870","noneData":false},{"AvailabilityOEE":0.8683625,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.958582,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.8037765,"CycleTimeEfficiencyTarget":0.8896104,"OEE":0.5558571,"OEETarget":0.6666147,"PE":0.6136085,"PETarget":0.53317314,"QualityIndex":0.8952142,"QualityIndexTarget":1.0,"arg":"Sun-1","argID":"2871","noneData":false},{"AvailabilityOEE":0.842042,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.94474393,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.8063968,"CycleTimeEfficiencyTarget":0.88780326,"OEE":0.5374908,"OEETarget":0.66526055,"PE":0.60304725,"PETarget":0.53209007,"QualityIndex":0.8916034,"QualityIndexTarget":1.0,"arg":"Sun-2","argID":"2872","noneData":false},{"AvailabilityOEE":0.8702929,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.9545663,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.81610197,"CycleTimeEfficiencyTarget":0.89031667,"OEE":0.5679326,"OEETarget":0.66714394,"PE":0.6229274,"PETarget":0.53359646,"QualityIndex":0.8981367,"QualityIndexTarget":1.0,"arg":"Sun-3","argID":"2873","noneData":false},{"AvailabilityOEE":0.8647619,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.95111734,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.7883321,"CycleTimeEfficiencyTarget":0.890014,"OEE":0.5694604,"OEETarget":0.66691715,"PE":0.6263269,"PETarget":0.533415,"QualityIndex":0.9385576,"QualityIndexTarget":1.0,"arg":"Mon-1","argID":"2874","noneData":false},{"AvailabilityOEE":0.870948,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.9531459,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.75683457,"CycleTimeEfficiencyTarget":0.89056224,"OEE":0.5870262,"OEETarget":0.667328,"PE":0.6424283,"PETarget":0.5337436,"QualityIndex":1.0,"QualityIndexTarget":1.0,"arg":"Mon-2","argID":"2875","noneData":false},{"AvailabilityOEE":0.8501035,"AvailabilityOEETarget":0.7493333,"AvailabilityPE":0.95532805,"AvailabilityPETarget":0.59933335,"CycleTimeEfficiency":0.7718249,"CycleTimeEfficiencyTarget":0.8876222,"OEE":0.58239645,"OEETarget":0.66512483,"PE":0.6544846,"PETarget":0.5319815,"QualityIndex":1.0,"QualityIndexTarget":1.0,"arg":"Mon-3","argID":"2876","noneData":false}]}
@nathanb2 Thanks for the code. Gonna investigate those options and will back to you with information soon
After analyzing your options code I didn't find any problems in it. Can you pease also share how do you parse your JSON to your heatmapData list?
@soommy12 this is an example of how i. build an item of the list:
heatmapData.add(new Object[]{indexMachine/* int */, indexDate/* int */, formatNumber(unitsProducedOK * 100) + "%"/* String */, findColor(findPercentage(unitsProducedOK, unitsProducedTheoretically))/* String */, item.getArg()/* String */, item.getArg2()/* String */, formatNumber(unitsProducedOK * 100) + "%"/* String */, formatNumber(unitsProducedTheoretically * 100) + "%"/* String */, findPercentage(unitsProducedOK, unitsProducedTheoretically) + "%"/* int */, });
@nathanb2 I don't see a problem in any parts of the code you shared. Did you try the very basic example of the heatmap? Can you maybe share the output list? (I mean, the actual result of your computation)
@soommy12 the basic code works with the old datalabel versions (object not list). This is not supported by the new version of the library if I'm remembering correctly. I try all the options and nothing works! please let us meet to review the bug live. I can't clone my project on new PC because the library needs to import the code and the old version download access of the library does not work so I must upgrade and then the datalabel bug occurred.
@nathanb2 I will ask you for a proof of concept app example which will consists of single activity with only one view (HIChartView) and your options setup with proper data in the mentioned activity. The only java file in this proof of concept app should be MainActivity.java. Once you do this share project via github and link it here please. You should use latest library version in this app. Please implement MainActivity like this:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
HIChartView chartView = findViewById(R.id.hc);
HIOptions options = new HIOptions();
// put all your options here, set up whole chart with proper data
// please do not use other files or methods, keep it as simple as you can
chartView.setOptions(options);
}
}
Use this layout code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.highsoft.highcharts.core.HIChartView
android:id="@+id/hc"
android:layout_width="match_parent"
android:layout_height="500dp"/>
</RelativeLayout>
@soommy12
We finally found the bug precisely: With the new library version, when inserting the value as a String like this {0, 0, "10"} it's not working (in v6.1.4 it worked) Below the code with some of the objects with String value and some with a number (int/float) value and only the number value is shown. This issue is also happening on the highchart JS (tested her: https://www.highcharts.com/samples/highcharts/demo/heatmap?codepen)
This is also the git repo of the simple project with 2 activities: 1 same as below and the second is the Highchart example with some data in String and others in number: with the same result. https://github.com/Chimco26/MyHighchartsApp
Please let me know if there is another way to display the data label as a string composed by the value and the "%" suffix. If not, will you fix the issue in the next release, and when it will be released?
package com.example.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.Button;
import com.google.gson.Gson; import com.google.gson.reflect.TypeToken; import com.highsoft.highcharts.common.HIColor; import com.highsoft.highcharts.common.hichartsclasses.*; import com.highsoft.highcharts.core.HIChartView; import com.highsoft.highcharts.core.HIFunction;
import java.util.ArrayList; import java.util.Collections; import java.util.HashMap;
public class MainActivity extends AppCompatActivity {
HIOptions options = new HIOptions();
HIChartView chartView;
private ArrayList<String> YLabels;
private ArrayList<String> XLabels;
private ArrayList<Object[]> heatmapData;
private ArrayList<String> mKeys;
private Gson mGson = new Gson();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
chartView = findViewById(R.id.hc);
Button mSwitchButton = findViewById(R.id.switch_button);
mSwitchButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent i = new Intent(getApplicationContext(), MainActivity2.class);
startActivity(i);
}
});
ArrayList<String> mXlabels = new ArrayList<>();
mXlabels.add("M-1");
mXlabels.add("M-2");
mXlabels.add("M-8");
mXlabels.add("M-3");
mXlabels.add("M-4");
mXlabels.add("M-5");
mXlabels.add("M-6");
mXlabels.add("M-7");
mXlabels.add("M-10");
XLabels = mXlabels;
ArrayList<String> mYlabels = new ArrayList<>();
mYlabels.add("03-01");
YLabels = mYlabels;
/* 100 is a number so it's working*/
heatmapData = mGson.fromJson("[[0,0,100,"rgba(4,159,30,0.9","03-01","M-1","100%","100%","100%"]" +
/* 22.24% is a String "%" so it's not working */
",[1,0, 22.24%,"rgba(208,210,45,0.9","03-01","M-2","22.24%","100%","22%"]," +
"[2,0,100,"rgba(4,159,30,0.9","03-01","M-8","100%","100%","100%"],[3,0,1.42,"rgba(230,29,15,0.9","03-01","M-3","1.42%","100%","1%"],[4,0,100,"rgba(4,159,30,0.9","03-01","M-4","100%","100%","100%"],[5,0,"100%","rgba(4,159,30,0.9","03-01","M-5","100%","100%","100%"],[6,0,"100%","rgba(4,159,30,0.9","03-01","M-6","100%","100%","100%"],[7,0,"98.27%","rgba(4,159,30,0.9","03-01","M-7","98.27%","100%","98%"],[8,0,"0.00%","rgba(230,29,15,0.9","03-01","M-10","0.00%","100%","0%"]]\n" + " ",
new TypeToken<ArrayList<Object[]>>() {}.getType());
ArrayList<String> mKeys1 = new ArrayList<>();
mKeys1.add("x");
mKeys1.add("y");
mKeys1.add("value");
mKeys1.add("color");
mKeys1.add("YName");
mKeys1.add("XName");
mKeys1.add("valueInPercentage");
mKeys1.add("target");
mKeys1.add("Percentage");
mKeys = mKeys1;
HIChart chart = new HIChart();
chart.setZoomType("xy");
chart.setType("heatmap");
chart.setPlotBorderWidth(1);
chart.setEvents(new HIEvents());
options.setChart(chart);
HIXAxis xaxis = new HIXAxis();
xaxis.setCategories(XLabels);
xaxis.setGridLineWidth(2);
xaxis.setGridLineColor(HIColor.initWithHexValue("000000"));
options.setXAxis(new ArrayList<HIXAxis>(Collections.singletonList(xaxis)));
HIYAxis yaxis = new HIYAxis();
yaxis.setCategories(YLabels);
yaxis.setTitle(new HITitle());
yaxis.getTitle().setText("");
yaxis.setGridLineWidth(2);
yaxis.setGridLineColor(HIColor.initWithHexValue("000000"));
options.setYAxis(new ArrayList<HIYAxis>(Collections.singletonList(yaxis)));
HILegend legend = new HILegend();
legend.setEnabled(false);
options.setLegend(legend);
HITooltip tooltip = new HITooltip();
tooltip.setUseHTML(true);
tooltip.setShared(true);
tooltip.setFormatter(new HIFunction("function () { return '" + " <b>' + this.point.YName + '</b><br>" + " ' + this.point.XName + ' " +
" <b>' + this.point.valueInPercentage + '</b><br>" + "target_" + " <b>' " +
"+ this.point.target + '</b><br>" + "percentage" + " <b>' + this.point.Percentage + '</b>' }"));
options.setTooltip(tooltip);
HIHeatmap heatmap = new HIHeatmap();
heatmap.setName("");
heatmap.setData(heatmapData);
ArrayList<HIDataLabels> hiDataLabelsArrayList = new ArrayList<HIDataLabels>();
HIDataLabels hiDataLabels = new HIDataLabels();
hiDataLabels.setEnabled(true);
hiDataLabels.setColor(HIColor.initWithHexValue("000000"));
hiDataLabelsArrayList.add(hiDataLabels);
heatmap.setDataLabels(hiDataLabelsArrayList);
heatmap.setKeys(mKeys);
heatmap.setPointPadding(1);
options.setSeries(new ArrayList<HISeries>(Collections.singletonList(heatmap)));
HIPlotOptions plotOptions = new HIPlotOptions();
plotOptions.setSeries(new HIHeatmap());
ArrayList<HIDataLabels> hiDataLabelsArrayList1 = new ArrayList<HIDataLabels>();
HIDataLabels hiDataLabels1 = new HIDataLabels();
hiDataLabels1.setEnabled(true);
hiDataLabels1.setColor(HIColor.initWithHexValue("000000"));
hiDataLabelsArrayList1.add(hiDataLabels1);
plotOptions.getSeries().setDataLabels(hiDataLabelsArrayList1);
options.setPlotOptions(plotOptions);
options.additionalOptions = new HashMap<>();
HashMap<String, Object> colorAxisOptions = new HashMap<>();
colorAxisOptions.put("min", 0);
colorAxisOptions.put("minColor", "#FFFFFF");
colorAxisOptions.put("maxColor", "#7cb5ec");
options.additionalOptions.put("colorAxis", colorAxisOptions);
chartView.setOptions(options);
}
}
@nathanb2 Thank you for the example project. I will take look at it. If the problem is indeed in the core library I won't be able to fix it myself. I will contact JS developers in that matter. Will back with proper information soon.
Hi, you can display the data label as a string by setting the heatmap data as an array of numbers and applying the proper formatter to HIDataLabels. See the example below:
val heatmap = HIHeatmap()
val dataLabel = HIDataLabels().apply {
enabled = true
formatter = HIFunction("function () { return '<b>' + this.point.value + '%' + '</b>' ; }")
}
heatmap.dataLabels = arrayListOf(dataLabel)
val heatmapData = arrayOf(
arrayOf(0, 0, 10),
arrayOf(0, 1, 19),
arrayOf(0, 2, 8),
arrayOf(0, 3, 24)
)
heatmap.setData(arrayListOf(*heatmapData))
options.setSeries(arrayListOf(heatmap))
