I am working on android. By using highchart I have created a barchart.
HIOptions options = new HIOptions();
HIChart chart = new HIChart();
chart.setType("bar");
options.setChart(chart);
HITitle title = new HITitle();
title.setText("GOLM");
options.setTitle(title);
HISubtitle subtitle = new HISubtitle();
subtitle.setText("Growth Over Last Month");
options.setSubtitle(subtitle);
HIXAxis xaxis = new HIXAxis();
String[] categories = new String[] { "Mar-2021", "Apr-2021","May-2021"};
xaxis.setCategories(new ArrayList<>(Arrays.asList(categories)));
options.setXAxis(new ArrayList<HIXAxis>(){{add(xaxis);}});
HIYAxis yaxis = new HIYAxis();
yaxis.setMin(0);
yaxis.setTitle(new HITitle());
yaxis.getTitle().setText("Sales");
yaxis.getTitle().setAlign("high");
yaxis.setLabels(new HILabels());
yaxis.getLabels().setOverflow("justify");
options.setYAxis(new ArrayList<HIYAxis>(){{add(yaxis);}});
HITooltip tooltip = new HITooltip();
options.setTooltip(tooltip);
HILegend legend = new HILegend();
legend.setLayout("vertical");
legend.setAlign("right");
legend.setVerticalAlign("top");
legend.setX(-30);
legend.setY(40);
legend.setFloating(true);
legend.setBorderWidth(1);
legend.setBackgroundColor(HIColor.initWithHexValue("FFFFFF"));
legend.setShadow(true);
options.setLegend(legend);
HICredits credits = new HICredits();
credits.setEnabled(false);
options.setCredits(credits);
HIBar bar1 = new HIBar();
bar1.setName("Sale");
Number[] bar1Data = new Number[]{10,15,20};
bar1.setData(new ArrayList<>(Arrays.asList(bar1Data)));
bar1.setColorByPoint(true);
HILegend hiLegend = new HILegend();
hiLegend.setEnabled(false);
options.setLegend(hiLegend);
options.setSeries(new ArrayList<>(Collections.singletonList(bar1)));
golmChart.setOptions(options);
Output
I want to enable the data labels. The sample code does give a code to enable data labels but it's not working
HIPlotOptions plotOptions = new HIPlotOptions();
plotOptions.setBar(new HIBar());
plotOptions.getBar().setDataLabels(new HIDataLabels());
plotOptions.getBar().getDataLabels().setEnabled(true);
options.setPlotOptions(plotOptions);
It's giving me an error
error: incompatible types: HIDataLabels cannot be converted to ArrayList
plotOptions.getBar().setDataLabels(new HIDataLabels());
Source: Android Basic Bar
Any help would be highly appreciated.
They have changed the datalabel property. Now you have to do the following
HIDataLabels dataLabels = new HIDataLabels();
dataLabels.setEnabled(false);
ArrayList<HIDataLabels> dataLabelsList = new ArrayList<>();
dataLabelsList.add(dataLabels);
bar1.setDataLabels(dataLabelsList);
Try the above code after you set data to bar1
For more information see this comment
Related
How to pass custom object for graph point on HighCharts Android ?
I want to pass extra information other than x and y values for point on graph. That extra information i want to use in tooltip.
How to achieve this on Android ?
I tried something like this, but it did not work.
data class GraphPoint(val x:Float, val y:Float, val date:Long)
val readings = ArrayList<List<GraphPoint>>()
readings.add(GraphPoint(1f, 10f, 1657255313)
readings.add(GraphPoint(2f, 5f, 1657255351)
readings.add(GraphPoint(3f, 20f, 1662612113)
val scatter = HIScatter()
scatter.data = readings
Answered here
https://github.com/highcharts/highcharts-android/issues/237
For that case, we will need to use maps. In tooltip, we will need to refer to point parameter by its map key equivalent (e.g. point.{key_name}). Check out this example:
HIChartView chartView = findViewById(R.id.chartview1);
HIOptions options = new HIOptions();
HILegend legend = new HILegend();
legend.setEnabled(false);
options.setLegend(legend);
HITooltip tooltip = new HITooltip();
tooltip.setHeaderFormat("<span style=\"font-size:11px\">{series.name}</span><br>");
tooltip.setPointFormat("<b>X: {point.x:.2f}%</b> <b>Y: {point.y:.2f}%</b><br/>Date: point.date");
options.setTooltip(tooltip);
HIScatter series1 = new HIScatter();
HashMap<String, Object> map1 = new HashMap<>();
map1.put("date", 1657255313);
map1.put("x", 1);
map1.put("y", 10);
HashMap<String, Object> map2 = new HashMap<>();
map2.put("date", 1657255351);
map2.put("x", 2);
map2.put("y", 5);;
HashMap<String, Object> map3 = new HashMap<>();
map3.put("date", 1662612113);
map3.put("x", 3);
map3.put("y", 20);
HashMap[] series1_data = new HashMap[] { map1, map2, map3 };
series1.setData(new ArrayList<>(Arrays.asList(series1_data)));
options.setSeries(new ArrayList<>(Arrays.asList(series1)));
chartView.setOptions(options);
I'm trying to build and android application with MP Android chart v 2.0.9 and my problem is i'm affecting 4 limit lines to my chart but it displaying just two.
Any solution?
LimitLine llg1 = new LimitLine(Charts.refrms , "");
llg1.setLineWidth(2f);
llg1.setLineColor(greencolor);
holder.lineChart.getAxisLeft().addLimitLine(llg1);
LimitLine llr1 = new LimitLine(Charts.dgrms , "");
llr1.setLineWidth(2f);
holder.lineChart.getAxisLeft().addLimitLine(llr1);
LimitLine lly1 = new LimitLine(Charts.pralrms , "");
lly1.setLineWidth(2f);
lly1.setLineColor(yellowcolor);
holder.lineChart.getAxisLeft().addLimitLine(lly1);
LimitLine llo1 = new LimitLine(Charts.alrms , "");
llo1.setLineWidth(2f);
llo1.setLineColor(orangecolor);
holder.lineChart.getAxisLeft().addLimitLine(llo1);
holder.lineChart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);
holder.lineChart.getAxisRight().setEnabled(false);
LineDataSet dataset = new LineDataSet(Charts.rms, "");
//dataset.setDrawCubic(true);
// dataset.setDrawFilled(true);
// dataset.setColors(ColorTemplate.COLORFUL_COLORS);
dataset.setDrawValues(false);
holder.lineChart.animateY(5000);
LineData data = new LineData(Charts.measdate, dataset);
holder.lineChart.setData(data);
holder.lineChart.setDescription("RMS");
holder.lineChart.setDescriptionTextSize(20);
the solution was to fix the y axis min and max value holder.lineChart.getAxisLeft().setAxisMaxValue(Charts.dgpeak+2); holder.lineChart.getAxisLeft().setAxisMinValue(0f);
got the following code:
Legend legend = mChart.getLegend();
legend.setLabels(new String[]{"aaaaa", "bbbbb", "ccccc"});
This setting does not take effect Is there an other way to set the text ?
I could not find the method setCustom(int[] color, String[] labels) in v3.0.0. Only setCustom(LegendEntry[]) for which you have to pass LegendEntry objects.
List<LegendEntry> entries = new ArrayList<>();
for (int i = 0; i < titleList.size(); i++) {
LegendEntry entry = new LegendEntry();
entry.formColor = colorList.get(i);
entry.label = titleList.get(i);
entries.add(entry);
}
legend.setCustom(entries);
You can set custom labels with colors:
First make sure Legend is enable. Unless enable legend.
legend.setEnabled(true);
With com.github.PhilJay:MPAndroidChart:v3.0.0:-
legend .setCustom(ColorTemplate.VORDIPLOM_COLORS, new String[] { "aaaaa", "bbbbb", "ccccc"});
setCustom(int[] colors, String[] labels): Sets a custom legend's labels and colors arrays. The colors count should match the labels count. Each color is for the form drawn at the same index.
Pass the label name as second parameter to constructor PieEntry().
(For version > 3.0.0)
Example:
ArrayList<PieEntry> yvalues = new ArrayList<PieEntry>();
yvalues.add(new PieEntry(8f, "JAN"));
yvalues.add(new PieEntry(15f, "FEB"));
yvalues.add(new PieEntry(12f, "MAR"));
yvalues.add(new PieEntry(25f, "APR"));
yvalues.add(new PieEntry(23f, "MAY"));
yvalues.add(new PieEntry(17f, "JUNE"));
PieDataSet dataSet = new PieDataSet(yvalues, "Election Results");
PieData data = new PieData();
data.addDataSet(dataSet);
data.setValueFormatter(new PercentFormatter());
pieChart.setData(data);
1)Add dependency to build.gradle app level
compile 'com.github.PhilJay:MPAndroidChart:v2.1.0'
2)make function chartData
private void chartData() {
ArrayList<Entry> entries = new ArrayList<>();
entries.add(new Entry(50, 0));
entries.add(new Entry(60, 1));
final int[] piecolors = new int[]{
Color.rgb(183, 28, 28),
Color.rgb(27, 94, 32)};
PieDataSet dataset = new PieDataSet(entries, "");
ArrayList<String> labels = new ArrayList<String>();
labels.add("Borrowing");
labels.add("Pending");
PieData data = new PieData(labels, dataset);
dataset.setColors(ColorTemplate.createColors(piecolors)); //
data.setValueTextColor(Color.WHITE);
pieChart.setDescription("Description");
pieChart.setData(data);
}
3)Call chartData() in onCreate()
Thanks to vikas singh and other hints elsewhere, here's how I solved both coloring for the piechart and legend, for MPAndroidChart v3.0.3:
private void visualizeAnalytics(ArrayList<Transaction> transactions) {
PieChart graph = rootView.findViewById(R.id.graph);
ArrayList<PieEntry> entries = new ArrayList<>();
HashMap<String, Integer> categoryFrequencyMap = new HashMap<>();
for(Transaction T: transactions) {
String category = T.getType().name();
if(categoryFrequencyMap.containsKey(category)){
categoryFrequencyMap.put(category, categoryFrequencyMap.get(category) + T.getAmount());
}else {
categoryFrequencyMap.put(category, T.getAmount());
}
}
ArrayList<String> categories = new ArrayList<>();
int e = 0;
for(String category: categoryFrequencyMap.keySet()){
categories.add(e, category);
entries.add(new PieEntry(categoryFrequencyMap.get(category), category));
e++;
}
PieDataSet categories_dataSet = new PieDataSet(entries, "Categories");
categories_dataSet.setSliceSpace(2f);
categories_dataSet.setValueTextSize(15f);
//categories_dataSet.setValueTextColor(Color.RED);/* this line not working */
graph.setEntryLabelColor(Color.RED);
categories_dataSet.setSelectionShift(10f);
categories_dataSet.setValueLinePart1OffsetPercentage(80.f);
categories_dataSet.setValueLinePart1Length(1f);
categories_dataSet.setValueLinePart2Length(0.9f);
categories_dataSet.setXValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
PieData pieData = new PieData(categories_dataSet);
graph.setData(pieData);
Legend legend = graph.getLegend();
List<LegendEntry> legendEntries = new ArrayList<>();
RandomColor randomColor = new RandomColor();
int[] colors = randomColor.randomColor(categories.size());
for (int i = 0; i < categories.size(); i++) {
LegendEntry legendEntry = new LegendEntry();
legendEntry.formColor = colors[i];
legendEntry.label = categories.get(i);
legendEntries.add(legendEntry);
}
categories_dataSet.setColors(colors);
legend.setEnabled(false);
legend.setCustom(legendEntries);
Description description = new Description();
description.setText("Analyzing Transaction Vol by Category");
graph.setDescription(description);
graph.animateY(5000);
graph.invalidate(); // refresh
}
For the nice random colors, I sourced from this: https://github.com/lzyzsd/AndroidRandomColor
Hi i have a Bar graph using android GraphView. have 3 series that i need to pass into it but its currently drawing all 3 series onto of each other is there a way to change the width of the bar so that it shows
heres what i have sofar
try{
JSONArray graphArray = returnGraphyArray(statistics);
if(graphArray != null){
int graphLength = graphArray.length();
GraphViewData[] calls = new GraphViewData[graphLength];
GraphViewData[] length = new GraphViewData[graphLength];
GraphViewData[] transfered = new GraphViewData[graphLength];
for(int r = 0; r < graphLength; r++){
JSONObject row = graphArray.getJSONObject(r);
calls[r] = new GraphViewData(r,Integer.parseInt(row.getJSONObject("data").getString("total_calls")));
length[r] = new GraphViewData(r,Integer.parseInt(row.getJSONObject("data").getString("avg_call_length"))/60);
transfered[r] = new GraphViewData(r,Integer.parseInt(row.getJSONObject("data").getString("calls_transferred")));
}
GraphViewSeries totalCallsSeries = new GraphViewSeries( "Total Calls", new GraphViewSeriesStyle(getResources().getColor(R.color.pink), 5),calls);
GraphViewSeries totalCallLengthSeries = new GraphViewSeries( "Total Call Length", new GraphViewSeriesStyle(getResources().getColor(R.color.green), 5),length);
GraphViewSeries totalCallsTransSeries = new GraphViewSeries( "Calls Transfered", new GraphViewSeriesStyle(getResources().getColor(R.color.blue), 5),transfered);
BarGraphView graphView = new BarGraphView(context, "");
graphView.addSeries(totalCallLengthSeries);
graphView.addSeries(totalCallsTransSeries);
graphView.addSeries(totalCallsSeries); // data
graphView.setHorizontalLabels(bottomlabels);
graphView.setShowLegend(false);
graphView.setLegendAlign(LegendAlign.TOP);
graphView.setLegendWidth(SM_Global.pxFromDp(context, 100));
graphView.getGraphViewStyle().setNumHorizontalLabels(6);
layout.addView(graphView);
}else{
layout.setVisibility(View.GONE);
ImageView legend = (ImageView)v.findViewById(R.id.graph_legend);
legend.setVisibility(View.GONE);
}
According to the GraphView website:
"Note: It is currently not possible to plot multiple bar charts. To say it more in detail: It is possible, but the bars will be rendered at the same position and so they will be overlapped."
I would suggest using AChartEngine instead. Here's the link to the jar file
https://code.google.com/p/achartengine/downloads/list
and here's an example
http://wptrafficanalyzer.in/blog/android-drawing-bar-chart-using-achartengine/
How can I make my GraphView always start on zero and not on the lowest number of my data ? For example if my data received is {10,44,1,15}, the bottom one will be the 1 and I wanted to be zero. How can I do that ?
And how can I make the GraphViewSeries dynamically ? For example I receive an array with data and I want depending the size of the array to make the GraphViewSeries, like if I receive an array with 3 elements the GraphViewSeries will be like this:
GraphViewSeries exampleSeries = new GraphViewSeries(
new GraphViewData[] {
new GraphViewData(1, total[0]),
new GraphViewData(2, total[1]),
new GraphViewData(3, total[2])});
If the array has 5 elements with would be like this:
GraphViewSeries exampleSeries = new GraphViewSeries(
new GraphViewData[] {
new GraphViewData(1, total[0]),
new GraphViewData(2, total[1]),
new GraphViewData(3, total[2]),
new GraphViewData(4, total[3]),
new GraphViewData(5, total[4]) });
How can I do this ?
You can set the min and max values like this:
GraphView graphView = new LineGraphView(context, "Graph name")
graphView.setManualYAxisBounds((double) max, (double) min);
For dynamic series you can do this:
GraphViewData[] data = new GraphViewData[total.length];
for (int a = 0; a < total.length; a++) {
data[a] = new GraphView.GraphViewData(a, total[a]);
}
then you add your data to a series like this:
GraphViewSeriesStyle style = new GraphViewSeriesStyle(Color.rgb(150, 150, 150), 2);
GraphViewSeries series = new GraphViewSeries(driverName.substring(0, 3).toUpperCase(), style, data);
for the official documentation refer to here.
In GraphView 4.x, setting the axis min and max values has to be done via the viewport:
graphView.getViewport().setYAxisBoundsManual(true);
graphView.getViewport().setMinY(min);
graphView.getViewport().setMaxY(max);
'graphView.setManualYAxisBounds()' no longer exists.
See also http://www.android-graphview.org/documentation/migration-from-31-to-40