How do I group legend entries using Chartjs? - javascript

Does Chartjs support grouping legend entries based on some fixed attribute? For example, say I'd like to group two legend entries and provide them a common heading 'Neuroscience'. Is this currently supported in the library?
Attached is an image of what I'm looking to do.

After more research, yes Chartjs provides an easy interface to customize the legend. Each chart accepts a legendCallback function that takes the chart object as it's only argument and returns a html string representing the legend.
See Chartjs docs for more info.

Related

Is there a way to show all values corresponding to a value on x-axis in the tooltip of Google Charts linechart?

I have a simple linechart with 2 lines. On hover, I would like to display both y-values in the tooltip that appears. I know I can accomplish this by writing a Javascript function that creates a custom tooltip for every x-value on the graph, but this seems so redundant to do, especially when the graph gets large. Since Google Chart is able to auto-generate the standard tooltip which contain both the x and y-value I feel like there should be an option to do this with built-in tools, is there?
Probably setting focusTarget to 'category' will do the trick.
See here for an example that uses it.

D3.js combining filtering by column value and using brush for zooming

I am new to D3.js and have been following examples on this website:
https://www.d3-graph-gallery.com/line.html
I am specifically trying to include a dropdown to filter by a column value and also include a brush for zooming.
The data I am using is simply country, date and covid_cases and I am trying to have an initial monthly line chart that can be zoomed in, while also having the ability to filter by country.
I have taken the code directly from these examples:
https://www.d3-graph-gallery.com/graph/line_brushZoom.html
https://www.d3-graph-gallery.com/graph/line_filter.html
I successfully altered them to fit my data, but am unable to combine them to enable both interactions.
Does anyone have any advice on how I might do this?

How to make map with overlaid column charts using highmaps

Highmaps provides a way to implement map with overlaid pie charts, is there a way to change pie with column?
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/map-pies/
The mappie series is not a part of Highcharts core. It is a custom series created with Highcharts.seriesType function (you can find it here: http://code.highcharts.com/highcharts.src.js) at the beginning of the demo. You can modify provided example and create series such as mapcolumn. Although, map is not very readable and tooltip does not work correctly when rendering columns instead of pies. You give it a try and create your own custom series.
Example:
http://jsfiddle.net/wsuhws7c/

How to create a donut chart like this in chart.js

I am not able to put text like 15% or 16% in the graph. I s there any way to do it.
Since the chart generation has changed a lot from Chart 1.X (docs) to 2.X (docs), it all depend on the version you are currently using for your project :
Version 1.X
Not available for Doughnut charts
If you are working with Pie charts, it is built in in the data you are passing to the chart.
See this jsFiddle for more information and a full result.
Version 2.X
Two methods :
You can create a new chart type using .extend() method.
Then during the creation of the new type, you draw the percentage in the section.
Check this jsFiddle to see the result (better than the first version, IMHO).
You can force the tooltip to always be enabled (as asked in this other question).
You will just have to edit what is displayed in the tooltip to put the percentage instead of the value. And also move (edit X and Y positions) the tooltip to appear where it should be.
The image displays a Pie chart, but you can make it work for a Doughnut.

D3.js (Wilkinson type) Dot Plot Example

I've searched, but been unable to find an example of a dot plot in D3. Is anyone aware of this type of plot having been implemented in any of the charting libraries built on D3, or an example in base D3?
Just to be clear, a dot plot is similar to a histogram except that points are stacked on top of one another in place of a histogram's bars. In R this can be created using the ggplot package.
qplot(x=rnorm(200),geom="dotplot")
Edit:
So as Lars pointed out, the answer to this question solves the problem when the data has been aggregated into an array with the number of points in a column. In my case, I want to display interactive information about each of the points (e.g. a tool tip with the actual underlying data value), so I can't aggregate in this way. Here is some example data that I'd like to plot.
data = [0.4897,0.7685,-0.7367,-0.7483,-0.5149,0.0448,-1.7294,1.8667,1.0116,0.3896,-0.4267,-0.1161,-1.4618,-1.3198,-1.999,1.2883,1.7123,-1.5902,-0.7937,1.0359,-0.485,-0.2391,0.4136,-0.2506,0.7333,1.1902,0.7132,-0.3096,0.4793,-0.7779,-0.19,-0.0855,1.4498,1.0196,0.537,0.5341,0.5363,0.2664,-0.8586,-0.5667,1.2263,1.508,-0.139,-0.3015,-0.3679,0.483,0.9381,-0.1298,-0.1024,1.3079,-0.9554,1.167,0.3245,1.0424,-0.3589,1.3943,2.2537,-1.3225,0.8814,-0.2723,0.3782,0.8982,0.4167,0.1614,0.5659,-0.4672,-0.7634,-0.8591,-1.0887,0.4374,0.3618,-0.7074,-0.9812,-0.6216,1.0774,0.9979,-0.799,1.186,0.5704,1.8626,1.4321,0.3179,1.6356,0.1646,2.1265,-0.2409,0.0043,1.1503,-1.615,-0.677,-0.5573,1.9954,0.8123,-0.8011,0.2088,0.5007,0.9113,-0.8742,-0.5857,0.409,-1.0702,-0.016,0.6822,1.0133,-1.2022,0.0561,0.8704,-1.5982,1.6676,-0.0344,-1.739,-2.0362,-1.1955,0.7838,0.5037,-0.2123,0.2951,1.0192,0.97,0.2384,-0.2223,-0.1448,0.9924,1.5586,1.4238,-2.4781,-0.2456,-1.8822,-0.4424,-0.5941,-0.9948,1.8733,-0.2242,-1.5359,-0.103,0.7378,0.7691,0.069,0.3952,-0.4267,-0.2077,-0.4327,-1.1705,0.0399,-0.6586,0.1043,2.9475,-0.4968,-0.5432,0.4924,1.2173,0.177,0.2861,-0.709,1.4922,-1.1633,-0.084,-1.2275,0.5193,0.2404,-1.4495,-0.3346,0.3153,-0.573,0.4139,-0.9114,1.4844,0.1166,0.8734,2.182,-0.3765,2.0888,1.1178,0.2684,-0.5803,0.893,0.2127,-0.107,0.0569,1.0699,0.2975,1.3017,0.4541,1.8337,0.7915,1.705,-0.2708,-0.9626,1.1994,-1.6666,1.2642,0.5244,-1.1757,0.9278,0.882,-0.8993,1.2435,0.3841,0.6815,-0.1459]
You could use the d3.histogram function to bin your data and then use a nested structure to draw your circles.
See this bl.ocks for the code and a live demo of a self updating dot plot, with interactive information displayed (tooltip) when you .mouseover a dot.
The dot plot has nothing to do with a histogram or binning. The method involving d3.histogram would not produce a dot plot. Plase read the reprint of my article at https://www.cs.uic.edu/~wilkinson/Publications/dotplots.pdf. The proper algorithm is given there.

Categories

Resources