I am producing a graph using the following code:
var svg = dimple.newSvg("#p_m", 1200, 200+(data.f_c_c*20));
var chrt_participants = new dimple.chart(svg, data.result);
chrt_participants.setBounds(200, 50, 900, 100+(data.f_c_c*20));
var y = chrt_participants.addCategoryAxis("y", ["title", "name"]);
var x = chrt_participants.addLogAxis("x", "Activity");
var s = chrt_participants.addSeries(["cid_id","cid","action"], dimple.plot.bar);
chrt_participants.addLegend(800, 0, 400, 40, "left");
chrt_participants.draw();
It draws the following graph:
Everything is as expected, except that the series (the coloured chunks of the bars) don't seem to be put in any particular order. As you can see, for two bars, for some reason unbeknownst to me, the red value is placed before the blue.
Is there a way to fix the order of the series?
The default order is descending by value but you can easily override using series.addOrderRule(). The documentation explains how:
https://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.series#addOrderRule
On a side issue, be careful using a log axis for a stacked bar, it's very misleading. It's not immediately apparent that red and blue have about a 50/50 split of bars. You might be better using a grouped bar instead so that both categories receive comparable scaling.
Related
So I tried to put hovertemplate inside go.Parcats but not sure which way to put it. I want something like when you hover on any line it shuold show the custom discription like names of attributes and count and percentage on hover.
Also is there any wat to blank out those labels at the bottom of the chart so that it looks less busy and nicer but also when you hover on it shuold show up details. I know it's too much of customization but hoping it's doable.
dimensions.append(dict(values = df[dim], label = dim, categoryarray = df[dim].unique(), categoryorder = 'array', ticktext = slabel))
fig = go.Figure(data = [go.Parcats(dimensions= dimensions,
line = {'color': color, 'colorscale':colorscale,},
)]
)
mpandroidchart, I am reading data from a tool every second and I am drawing that data well, but when I turn off the tool a couple of minutes and again I turn the tool on, the chart draws a consecutive line instead of leaving a space before to start again to draw the values, How can I do that using this library?
I would like to have something like the second image
I think you can't do that all you can do is when stop the data you can insert few entries with 0 value on y-axis and when resume chart will start plotting values again but you can see two lines from the last value to zero and from 0 to the next value obtained.
I finally got to draw the line Data Set as I needed,
this library is awesome, it has a bunch of functionalities.
I saw this video https://www.youtube.com/watch?v=mA3-cz8EGWo and then I realized
I can change the line color between two dots by using .setColor(List colors), so I used a map with key = data set Index and value = array of colors for that dataset, and then I just changed to transparent color where I needed
Map<Integer, List<Integer>> colorsByDataSet = new HashMap<>();
save the color every time you create an entry
addNewEntry(x,y,color,1); //1 = dataset1
if (colorsByDataSet.containsKey(1)) {
List<Integer> colors = colorsByDataSet.get(1);
colors.add(color);
colorsByDataSet.put(1, colors);
} else {
List<Integer> colors = new ArrayList<>();
colors.add(color);
colorsByDataSet.put(1, colors);
}
//identify the position where you need to change the color and then update the List<Integer>
List<Integer> colors = colorsByDataSet.get(1);
colors.set(colors.size() - 1, Color.TRANSPARENT);
colorsByDataSet.put(i, colors);
//set the new colors
((LineDataSet) set).setColors(colorsByDataSet.get(1));
this the final result
if you know about a better way I am open to hear
I'm using MPandroidchart to draw scatter chart.
I want to make a scatter chart that has a base line.
If value over the base line, in my case 0.2, its color change to red.
If not, it color is blue.
This is the codes i did.
if (d>=0.5)
{
colors.add(getBaseContext().getResources().getColor(R.color.color_red));
} else
{
colors.add(getBaseContext().getResources().getColor(R.color.color_blue));
}
value1.add(new Entry(k,d));
But it didn't change dot's color, but change squre's color next to label
I have tried
1)
if(index == specificIndex) colors.add(Color);
else colors.add(NormalColor);
2)
ArrayList<Integer> color = new ArrayList<>();
if (YOUR_CONDITION) {
color.add(ColorTemplate.rgb("#f8bf94"));
yVals1.add(new Entry(VALUE, COUNTER));
} else {
color.add(ColorTemplate.rgb("#e0e0e0"));
yVals1.add(new Entry(VALUE, COUNTER));
}
set1.setColors(color);
3)
color.add(Color.RED);
color.add(context.getResources().getColor(R.color.your_defined_color_in_colors_xml));
dataSet.setCircleColors(color);
But it didn't work.
How can i solve this?
After spending hours with this same issue, I have realized that it is the result of a bug in the MPAndroidChart project.
Basically, in the ScatterChartRenderer, the colors array is being treated such that only even colors are being applied to data points. For each Entry i, the color is set to colors[i / 2] meaning that the same color will be applied to two different entries due to integer division. This results in only half of the colors array being used.
To resolve this issue quickly, my solution was to add each entry to the DataSet twice. This means two points are drawn on top of each other, but both have the proper color set.
I am submitting a pull request to hopefully fix this issue in the next release, but for now this quick hack should work.
Is there a way to tell oxyplot to use the x value as the connect/draw order for a line plot instead of the order that the points are added?
Let's assume I have this huge amount of points (2Gb in RAM) of a time series. At a higher level I am only adding a small percentage of those points and as the user zooms into a more specific region I add more points to the series so he can see more detail. Almost like a texture mimap. I can add all the points at once but then oxy becomes really slow when I tries to render all those points in a single window in WPF Maybe there is another solution here?
The problem that I am facing is that oxy draws a line from the last point in the graph to the first one of the new batch because it uses the series points list as the draw order not the X value. Is there a way to change this?
Here is a tiny example based on the 'WPF Simple Example':
var plotModel = new PlotModel { Title = "Simple example", Subtitle = "using OxyPlot" };
var timeAxis = new DateTimeAxis
{
Position = AxisPosition.Bottom,
StringFormat = "hh:mm:ss",
};
plotModel.Axes.Add(timeAxis);
var now = DateTime.UtcNow;
// Create two line series (markers are hidden by default)
var series1 = new LineSeries { Title = "Series 1", MarkerType = MarkerType.Circle };
series1.Points.Add(new DataPoint(DateTimeAxis.ToDouble(now), 5));
series1.Points.Add(new DataPoint(DateTimeAxis.ToDouble(now.AddMinutes(1)), 7));
series1.Points.Add(new DataPoint(DateTimeAxis.ToDouble(now.AddMinutes(2)), 8));
series1.Points.Add(new DataPoint(DateTimeAxis.ToDouble(now.AddMinutes(0.5)), 10));
// Add the series to the plot model
plotModel.Series.Add(series1);
// Set the Model property, the INotifyPropertyChanged event will make the WPF Plot control update its content
this.Model = plotModel;
Here is the output, note that the line draws "back in time":
Is there a solution that does not involves me sorting the points list (not even sure if this works)?
Or maybe I am doing this extra points for details thing completely wrong :)
See Updates At Bottom (4/30/2015)
I'm implementing a Pie Chart in Swift for iOS using ios-charts, and have chosen to customize the legend. Of note, the chart is displayed within a cell of a UICollectionView. The problem is that on first display, the custom legend content is not being displayed. Instead, I get legend content generated from the data.
If I scroll the view off-screen, and then scroll it back onto the screen, the proper custom legend is displayed. So, I'm guessing that I need to force a redraw/relayout/re-something after setting my custom legend. I haven't figured out how to do that. Does anyone have an idea? Am I completely missing something? Thanks!
Chart on initial display - data-generated (wrong) legend
Chart after scrolling off and back onto the screen - (proper legend)
Here's my code for drawing this chart:
func initChart(pieChart: PieChartView) {
numFormatter.maximumFractionDigits = 0
pieChart.backgroundColor = UIColor.whiteColor()
pieChart.usePercentValuesEnabled = false
pieChart.drawHoleEnabled = true
pieChart.holeTransparent = true
pieChart.descriptionText = ""
pieChart.centerText = "30%\nComplete"
pieChart.data = getMyData()
// Setting custom legend info, called AFTER setting data
pieChart.legend.position = ChartLegend.ChartLegendPosition.LeftOfChartCenter
pieChart.legend.colors = [clrGreenDk, clrGold, clrBlue]
pieChart.legend.labels = ["Complete","Enrolled","Future"]
pieChart.legend.enabled = true
}
func getMyData() -> ChartData {
var xVals = ["Q201","R202","S203","T204","U205", "V206"]
var courses: [ChartDataEntry] = []
courses.append(ChartDataEntry(value: 3, xIndex: 0))
courses.append(ChartDataEntry(value: 3, xIndex: 1))
courses.append(ChartDataEntry(value: 4, xIndex: 2))
courses.append(ChartDataEntry(value: 4, xIndex: 3))
courses.append(ChartDataEntry(value: 3, xIndex: 4))
courses.append(ChartDataEntry(value: 3, xIndex: 5))
let dsColors = [clrGreenDk, clrGreenDk, clrBlue, clrBlue, clrGold, clrGold]
let pcds = PieChartDataSet(yVals: courses, label: "")
pcds.sliceSpace = CGFloat(4)
pcds.colors = dsColors
pcds.valueFont = labelFont!
pcds.valueFormatter = numFormatter
pcds.valueTextColor = UIColor.whiteColor()
return ChartData(xVals: xVals, dataSet: pcds)
}
Update 4/30/2015
Based on discussion with author of MPAndroidChart (on which ios-charts is based), it appears there is not a point in the chart display lifecycle where one can override the legend on "first draw". Basically, the chart is rendered when it is created, no matter what. If you set data on the chart, the chart uses that data to create the legend and then renders. It isn't possible to change the legend between the point of setting data, and the point of chart rendering.
setNeedsDisplay()
Potentially, one can wait for the chart to render, update the legend, and then call chart.setNeedsDisplay() to signal the chart to redraw. Sadly, there's a timing problem with this. If you call this method immediately after rendering the chart, it either doesn't fire or (more likely) it fires too soon and is effectively ignored. In my code, placing this call within viewDidLoad or viewDidAppear had no effect. However...
Building the same chart in Java for Android (using MPAndroidChart) results in the same issue. After messing around for a bit, I noted that if I called the chart.invalidate() after a delay (using Handler.postDelayed()), it would fire properly. It turns out a similar approach works for ios-charts on iOS.
If one uses GCD to delay the call to setNeedsDisplay(), for even a few milliseconds after the rendering, it seems to do the trick. I've added the following code immediately after initializing the chart's view in my ViewController ("cell" is the UICollectionViewCell containing the chart view):
delay(0.05) {
cell.pieChartView.legend.colors = [self.clrGreenDk, self.clrGold, self.clrBlue]
cell.pieChartView.legend.labels = ["Complete","Enrolled","Future"]
// Re-calc legend dimensions for proper position (Added 5/2/2015)
cell.pieChartView.legend.calculateDimensions(cell.pieChartView.labelFont!)
cell.pieChartView.setNeedsDisplay()
}
Using the awesome "delay" method from this SO post: https://stackoverflow.com/a/24318861
Obviously, this is a nasty hack, but it seems to do the trick. I'm not sure I like the idea of using this hack in production, though.
For any Android folk who stumble on this post:
The following code achieves the same effect using MPAndroidChart:
// Inside onCreate()
pie = (PieChart) findViewById(R.id.chart1);
configPieChart(pie);
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
String[] legLabels = new String[]{"Complete","Enrolled","Future"};
ArrayList<Integer> legColors = new ArrayList<Integer>();
legColors.add(blue);
legColors.add(gold);
legColors.add(green);
pie.getLegend().setPosition(Legend.LegendPosition.LEFT_OF_CHART_CENTER);
pie.getLegend().setColors(legColors);
pie.getLegend().setLabels(legLabels);
pie.invalidate();
}
}, 20);
I am the author of ios-charts, and we're working on features for customizing the legend data, without those "hacks".
In the latest commits to ios-charts, you can already see extraLabels and extraColors properties that add extra lines to the legend, and a setLegend function that allows you to set a custom data entirely.
This will soon be added to the Android version as well.
Enjoy :-)