We Keep Coding

Echarts React: Create dataset with multiple values per cell

I am trying to create a dataset in Echarts for React that includes both scatter and bar plot data in order to do cross filtering.
The dataset for the scatter plot is a 2d array in the following format:
const dataset = [
['Q1_x', 'Q1_y'],
[30, 50],
[22, 43],
[11, 77],
];
I have multiple choice questions where I want to display the count for each choice in a bar plot.
For example the question: What ice cream flavor is your favorite? (can select more than one)
Strawberry
Vanilla
Chocolate
In the JSON it has the following format (for two responses):
const responses = [
{
labels: {
QID19: ['Strawberry', 'Vanilla'],
},
},
{
labels: {
QID19: ['Chocolate'],
},
},
];
As you can see in the JSON, when more than one option is selected, it's an array.
I know how to get the counts of each option.
My specific question is how to include that in the main dataset that I have for the scatter above?
Should each option in the MCQ be a separate column (i.e., dimension)? Or should I join the array items into one string and include that as a cell in the dataset?
I want to eventually be able to cross-filter. For example, select only the scatter plots where the person selected "Chocolate" in the bar plot.
Any advice on how to proceed is appreciated. I'm looking for a general direction on implementation in Echarts (not necessarily specific code)

Using Vue Google Chart - Geochart. Chart reloads on data change, but legend gets dropped

I am using vue google charts in my nuxt project. When I change date selections, the data is mutated, and the computed method in my geochart component reads the correct new data.... But the legend at the bottom (color bar) does not work like it should... Instead it reads NaN NaN...As a result, the chart shows the correct data, but not the correct color coding. Screenshot attached for clarity. (Mouseover on the countries shows the correct data, but since the color mapping is not kicking in, the two countries show the same color shade, despite the values being significantly different)
This is how I am loading the chart:
<GChart
:settings="{ packages: ['geochart'], mapsApiKey: '<usingmapsapikeyhere>' }"
type="GeoChart"
:data="countriesForMap"
:options="chartOptions"
ref="gChart"
/>
countriesForMap ----
computed: {
...mapState(["countriesForMap"]),
}

I figured it out. Instead of updating the array, my mutation was appending new data to the same array, which was making the array unusable. I am not sure why it was still reflecting the correct data on the map, but now that I have changed the mutation code, it is working fine now.
For example,
The initial array looked like
[
["Country", "Data"],
["India", 42],
["Japan", 12]
]
Because of the wrongly set up mutation function, my new data array was looking like this:
[
["Country", "Data"],
["India", 42],
["Japan", 12],
["Country", "Data"],
["India", 23],
["Japan", 7]
]
Fixing that solved the problem.

Can I ignore Highcharts Error #15 untill the functionality is working as expected

I have a highchart which has both columnRange and column in it. Initially I had few problems in building the data but later I managed to get what I expected to see. The issue is I see a lot of highcharts error #15 in the console which is a data sorting issue as per documentation. How can I get rid of them or Can I ignore them ?

You shouldn't ignore the Highcharts error #15, everything may seem fine at first, but bugs may arise with chart interactions. To get rid of the error just sort your data before creating the chart.
var data = [
[5, 9],
[1, 11],
[2, 13]
];
data.sort((a, b) => a[0] - b[0]);
Live demo: http://jsfiddle.net/BlackLabel/fh56vqpo/

obtaining data values on two different places within a webpage

I have a chart in this jsfiddle link
var data = [
[2,2],
[3,3],
[4,4],
[5, 4],
[5.5, 5],
[6, 6],
[6, 7],
[4,5],
[7,9],
[7,10]
];
How do I put the datapoints above the chart and create a link between the chart above and the chart below. I want to link the datapoints on the chart below with those on the chart above. i.e. one data source plotting data on two quadrants above and below. The first chart(chart above) must have only datapoints without lines. How do I achieve this ?

Here is a FIDDLE that implements what I mentioned in my comments with minimal changes to the code. However, I strongly suggest that you re-arrange the current code. Basically, you want to find what is common in the construction of both charts and factor out the code. (Also, the current code order is inverted because you first started with the lower chart and then decided on a second one to be located above the first.)
var chart2 = d3.select('#nolines')
.append('svg:svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom/4)
.attr('class', 'chart');

It's possible to have line charts with irregular data series (not time series) in javascript / html5? Are there libraries for that?

I need a javascript (HTML4/5) based library to draw a line chart that has irregular data (and one or more series).
Here is an example:
x-axis = [1, 2, 3, 4, 5, 6, 7, 8]
series1 (y-axis) = [6, 10, null, 8, null, 7, 6, 4]
series2 (y-axis) = [null, 8, 8, null, 1, 3, 5, 4]
In this chart the nulls are not taken in consideration; are in some way "skipped" and the line goes directly into the next value. Of course i want to highlight the points to know if a point is or isn't there at that x value.
There are some of this charts with irregular data based on time series (like this highcharts.com/demo/spline-irregular-time) but i need that defining my own (regular) x-axis.
What do you suggest?

Highcharts can accept irregular data without using times.
Basically, you take the example that you posted, and remove the type: 'datetime' option, and specify numbers instead of dates in the series.
I have posted an example here: http://jsfiddle.net/TRLhc/