I need a scatterplot like this: http://www.highcharts.com/demo/scatter but, instead of having one color for each serie (male and female, in the example), I need to select the color for each element. Following the example, each person would be coloured with a different level of gray, depending on their age.
As far as I know, Highcharts allow you to select the color of the elements, but it only affects the element pop-up information when you're using scatterplot.
Any other library to do scatterplots? Any way to do it with Highcharts?
Thanks!
You should be able to do this inside Hightcharts using the color property inside the data array.
You can see the documentation here, and there is also an example for this.
You could try preprocessing your data and transform it appending the color information to the array.
I've used AMCharts in a few javascript projects, they include a scatter chart and are quick and very easy to implement.
They have a free version if you are happy with their name in the corner of your chart canvas.
To set the colour of a specific point you can set the color property of a GraphDataItem - as in this documentation http://www.amcharts.com/docs/v.2/javascript_reference/graphdataitem
Related
I'm currently using a Polar Area chart from the chart.js lib, and I'm looking to style the scale numbers via CSS.
Below are two examples:
What it currently looks like:
What I want it to look like:
I'm not sure how to access those elements and apply CSS to them.
Some help to understand that process would be much appreciated.
Thanks! 😀
Charts.js produces a bit mapped image of a chart on a canvas element. Canvas elements are not subdivided into component elements that can individually styled using CSS (which is used for styling document elements in the DOM).
Styling of chart elements is actually achieved using canvas drawing options when the element is painted. Charts.js allows you to specify these.
A quick tour of documentation suggests you can specify the appearance of legend text using legend configuration options.
Worth looing into, the HTML legend call back may provide the means of making painted legends respond to CSS styling. See this related question Custom Legend with ChartJS v2.0
I need to display, for each quarter the label name of the serie's element data.name.
And in order to improve the user reliability I need to replace these labels by custom icons.
Here is my current Polar chart :
http://jsfiddle.net/eento/xnkabtfu/
Thanks a lot
You could use a single series and set legendType: 'point' in the series - less series gives better performance.
One way to solve your problem could be to to use Font Awesome icons. Example: http://jsfiddle.net/p48kpy0j/
To enable Font Awesome icons in exported image see a Highcharts plugin - example (source).
Another way might be to add images in dataLabels.formatter throught HTML's <img>. Example: http://jsfiddle.net/p48kpy0j/1/
I am trying to make a dynamic graph something like as below:
Y-axis gives no. of users and x axis date range(For continuous graph )
x axis gives release of an algo on that date.(For discontinued graph)
I tried combined charts of highchart this and looked in google charts library.
Is there any way by how i can either directly generate a similar chart or merge two chart types in to one? Preferably using high charts or google graphs.
I guess we can merge two highcharts in to one but I am not very sure about it, also if we can Iam not sure how to do that.
Any help is appreciated.
Thanks
I am aware that you said "Preferably using high charts or google graphs", but I want to point out that this can be done very easily in C3.js using the "types" parameter to specify the graph type for each data item.
Demo: http://c3js.org/samples/chart_combination.html
I would suggest using plot bands to indicate release dates and types. You can dynamically add them using the addPlotBand() method (see http://api.highcharts.com/highcharts#Axis.addPlotBand). They would then overlay your "run of the mill" line chart showing number of users over time.
Assuming you have data that can distinguish between the release types, you could write code that adds a plot band of the desired color at the specific points on the x-axis.
I'd suggest making the plot bands have a from and to value thin enough (say, one interval or one date's worth) so it shows up as the thin stripes in your example.
You'd need to add a manual legend to show users what those colors mean, since plot bands wouldn't automatically show up in a Highcharts legend.
I hope this helps!
I don't know where this question goes, if it belongs in math, then someone should move it there.
I have a set of yes/no data (0s and 1s), what possible ways could you visualise this, apart from the normal pie charts and the like.
I want to do this in Javascript (edit: jquery would be easier), using AJAX with PHP.
Radiobuttons or Checkboxes are usually used on webpages to display Yes/No choices. Another option would be to use images like a green check mark to display a positive value and a red cross to display a negative value.
There are many ways to display data. Are you looking to show it as a graph? If so, try google charts API.
Just the binary choice with no other criteria? (time, location, etc.)
A two element bar chart, two shapes (circles?) in different sizes and colors (like a disjoint Venn diagram), or a pie chart immediately comes to mind.
I have looked through the documentation and the only reference I can find is for different colour series. However I have only one data series and would like points/bars on that series different colours.
I could use multiple series and make points set to zero, which would have the same effect.
Is there a supported mechanism for having different colour bars in a bar graph using flot ?
There isn't built in support for using multiple colors in a single series.
Flot only allows specifying colors of the dots at the dataseries level, meaning each color must be its own dataseries. With this in mind, the solution is to make a single dataseries for each color.
There is a Flot plugin that allows you to set the color based on threshold values that you set. You can get the plugin code here: https://github.com/subhrajitroy/Flot-plugin/blob/master/jquery.flot.threshold.multiple.js
Flot is now shipped with a plugin that does just that.
Internally it splits a series into several series and assign a different color to each.
The plugin is in flot's github page here:
https://github.com/flot/flot/blob/master/jquery.flot.threshold.js