I've currently got a working multi-series that's similar to this Apexcharts example. Within this series, I am using the colors function to specify certain colors depending on certain conditions. For example, as shown in this example, I can do:
colors: [
({ seriesIndex }) => {
// if one condition, return a color
// else if another condition, return a different color
}
]
What I'm trying to do now is something similar to create different patterns within the data series, similar to how it's possible to do so with colors. I have tried to look at the fill object as specified here, but obviously, this will create a standard pattern across all data on the graph. I'd like to specify conditions to return different patterns for specific data (like the colors function).
Is this possible with Apexcharts? I.e., is there a function that allows me to create conditions based on the seriesIndex to create different patterns? Ultimately, I'd like to create some sort of visual difference for certain data (not in terms of color, but moreso patterns/gradients) so that certain data is easily distinguishable from others. What is the best approach for this?
I have tried to use linear-gradient in colors but I'm not sure if that is possible. Alternatively, could I create a custom css within the graph options to fulfil this requirement?
There is a possibility built in with the fill property that allows you to have different patterns for different series:
fill: {
type: 'pattern',
opacity: 1,
pattern: {
style: ['circles', 'slantedLines', 'verticalLines', 'horizontalLines'], // string or array of strings
}
},
Source: https://apexcharts.com/vue-chart-demos/bar-charts/patterned/
Working example:
https://codesandbox.io/s/happy-stallman-ysyec?file=/src/App.js
(In the example I used multiple fill types for different series - something, that is possible, too)
Related
I am using the R package, highcharter, to produce Sunburst plots. The code I'm using is functionally equivalent to the example code provided here.. I want to change the font size of the labels marking each slice or section of a slice in the plot (in this example, these labels identify specific countries, sub-continents, etc). Searching the documentation and related StackOverflow questions, I've found plenty of information about how to modify the font in a charts title or axis labels but I haven't been able to find any information about modifying the font on sub-sections of a Sunburst plot.
I worry it might not actually be possible to do this without modifying the package because there seems to be some built-in function for hiding labels of very small sub-sections. I would appreciate any suggestions about how to modify these font sizes whether they involve modifying the package or not.
I'm not too familiar with highcharter but most of the wrappers allow you to put in code directly in case you want to utilize the full functionality of highcharts.
In your case, you want to adjust the label size. That is totally do-able, I'm going to direct you to their documentation as well of how I found what you are looking for so in case you do not receive feedback that you need on SO, you can find it yourself next time.
Direct link to documentation
For your question, and using the example that you cited above, you would need to adjust the by adding a style in dataLabels that are under levels.
In this case:
levels: [{
level: 1,
levelIsConstant: false,
dataLabels: {
filter: {
property: 'outerArcLength',
operator: '>',
value: 64
},
style: {
fontSize: '22px'
}
}
}
This will allow you to have custom sizes for every layer in the sunburst that you would need.
I am graphing a network and trying to color the vertices using non-overlapping attributes. I want my network diagram to be colored according to different attributes. In this example, if the first three letters of ID 2 are equal to U 50 or U 51, I want this to show up as red. I have 5 attributes I want this graph coded by and any observations that don't fall into one of the categories should be coded in a default color. In this way I will be able to see the intensity of these attributes and better communicate this to other people. So far, I have been unable to get the code to work using a variety of different coding methods. First I tried to create a new variable that assigned the correct attribute to each observation before converting it into an i graph object.
anon.nd$vertexcolor[substr(anon.nd$ID2,1,3)=="U50" | substr(anon.nd$ID2,1,3)=="U51"]<-"O"
anon.nd$vertexcolor[substr(anon.nd$ID2,1,3)=="U54" | substr(anon.nd$ID2,1,3)=="U55"]<-"P"
anon.nd$vertexcolor[anon.nd$INT.type=="K1"]<-"INT.NB"
anon.nd$vertexcolor[anon.nd$Country=="L12"]<-"UK"
anon.nd$vertexcolor[anon.nd$ID2=="U769"]<-"OBL"`
I then specified the colors I wanted to assign to each each attribute. I used the get vertex attribute code and filled in the appropriate colors.
anon.nd1<-graph.data.frame(anon.nd)
vertex_colors=get.vertex.attribute(anon.nd1,"vertexcolor")
colors=c('azure3', 'firebrick1', 'orange1', 'darkblue', 'darkolivegreen', 'gold')
vertex_colors[vertex_colors==0]=colors[1]
vertex_colors[vertex_colors==1]=colors[2]
vertex_colors[vertex_colors==2]=colors[3]
vertex_colors[vertex_colors==3]=colors[4]
vertex_colors[vertex_colors==4]=colors[5]
vertex_colors[vertex_colors==5]=colors[6]
I tried this same method using just:
vertex_colors<-vertex_colors+1
Then to plot, I changed my edge color to black, specified my layout, and change the size of my edges and vertices.
E(anon.nd1)$color="black"
nd.layout<-layout.fruchterman.reingold(anon.nd1)
plot(anon.nd1, layout=nd.layout, vertex.color=vertex_colors, vertex.size=2, edge.arrow.size=.01, vertex.label=NA)
Using this method, no color shows up on the vertices, not even the default color. Using a different method where I set the vertex attribute, I do a little better. The default color shows up, but the colors I want do not.
anon.nd2<-graph.data.frame(anon.nd)
V(anon.nd2)$colors<-"azure3"
V(anon.nd2)$colors[substr(anon.nd2$ID2,1,3)=="U50" | substr(anon.nd2$ID2,1,3)=="U51"]<-"firebrick1"
V(anon.nd2)$colors[substr(anon.nd2$ID2,1,3)=="U54" | substr(anon.nd2$ID2,1,3)=="U55"]<-"orange1"
V(anon.nd2)$colors[anon.nd2$Country=="L12"]<-"darkblue"
V(anon.nd2)$colors[anon.nd2$INT.type=="K1"]<-"darkolivegreen"
V(anon.nd2)$colors[anon.nd2$ID2=="U769"]<-"gold"
E(anon.nd2)$color<-"black"
nd.layout<-layout.fruchterman.reingold(anon.nd2)
windows(width=20, height=16)
plot(anon.nd2, layout=nd.layout, vertex.size=2, edge.arrow.size=.01, vertex.label=NA, vertex.color="vertex_colors")
I think the problem might be that I am trying to code vertex color using multiple (non-overlapping) edge attributes. But I don't know how to convert and edge attribute into a vertex attribute. I also don't know if there is some other, unidentified problem with my code.
Here is the link to my data is copied below as well as a link to my full code file which has one or two other methods I tried using to solve this problem. Any help would be much appreciated!
Data
And here is an R file with my code, which is also above: R-file
I think you are messing up your vertex_color vector, have a look at it with head().
anon.nd$vertexcolor[anon.nd$INT.type=="K1"]<-"INT.NB"
vertex_colors[vertex_colors==0]=colors[1]
You first assign a string and then compare with numbers, so non of them should be true.
plot(anon.nd2, layout=nd.layout, vertex.size=2, edge.arrow.size=.01, vertex.label=NA, vertex.color="vertex_colors")
This contains a typo and returns an error for me since "vertex_colors" isn't a colour name.
Last but not least, does
plot(anon.nd2, vertex.color=colors)
or
plot(anon.nd2, vertex.color=1:8)
result in a colourful plots? If yes, the vertex_colors vector is your problem, if not something else is.
Is there any way to create a break in my vertical scale on the Google charts api?
I have a couple of dozen data points all about 600-2000 on the y-axis except for one value which is almost 300,000; this makes all the smaller data points nearly unreadable. I need to represent all this data and a logarithmic scale is not an option.
Simple answer: no, it is not possible.
Breaking axes is (generally) frowned upon in the visualization community and therefore isn't supported most of the time in various software.
If you want to be tricky, you can create a function to find outliers, and then move them to a second series in your data. Plot that series on the second axis, and have it with a different color. This says, "This figure is different and does not fit" which brings added attention to it, while still allowing the rest of the data to be seen in the same scale.
Personally I would just cut off the graph at an arbitrary value, set the value of that point to the maximum value, and add a tooltip saying, "Outlier: 300,000" or whatever it is. This will allow people to see the other numbers, but show that this number itself is an outlier without coloring it differently or removing it from the single series.
Either way is doable.
You need use a log scale. It's a vAxis and hAxis attribute. The supported values are:
log: Conventional logarithm scale
mirrorLog: Logarithm scale that allows 0 values
var options = {
vAxis: {
scaleType: 'mirrorLog',
}
};
var data = {};//your data
chart.draw(data, options);
I've got two graphs that use the something like the following metrics :
graph1 : oldMethod.latencies_msec.percentiles.p{25,50,75,90,95,99}
graph2 : newMethod.latencies_msec.percentiles.p{25,50,75,90,95,99}
I'd like these two graphs to use the same colors for similar metrics. I don't care much about the colours but would like the two p25s in both graphs to have the same color, the two p50s to have the same color and so on.
If I don't use wildcards and use 6 different data lines for each graph and order the metrics the same way for both graphs, then I get consistent colors but if I use wildcards the ordering of the metrics seems arbitrary.
Is there anyway to fix the ordering? If not any insight into the logic behind the metric ordering would be helpful.
There is a change in works that will solve this problem. Here is the link to it in github - https://github.com/graphite-project/graphite-web/pull/831.
You might have to do sortByName(aliasByNode(your_metrics_here, position)) to get shorter names that can be sorted conveniently for metrics to be rendered in the right order. You have to also make sure you have the same number of nodes in all the graphs to get the desired result.
You can assign a color manually to a metric like so:
&target=color(my.data.here,"blue")
see bgcolor
http://graphite.readthedocs.org/en/1.0/url-api.html#bgcolor
Now to order, you can use something like:
target=limit(sortByMaxima(my.data.here,8)
The subject of this question might not give the true scenario, please read all below, thanks.
I am developing a Scatter Plot based on following data (JSON - in a file simple.json):
{
"docs":
[
{"timestamp":"01","id":"100","quantity":"5","pay":"50","bp":"25","city":"Multan"},
{"timestamp":"02","id":"200","quantity":"10","pay":"100","bp":"50","city":"Lahore"},
{"timestamp":"03","id":"300","quantity":"3","pay":"30","bp":"15","city":"Multan"},
{"timestamp":"04","id":"400","quantity":"5","pay":"50","bp":"25","city":"Multan"},
{"timestamp":"05","id":"500","quantity":"6","pay":"60","bp":"30","city":"Lahore"},
{"timestamp":"06","id":"600","quantity":"15","pay":"150","bp":"75","city":"Islamabad"},
{"timestamp":"07","id":"700","quantity":"14","pay":"140","bp":"70","city":"Islamabad"},
{"timestamp":"08","id":"800","quantity":"18","pay":"180","bp":"90","city":"Islamabad"},
{"timestamp":"09","id":"900","quantity":"7","pay":"70","bp":"35","city":"Lahore"},
{"timestamp":"10","id":"1000","quantity":"20","pay":"200","bp":"100","city":"Islamabad"}
]
}
I am trying to develop a Re-Usable graph, where I can present user with available data columns (from above data). So user can select a certain column (say "id") for X axis and another column (say "quantity") for Y axis (till here everything is perfect and as per expectations). And later user can select another column and can click a button to plot that column on the graph (along with previously added columns).
Here comes the problem:
When I proceed with another column (say "pay") for Y axis, while keeping previously on the graph, new ones get plotted correctly (I am rescaling the axis based on new data as well). But the old ones DO NOT RE-ARRANGED. This is the actual problem. I am thinking to keep track of each column added (by storing column references in a separate array), so every time there's a new column, I will have to redraw the old ones again (should I?). But this doesn't look feasible in terms of D3's power or performance.
For this I also applied an anonymous class "update" to every circle drawn, so that I can pick all "update" circles, but here comes another issue, that how would I know the new place for these circles? Do I need to traverse the data again for that particular series? and have to do that drawing again? For every new series, keeping track of old-ones and redrawing them, will increase the processing over-head turn by turn. Is there any handy solution or built-in (d3's) mechanism to re-adjust previous drawing according to new scale?
Please suggest something. I am sure I am lacking some key points.