Echarts React: Create dataset with multiple values per cell - javascript

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)

Related

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.

How to make intermittent lines to represent periods of presence and absence on a given line during it's length on Multi Axis chart?

I have a multiaxis chart that represent the historic statistic of positions for mexican soccer teams during the whole existance of the Mexican league itself.
Some of those teams either disappear, change identity or have bad results and are downgraded to 2nd League.
However, Multilinear Axis chart seems to represent only constant lines, thus I cannot nullify a period or epoch in the chart for some teams.
Example:
http://eliezer.rocks/ligamx/historico.php
Note: since only 20 positions exist in the league, and in the chart, I assign a obviously off-the-limits for teams whom disappeared. Such as position 25, but this is not the best. Maybe we should be able to represent periods on the charts.
Went through documentation, tried myself to understand the code and add the feature but failed.
http://eliezer.rocks/ligamx/historico.php
It's all unencoded, unencrypted.
As a Chart.js user
I would like to be able to nullify periods for a line in multi axis chart,
So I can represent use case of a line with epochs or periods.
Oh deer, you just need to put null values in the json to make lines disappear for an occurrence.
{
label: 'CELAYA',
borderColor: window.chartColors.Color2,
backgroundColor: window.chartColors.Color2,
fill: false,
data: [
null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,-17,null,-16,-16,-18,-16,-15,-14,-11,-8,-11,-17,-16,-17,null,null,null,null,null,null,null,null,null,null, ],
yAxisID: 'y-axis-42',
},

DimpleJS - Limit the number of category axis values to be displayed in chart

For preparing graphs from data that exists in MySQL tables, I am using DimpleJS framework. I am able to plot graphs, everything works. One question though -
In a simple bar chart, with category values on X axis and measure values on Y axis, is there a way to limit the number of X axis categories being displayed? Example, let's say this is my data set: [(A,1), (B,2), (C,1), (D,5), (E,4)]
So in my dataset, there are 5 categories (X axis - A, B,C,D,E) and corresponding measures that I will be displaying in Y axis. Question is, I just want to display only 3 of the measures - let's say only first three, in this case (A,1), (B,2) and (C,1), although my dataset has two more (D,5) and (E,4).
Is there any way to restrict it in JS/ DimpleJS? I have limited control on the dataset that is coming in.
Thanks.
Use dimple.filterData after you receive the dataset but before you provide the data to dimple. This does not mutate the data so won't affect any other operations. I'm not sure what your actual category field is but it should look similar to this :
var chartData = dimple.filterData(originalDataset, 'category', ["A", "B", "C"]);
var chart = new dimple.chart(svg, chartData);
Otherwise there is not a provided way to restrict a category axis from showing values present in the data.

d3.js sorting graph by both axes

I'm currently plotting a list of numbers (y-axis) against a list of titles (x-axis). Each number can correspond to multiple websites. Right now I've been using the ascending function provided by d3 to sort them. I've currently got a drop-down menu in which I can pick either number or title and each option individually sorts by the respective choice. However, I was wondering if there was a way so that I could sort alphabetically by title, and then keeping it alphabetical, also sort by number. As of now I can only do one or the other.
Example:
My data is stored in a CSV like this:
"id","name"
1,"youtube"
1,"google"
2,"google"
3,"nike"
4,"google"
Then I use
d3.csv("csvTestFile.csv", function (dataset)
to read in the file and I convert the id number to ints.
To sort I do the following:
data.sort(function(a, b) { return d3.ascending(a.id, b.id)});
To sort by ID. To sort by name I do this:
data.sort(function(a, b) { return d3.ascending(a.name, b.name)});
Both of these work properly, however I would like to first sort by ID, then also sort by Name. So the axis would display (starting from the origin) 1, 2, 3, 4 up the y-axis, and google, nike, youtube down the x-axis. Right now if I try to sort it will either be 1, 2, 3, 4 up to the y-axis and youtube, google, nike down the x-axis OR google, youtube, nike down the x-axis with 1, 2, 4, 3 up the y-axis.
What I want is 1, 2, 3, 4 up the y-axis (sorted numerically) and google, nike, youtube down the x-axis (sorted alphabetically) at the same time. Given this is a scatterplot it should be something simply like rearranging the ticks on the axis but I'm not quite sure how to go about doing it.
The order in which input values are mapped to output values for a categorical scale depends on the order in which they are given to .domain(). All you need to do to achieve what you want is to sort the values accordingly when you create the scale, i.e. something like
var scale = d3.scale.ordinal()
.domain(data.sort(function(a, b) { return d3.ascending(a.name, b.name); }))
.range([...]);

How can I manually feed the inputs of a Highcharts' Master detail chart?

I want to use the Highcharts' Master detail chart as visualized here: http://www.highcharts.com/demo/dynamic-master-detail
However, I don't want to use intervals in order for the script to automatically assign Date values to each point of data, because my data are not necessarily continuous. E.g. I might have data for one minute and nothing for the next minute.
Ideally, I want to visualize three days in this chart. Each point will be a value of a specific minute of a specific date.
Any suggestions how I can do that? I don't mind using other libraries, if that's necessary.
Let me know if I didn't make myself clear or if you need more information.
Thank you.
The data properties in the series object can except either an array of values, in which case it will assume data to be equally spaced. Alternatively you can pass an array of arrays, where the outer array has size same as number of points, and each element of this array is another array of size 2, with first element as epochTime and the 2nd being the value. There is also a third option as explained below
Documentation # http://www.highcharts.com/stock/ref/#series--data
Excerpt of the documentation
data : Array<Mixed>
An array of data points for the series. The series object is expecting the points to be ordered from low to high. The reason for this is to increase performance. While in many cases the data is fetched from a server, it's also more convenient to sort on the server and thereby save on client resources. The points can be given in three ways:
A list of numerical values. In this case, the numerical values will be interpreted as y values, and x values will be automatically calculated, either starting at 0 and incrementing by 1, or from pointStart and pointInterval given in the plotOptions. Example:
data: [0, 5, 3, 5]
A list of arrays with two values. In this case, the first value is the x value and the second is the y value. If the first value is a string, it is applied as the name of the point, and the x value is incremented following the above rules. Example:
data: [[5, 2], [6, 3], [8, 2]]
A list of object with named values. In this case the objects are point configuration objects as seen under options.point. Example:
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
View JSFiddle Example

Categories