I'm using Baidu ECharts2 to visualise a dynamic amount of series (up to 100) as a line chart.
The issue I face is the legend overlaps the graph in case if the series are too many.
I spent good 2 hours in searching the documentation and reading, but cannot figure out any way to set the graph position (y/y2 top/height).
It seems the chart consists of different elements (legend, toolbox etc), but none of them seems to be the graph itself.
An example I found showcases a fully responsive way to position pie charts, but this is not applicable in my case:
https://ecomfe.github.io/echarts-examples/public/editor.html?c=doc-example/pie-media
I'd be grateful if someone has more experience with ECharts and can tell me way to move the graph down by y and set a height.
Thank you!
Your best option may be to set the legend type to scroll so it fits on one line.
legends.push({
type: 'scroll',
show: true,
data: myData,
...
});
You may also be able combine Ovilia's and Zain's solutions to move the grid down to leave space for the legend. Unfortunately that would require a way to determine the legend's size before setting the chart's container size.
You can set grid position to make it.
In ECharts 2, you may set grid.y, grid.y2, or grid.height.
In ECharts 3, you may set grid.top, grid.bottom, or grid.height.
I read this question about how to set initial centers of k-mean on StackOverflow. I read the answer, but I have no idea how to implement it in C++.
Could anyone give me any suggestions? I'd like to calculate first labels using centers that I already have and pass them to kmeans function with flag KMEANS_USE_INITIAL_LABELS for calculating new centers on new (but similar) data. Data in this case are features of images.
I am creating project with ChartJs, and I am fetching real time data from the server. Each second, I add extra data point. After some time, there is just too many points on the graph, to the point that you cannot see anything. I would like to know, if there is a way to scroll through the x-variables, and always have set distance between the points? As of know, the distance between points is shrinking, making the graph not readable.
Thanks!
I would like to know, if there is a way to scroll through the
x-variables,
You can use .removeData( ) to remove the (current) first set of points. This would keep only the same number of (latest) points visible on the graph.
...and always have set distance between the points?
Unless you remove points maintain a set distance while adding points would cause the graph width to increase - which is usually not what you want to do.
Why doesn't this Google Chart API URL render both data sets on this XY scatter plot?
http://chart.apis.google.com/chart?cht=lxy&chd=t:10,20,30,40,50,60,70,80,90,100,110,120,130,140,150,160,170,180,190,200|0.10,0.23,0.33,0.44,0.56,0.66,0.79,0.90,0.99,1.12,1.22,1.33,1.44,1.56,1.68,1.79,1.90,2.02,2.12,2.22|0.28,0.56,0.85,1.12,1.42,1.68,1.97,2.26,2.54,2.84,3.12,3.40,3.84,4.10,4.53,4.80,5.45,6.02,6.40,6.80&chco=3072F3,ff0000,00aaaa&chls=2,4,1&chs=320x240&chds=0,201,0,7&chm=s,FF0000,0,-1,5|s,0000ff,1,-1,5|s,00aa00,2,-1,5
I've read the documentation over and over again, and I can't figure it out.
First a point of clarification. You talk about a "XY scatter plot", but these are actually 2 distinct chart types in the Google Chart API. Your URL refers to cht=lxy parameter which is an XY line chart.
The first problem with your URL is your data parameter (chd). Since it is an XY line chart, data sets must be defined in pairs but I see an odd number of data sets (3).
Christian D's response is incorrect. There is no percentage requirement.
You may be better off using a wrapper API which abstracts away many of these ugly details.
I think it actually does render both data sets, but you can only se one of them because there's only one scale on the y axis. (In other words, 0.10 is too small to show.)
And, you should really be using percentages. 100 is the highest accepted value:
Where chart data string consists of positive floating point numbers from zero (0.0) to one hundred (100.0)
I would like to display multiple colors (and potentially shapes and sizes) of data points in a Google Chart scatter chart. Does anyone have an example of how to do so?
I answered my own question after waiting SECONDS for an answer here :-)
You can indeed have different colors for different data elements. For example:
http://chart.apis.google.com/chart?chs=300x200&cht=s&chd=t:1,2,3|6,5,4&chds=1,3,0,10&chxt=x,y&chxl=0:|0|1|2|1:|0|10&chm=d,ff0000,0,0,8,0|a,ff8080,0,1,42,0|c,ffff00,0,2,16,0
It's the chm= that does the magic. I was trying to have multiple chm= statements. You need to have just one, but with multiple descriptions separated by vertical bars.
You can only use one dataset in a scatter plot, thus only one color.
http://code.google.com/apis/chart/#scatter_plot
From the API description:
Scatter plots use multiple data sets differently than other chart types. You can only show one data set in a scatter plot.
You could effectively fake a multi-color scatter plot by using a line plot with white lines and colored shape markers at the points you want to display.
Here's another example: twitter charts. I'm hoping to do the same thing. Need to find out how to do the concentric circles.