How to synchronize Highcharts? - javascript

I have three graphs:
A line graph time series with only 1 line on it
A line graph time series with n lines on it (n could be 5 could be 50)
A histogram (actually a stacked column chart)
Graph 1 & 2 have the same timeseries axis and therefore they should have a shared zoom (accomplished) and same tooltip.
I have used this demo: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/synchronized-charts/
and this jquery: Highcharts Synchronized charts display tooltip
to get exactly what I wanted for graph 1 & 2.
However when I added graph 3 a few strange things happened:
The tooltip is now shared with the histogram (it shouldn't be -- histograms aren't time-series)
The x-zoom now zooms on the histogram creating a time-series axis?
The shared tooltip doesn't work between graph 1 & 2 now
The perfect solution would be to have a histogram that also filtered as the histogram is measured off graph 1. (NB: lots of data is clipped for the jsfiddle)
pretend this is a code snippet so I can link jsfiddle
Fiddle:
https://jsfiddle.net/cj2tdy7v/1/

Related

Antd Charts - Area chart series values plot relative to last series

I'm trying to use Ant Design charts to plot an area chart with 3 series - actual, target and forecast. For some reason, the chart plots the series relative to the last item in the array, rather than relative to the x axis. I tried setting the startOnZero: true but that didn't help.
See below example:
In this example, the target is 220 and the actual is 1558, but the target point is higher on the y axis. Recreated:
https://codesandbox.io/s/beautiful-grothendieck-qtjj7?file=/App.tsx:8366-8384
If we put the 'Target' values to the bottom of the data array, it works fine for some reason:
By default it creates a stacked chart. You can set isStack to false.

Nivo d3 react chart - How can i set the bin-size and y-axis for nivo chart

Im using nivo.rocks which is a library built on top of d3.js. I need to build a marimekko graph like the histogram shown below. I want it to show the number of days a temperature was x faranheit.
I'm trying to set the x-axis as the AvgTempF from lowest temp to highest
The y-axis needs to be the number of dates that the temp was between two numbers. For example, if one bar was 12F to 20F, the count would be number of days it was in that range (if that makes sense)
The bar should have same thickness
something like this:
right now this is what I have :
https://codesandbox.io/s/agitated-paper-947cz

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

How to refilter others dc.js charts when brush is off after being on?

[Please, follow the image during reading the instructions.]
I have a line chart (1.b) which is used to zoom in a bar chart (1.a) and to select items in a scatter plot (2).
Once I brush the line chart (1.b), the others graphs (1.a and 2) apply the filter perfectly. When I turn off the brush the bar chart zoom out, given me the whole scope of the data back, but the scatter plot (2) does not make the dots appear again.
Please, see last scenario from top to bottom. Scatter plot keeps the previous filter.
what could I do to reset it in case the brush is off in line chart (1.b)?

dc.js generate a pieChart with top 5 values

I'm visualizing a drug database of 200 entries. I've created a piechart using DC.js to show the frequency of each drug. The pie chart is cluttered with drugs that appear once.
I want to adjust this pie chart so that it visualizes the top 5 most used drugs i.e. the top 5 biggest slices of the pie chart.
Is there a way to use the .group() or .reduceSum() methods so only the biggest pie chart slices are shown?
As answered on the user group: Use the functions of the Cap Mixin, which is a base of the pie chart:
var pie = dc.pieChart("#pie-chart");
[...]
pie.cap(5);

Categories

Resources