Different colour bars in a flot bar graph, is this possible? - javascript

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

Related

HTML5 chart stacked bars with repeated colors

I want to plot bars composed of a small but variable number of colored regions, with the same (three) colors appearing multiple times per bar. I'm aware of stacked bar charts in chart.js, but this uses the same number of colored regions (datasets) for each bar. Hacking it to plot a bunch of zero-length datasets to get the right number of colored regions in each bar feels wrong. That said, the tooltips, etc. in chart.js are nice, so if there's no more natural solution, maybe zero-length datasets are the way to go. Any thoughts?
So, instead of using chart.js, I think I'll use d3.js. Won't be hard to just plot the individual rectangles using d3.
For reference, an example that only has one bar per entry, but won't be hard to extend is the horizontal barplot shown here. (There's a simple intro to d3.js on the same site.)

Merge two or more graphs using library

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!

Highstocks Plotline multi-color

I have a Highstocks chart that shows events on a timeline. These events are represented by multiple different series of data, and I want to show the line between events in different colors representing past/future (not relating to the series themselves).
Using plotOptions.series.lineWidth: 8 results in a chart looking like this, due to the colors associated with different series (some of which contain only a single point):
If I set plotOptions.series.lineWidth: 0 and specify a plotline, I can achieve the desired view:
My question:
Is it possible to:
Show a y-axis plotline in 2 different colors depending on x-axis value? or
Create 2 y-axis plotlines and only partially display each? or
Draw shaded rectangles behind the markers rather than entire bands/lines?
to create something like this (assuming today was early 2021):
Any help much appreciated.
1/2) No, plotLine can contain single color, and you cannot limit widht of it
You can use renderer to add custom lines. http://api.highcharts.com/highcharts#Renderer.path

Coloured scatter-plots with javascript

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

How to visualise yes/no data

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.

Categories