How does it implement this chart with highcharts? - javascript

https://institutional.fidelity.com/app/item/RD_13569_45180/the-art-and-science-of-investment-decision-making.html
There is a very nice graph and pie chart under Investment Decision-Making in 2016.
I know it is highcharts now. I want to write something similar. But I can't find any chart type similar in its document.
Could you tell me what kind of chart it is? And how to put different data items inside the bubble.

It looks like a combination of line, bubble and pie series.
Line series (alternative: scatter with lineWidth > 0) lies under the bubbles. All interaction with this series should be disabled (hover state, tooltip, etc.).
Text inside the bubble is data label (dataLabels.enabled property should be set to true). You can manage its content in dataLabels.formattercallback function.
You can handle showing/adding pie (donut) charts in plotOptions.bubble.point.events.mouseover callback function. Text in the middle of a donut can be rendered via SVGRenderer.text().
All options that I mentioned can be found in the API: https://api.highcharts.com/highcharts/

Related

Make Tooltips not overlap in amCharts Scatterplot

I'd like to arrange tooltips to NOT overlap AND always be visible on a amcharts4 scatterplot chart.
The documentation reference
https://www.amcharts.com/docs/v4/concepts/tooltips/#Making_cursor_arrange_tooltips
A sample implementation showing that the tooltipText is placed on the series is not providing the needed effect:
https://codepen.io/whoweez/pen/NWqoMvm
The result needed is something like this:
https://drive.google.com/file/d/1OL5KR83MoNJqAck710EW_yoxfSbkr7EM/view?usp=sharing

Is there an after render event for Highchart bubble legend clicks?

For a Highchart bubble chart I've got a hook in the chart events for render such that it looks at the bubble and datalabel and that relocates the datalabel when an overlap with another label occurs. It also figures out the x,y of the bubble and datalabel and draws a leader line from the label to the bubble. That works pretty well except for the case when the legend item is clicked to filter the bubbles. When Highcharts moves stuff around in this case, the render event series data has the x,y values from BEFORE the move which goofs up where the lines are drawing to.
Optimally, I'd like like know when the chart is completed renderering after the legend filter changes, then I can run the same logic to avoid collisions. At the moment, the collision logic I have is getting the location values before the legend filter process has laid out the elements. When I debug and toggle on/off the legend filter I see the new location in the series point datalabels so it leads me to believe the new values are there after the legend filter layout does it's thing.

Javascript / Adjusting colors

We are using this chart. I see there is no property available to customize the colors of the pie chart.
Is there a way to customize the colors ?
Also how can we enable legend for this (if we could display legend in the bottom of the graph, it could be great. i.e like this )? and display only percentage on the graph?
To make the graph exploded, i see we need to use ["pulled": true] in the dataProvider. Instead of providing it inside the dataProvider, is there a way to provide somewhere outside ?
There are two ways to customize colors
1) Use the colorField and define the colors directly for individual slices.
2) Set your own theme by modifying the colors array or create your own theme.
Legends are enabled by setting an empty legend object in the chart config. You can find further configuration properties in the documentation. You can even change the value label to use percentages by modifying the valueText property. There's also an example of a pie chart with the legend set up and a completely custom legend.
If you want to change the pie slices labels, change the labelText.
As for your last question, no - it's using pulledField to specify which slices are pulled out in your data. There isn't a setting to explode the entire chart without it.

how to synchronize multiple d3 charts when zoomed?

function chart (data, selector) {
// generate chart with zoom feature. it scales the X domain and update the chart accordingly.
}
chart(dataset1, "#chart1")
chart(dataset2, "#chart2")
chart(datasetn, "#chartn")
the code above is a chart generator function which I give it different datasets to make me charts. in all charts, the dataset has the same X values but different Y values.
problem:
lets say we have 3 charts, all the X axis ranges are between 0-100. In the first chart, I drag mouse and create a zoombox between 30-60 and the first chart updates, now it is scaled between 30-60. But the second and third chart are intact. I need them to be updated as well between 30-60.
similarly if I do the same for second chart, I need the first and third one get updated.
here is jsfiddle to illustration
I made not so big modification to make this works.
First of all we remember globally the information about single chart in var charts array. This is done during creation of charts
charts.push(lineChart(data1,"#chart1"));
charts.push(lineChart(data2,"#chart2"));
charts.push(lineChart(data3,"#chart3"));
Next we can use this array in function zoomdrag and update.
This work maybe not perfect (reset of chart is missing) but show how to handle it and get the same zoom in all charts.
Here is jsfiddle

Chart.js ungroup data in tooltip with multiple lines

I'm looking for an answer similar to a previous question:
Link: chart js tooltip how to control the data that show
But I need a solution for a Line Chart via Chart.js. I'm wanting a line chart with multiple lines and I would like each point to return only the data for that point in the tooltip. By default the tooltip returns data in a group for each point at the index you hover over. So I would want each point to only return it's data and have it's own tooltip box.
See default example of line chart : http://www.chartjs.org/docs/#line-chart
It would also be nice if I could have all the tooltips displayed by default and not triggered by a mouse hover.

Categories

Resources