Echart vs 5: I cannot get Sliders in three containers combined to work as one

Echart vs 5: I cannot get Sliders in three containers combined to work as one - echarts

I have succeeded in making three charts (containers) above each other in ECHARTS v5 and all works fine. However, I need all three sliders to work as one. Meaning that if I change one slider the other two must do exactly the same so the x-Axis data remains the same to make comparison easier.
Is this possible and if yes how? <Remark: Has been answered by 'A mere dev' and the solution is in the code below >.
Now need to add an additional candle chart in myChart1 part to show Heikin Ashi candles with on off toggle just like the lines in myChart1.
< made a new question if this: Link to this question>
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container1" style="height: 34%"></div>
<div id="container2" style="height: 33%"></div>
<div id="container3" style="height: 33%"></div>
<script type="text/javascript" src="echarts.min_All.js"></script>
<script type="text/javascript">
//===========================================================================================================
var dom1 = document.getElementById("container1");
var myChart1 = echarts.init(dom1);
var app = {};
var option1;
const upColor = '#00da3c';
const upBorderColor = '#008F28';
const downColor = '#ec0000';
const downBorderColor = '#8A0000';
// Each item: open，close，lowest，highest
const data0 = splitData([
['2013/1/24', 2320.26, 2320.26, 2287.3, 2362.94],
['2013/1/25', 2300, 2291.3, 2288.26, 2308.38],
['2013/1/28', 2295.35, 2346.5, 2295.35, 2346.92],
['2013/1/29', 2347.22, 2358.98, 2337.35, 2363.8],
['2013/1/30', 2360.75, 2382.48, 2347.89, 2383.76],
['2013/1/31', 2383.43, 2385.42, 2371.23, 2391.82],
['2013/2/1', 2377.41, 2419.02, 2369.57, 2421.15],
['2013/2/4', 2425.92, 2428.15, 2417.58, 2440.38],
['2013/2/5', 2411, 2433.13, 2403.3, 2437.42],
['2013/2/6', 2432.68, 2434.48, 2427.7, 2441.73],
['2013/2/7', 2430.69, 2418.53, 2394.22, 2433.89],
['2013/2/8', 2416.62, 2432.4, 2414.4, 2443.03],
['2013/2/18', 2441.91, 2421.56, 2415.43, 2444.8],
['2013/2/19', 2420.26, 2382.91, 2373.53, 2427.07],
['2013/2/20', 2383.49, 2397.18, 2370.61, 2397.94],
['2013/2/21', 2378.82, 2325.95, 2309.17, 2378.82],
['2013/2/22', 2322.94, 2314.16, 2308.76, 2330.88],
['2013/2/25', 2320.62, 2325.82, 2315.01, 2338.78],
['2013/2/26', 2313.74, 2293.34, 2289.89, 2340.71],
['2013/2/27', 2297.77, 2313.22, 2292.03, 2324.63],
['2013/2/28', 2322.32, 2365.59, 2308.92, 2366.16],
['2013/3/1', 2364.54, 2359.51, 2330.86, 2369.65],
['2013/3/4', 2332.08, 2273.4, 2259.25, 2333.54],
['2013/3/5', 2274.81, 2326.31, 2270.1, 2328.14],
['2013/3/6', 2333.61, 2347.18, 2321.6, 2351.44],
['2013/3/7', 2340.44, 2324.29, 2304.27, 2352.02],
['2013/3/8', 2326.42, 2318.61, 2314.59, 2333.67],
['2013/3/11', 2314.68, 2310.59, 2296.58, 2320.96],
['2013/3/12', 2309.16, 2286.6, 2264.83, 2333.29],
['2013/3/13', 2282.17, 2263.97, 2253.25, 2286.33],
['2013/3/14', 2255.77, 2270.28, 2253.31, 2276.22],
['2013/3/15', 2269.31, 2278.4, 2250, 2312.08],
['2013/3/18', 2267.29, 2240.02, 2239.21, 2276.05],
['2013/3/19', 2244.26, 2257.43, 2232.02, 2261.31],
['2013/3/20', 2257.74, 2317.37, 2257.42, 2317.86],
['2013/3/21', 2318.21, 2324.24, 2311.6, 2330.81],
['2013/3/22', 2321.4, 2328.28, 2314.97, 2332],
['2013/3/25', 2334.74, 2326.72, 2319.91, 2344.89],
['2013/3/26', 2318.58, 2297.67, 2281.12, 2319.99],
['2013/3/27', 2299.38, 2301.26, 2289, 2323.48],
['2013/3/28', 2273.55, 2236.3, 2232.91, 2273.55],
['2013/3/29', 2238.49, 2236.62, 2228.81, 2246.87],
['2013/4/1', 2229.46, 2234.4, 2227.31, 2243.95],
['2013/4/2', 2234.9, 2227.74, 2220.44, 2253.42],
['2013/4/3', 2232.69, 2225.29, 2217.25, 2241.34],
['2013/4/8', 2196.24, 2211.59, 2180.67, 2212.59],
['2013/4/9', 2215.47, 2225.77, 2215.47, 2234.73],
['2013/4/10', 2224.93, 2226.13, 2212.56, 2233.04],
['2013/4/11', 2236.98, 2219.55, 2217.26, 2242.48],
['2013/4/12', 2218.09, 2206.78, 2204.44, 2226.26],
['2013/4/15', 2199.91, 2181.94, 2177.39, 2204.99],
['2013/4/16', 2169.63, 2194.85, 2165.78, 2196.43],
['2013/4/17', 2195.03, 2193.8, 2178.47, 2197.51],
['2013/4/18', 2181.82, 2197.6, 2175.44, 2206.03],
['2013/4/19', 2201.12, 2244.64, 2200.58, 2250.11],
['2013/4/22', 2236.4, 2242.17, 2232.26, 2245.12],
['2013/4/23', 2242.62, 2184.54, 2182.81, 2242.62],
['2013/4/24', 2187.35, 2218.32, 2184.11, 2226.12],
['2013/4/25', 2213.19, 2199.31, 2191.85, 2224.63],
['2013/4/26', 2203.89, 2177.91, 2173.86, 2210.58],
['2013/5/2', 2170.78, 2174.12, 2161.14, 2179.65],
['2013/5/3', 2179.05, 2205.5, 2179.05, 2222.81],
['2013/5/6', 2212.5, 2231.17, 2212.5, 2236.07],
['2013/5/7', 2227.86, 2235.57, 2219.44, 2240.26],
['2013/5/8', 2242.39, 2246.3, 2235.42, 2255.21],
['2013/5/9', 2246.96, 2232.97, 2221.38, 2247.86],
['2013/5/10', 2228.82, 2246.83, 2225.81, 2247.67],
['2013/5/13', 2247.68, 2241.92, 2231.36, 2250.85],
['2013/5/14', 2238.9, 2217.01, 2205.87, 2239.93],
['2013/5/15', 2217.09, 2224.8, 2213.58, 2225.19],
['2013/5/16', 2221.34, 2251.81, 2210.77, 2252.87],
['2013/5/17', 2249.81, 2282.87, 2248.41, 2288.09],
['2013/5/20', 2286.33, 2299.99, 2281.9, 2309.39],
['2013/5/21', 2297.11, 2305.11, 2290.12, 2305.3],
['2013/5/22', 2303.75, 2302.4, 2292.43, 2314.18],
['2013/5/23', 2293.81, 2275.67, 2274.1, 2304.95],
['2013/5/24', 2281.45, 2288.53, 2270.25, 2292.59],
['2013/5/27', 2286.66, 2293.08, 2283.94, 2301.7],
['2013/5/28', 2293.4, 2321.32, 2281.47, 2322.1],
['2013/5/29', 2323.54, 2324.02, 2321.17, 2334.33],
['2013/5/30', 2316.25, 2317.75, 2310.49, 2325.72],
['2013/5/31', 2320.74, 2300.59, 2299.37, 2325.53],
['2013/6/3', 2300.21, 2299.25, 2294.11, 2313.43],
['2013/6/4', 2297.1, 2272.42, 2264.76, 2297.1],
['2013/6/5', 2270.71, 2270.93, 2260.87, 2276.86],
['2013/6/6', 2264.43, 2242.11, 2240.07, 2266.69],
['2013/6/7', 2242.26, 2210.9, 2205.07, 2250.63],
['2013/6/13', 2190.1, 2148.35, 2126.22, 2190.1],
]);
//-----------------------------------------------------
const data1 = splitData([
['2013/1/24', 2320.26, 2320.26, 2287.3, 2362.94],
['2013/1/25', 2300, 2291.3, 2288.26, 2308.38],
['2013/1/28', 2295.35, 2346.5, 2295.35, 2346.92],
['2013/1/29', 2347.22, 2358.98, 2337.35, 2363.8],
['2013/1/30', 2360.75, 2382.48, 2347.89, 2383.76],
['2013/1/31', 2383.43, 2385.42, 2371.23, 2391.82],
['2013/2/1', 2377.41, 2419.02, 2369.57, 2421.15],
['2013/2/4', 2425.92, 2428.15, 2417.58, 2440.38],
['2013/2/5', 2411, 2433.13, 2403.3, 2437.42],
['2013/2/6', 2432.68, 2434.48, 2427.7, 2441.73],
['2013/2/7', 2430.69, 2418.53, 2394.22, 2433.89],
['2013/2/8', 2416.62, 2432.4, 2414.4, 2443.03],
['2013/2/18', 2441.91, 2421.56, 2415.43, 2444.8],
['2013/2/19', 2420.26, 2382.91, 2373.53, 2427.07],
['2013/2/20', 2383.49, 2397.18, 2370.61, 2397.94],
['2013/2/21', 2378.82, 2325.95, 2309.17, 2378.82],
['2013/2/22', 2322.94, 2314.16, 2308.76, 2330.88],
['2013/2/25', 2320.62, 2325.82, 2315.01, 2338.78],
['2013/2/26', 2313.74, 2293.34, 2289.89, 2340.71],
['2013/2/27', 2297.77, 2313.22, 2292.03, 2324.63],
['2013/2/28', 2322.32, 2365.59, 2308.92, 2366.16],
['2013/3/1', 2364.54, 2359.51, 2330.86, 2369.65],
['2013/3/4', 2332.08, 2273.4, 2259.25, 2333.54],
['2013/3/5', 2274.81, 2326.31, 2270.1, 2328.14],
['2013/3/6', 2333.61, 2347.18, 2321.6, 2351.44],
['2013/3/7', 2340.44, 2324.29, 2304.27, 2352.02],
['2013/3/8', 2326.42, 2318.61, 2314.59, 2333.67],
['2013/3/11', 2314.68, 2310.59, 2296.58, 2320.96],
['2013/3/12', 2309.16, 2286.6, 2264.83, 2333.29],
['2013/3/13', 2282.17, 2263.97, 2253.25, 2286.33],
['2013/3/14', 2255.77, 2270.28, 2253.31, 2276.22],
['2013/3/15', 2269.31, 2278.4, 2250, 2312.08],
['2013/3/18', 2267.29, 2240.02, 2239.21, 2276.05],
['2013/3/19', 2244.26, 2257.43, 2232.02, 2261.31],
['2013/3/20', 2257.74, 2317.37, 2257.42, 2317.86],
['2013/3/21', 2318.21, 2324.24, 2311.6, 2330.81],
['2013/3/22', 2321.4, 2328.28, 2314.97, 2332],
['2013/3/25', 2334.74, 2326.72, 2319.91, 2344.89],
['2013/3/26', 2318.58, 2297.67, 2281.12, 2319.99],
['2013/3/27', 2299.38, 2301.26, 2289, 2323.48],
['2013/3/28', 2273.55, 2236.3, 2232.91, 2273.55],
['2013/3/29', 2238.49, 2236.62, 2228.81, 2246.87],
['2013/4/1', 2229.46, 2234.4, 2227.31, 2243.95],
['2013/4/2', 2234.9, 2227.74, 2220.44, 2253.42],
['2013/4/3', 2232.69, 2225.29, 2217.25, 2241.34],
['2013/4/8', 2196.24, 2211.59, 2180.67, 2212.59],
['2013/4/9', 2215.47, 2225.77, 2215.47, 2234.73],
['2013/4/10', 2224.93, 2226.13, 2212.56, 2233.04],
['2013/4/11', 2236.98, 2219.55, 2217.26, 2242.48],
['2013/4/12', 2218.09, 2206.78, 2204.44, 2226.26],
['2013/4/15', 2199.91, 2181.94, 2177.39, 2204.99],
['2013/4/16', 2169.63, 2194.85, 2165.78, 2196.43],
['2013/4/17', 2195.03, 2193.8, 2178.47, 2197.51],
['2013/4/18', 2181.82, 2197.6, 2175.44, 2206.03],
['2013/4/19', 2201.12, 2244.64, 2200.58, 2250.11],
['2013/4/22', 2236.4, 2242.17, 2232.26, 2245.12],
['2013/4/23', 2242.62, 2184.54, 2182.81, 2242.62],
['2013/4/24', 2187.35, 2218.32, 2184.11, 2226.12],
['2013/4/25', 2213.19, 2199.31, 2191.85, 2224.63],
['2013/4/26', 2203.89, 2177.91, 2173.86, 2210.58],
['2013/5/2', 2170.78, 2174.12, 2161.14, 2179.65],
['2013/5/3', 2179.05, 2205.5, 2179.05, 2222.81],
['2013/5/6', 2212.5, 2231.17, 2212.5, 2236.07],
['2013/5/7', 2227.86, 2235.57, 2219.44, 2240.26],
['2013/5/8', 2242.39, 2246.3, 2235.42, 2255.21],
['2013/5/9', 2246.96, 2232.97, 2221.38, 2247.86],
['2013/5/10', 2228.82, 2246.83, 2225.81, 2247.67],
['2013/5/13', 2247.68, 2241.92, 2231.36, 2250.85],
['2013/5/14', 2238.9, 2217.01, 2205.87, 2239.93],
['2013/5/15', 2217.09, 2224.8, 2213.58, 2225.19],
['2013/5/16', 2221.34, 2251.81, 2210.77, 2252.87],
['2013/5/17', 2249.81, 2282.87, 2248.41, 2288.09],
['2013/5/20', 2286.33, 2299.99, 2281.9, 2309.39],
['2013/5/21', 2297.11, 2305.11, 2290.12, 2305.3],
['2013/5/22', 2303.75, 2302.4, 2292.43, 2314.18],
['2013/5/23', 2293.81, 2275.67, 2274.1, 2304.95],
['2013/5/24', 2281.45, 2288.53, 2270.25, 2292.59],
['2013/5/27', 2286.66, 2293.08, 2283.94, 2301.7],
['2013/5/28', 2293.4, 2321.32, 2281.47, 2322.1],
['2013/5/29', 2323.54, 2324.02, 2321.17, 2334.33],
['2013/5/30', 2316.25, 2317.75, 2310.49, 2325.72],
['2013/5/31', 2320.74, 2300.59, 2299.37, 2325.53],
['2013/6/3', 2300.21, 2299.25, 2294.11, 2313.43],
['2013/6/4', 2297.1, 2272.42, 2264.76, 2297.1],
['2013/6/5', 2270.71, 2270.93, 2260.87, 2276.86],
['2013/6/6', 2264.43, 2242.11, 2240.07, 2266.69],
['2013/6/7', 2242.26, 2210.9, 2205.07, 2250.63],
['2013/6/13', 2190.1, 2148.35, 2126.22, 2190.1],
]);
//-----------------------------------------------------
function splitData(rawData) {
const categoryData = [];
const values = [];
for (var i = 0; i < rawData.length; i++) {
categoryData.push(rawData[i].splice(0, 1)[0]);
values.push(rawData[i]);
}
return {
categoryData: categoryData,
values: values
};
}
function calculateMA(dayCount) {
var result = [];
for (var i = 0, len = data0.values.length; i < len; i++) {
if (i < dayCount) {
result.push('-');
continue;
}
var sum = 0;
for (var j = 0; j < dayCount; j++) {
sum += +data0.values[i - j][1];
}
result.push(sum / dayCount);
}
return result;
}
option1 = {
title: {
text: 'Candlesticks and Lines',
left: 0
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data: ['Candles', 'HACandles', 'MA5', 'MA10', 'MA20', 'Indicatorline_1', 'Indicatorline_2']
},
grid: {
left: '3%',
right: '5%',
bottom: '17%'
},
toolbox: {
right: '3%',
feature: {
restore: { show: true },
saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: data0.categoryData,
boundaryGap: false,
axisLine: { onZero: false },
splitLine: { show: false },
min: 'dataMin',
max: 'dataMax'
},
yAxis: {
scale: true,
splitArea: {
show: true
}
},
dataZoom: [
{
type: 'inside',
start: 50,
end: 100,
},
{
show: true,
type: 'slider',
top: '8%',
start: 50,
end: 100,
height: 20,
handleSize: '100%'
}
],
series: [
{
name: 'Candles',
type: 'candlestick',
data: data0.values,
itemStyle: {
color: upColor,
color0: downColor,
borderColor: upBorderColor,
borderColor0: downBorderColor
},
//-------------------------------------------
name: 'HACandles',
type: 'candlestick',
data: data1.values,
itemStyle: {
color: upColor,
color0: downColor,
borderColor: upBorderColor,
borderColor0: downBorderColor
},
//----------------------------------------
markPoint: {
label: {
formatter: function (param) {
return param != null ? Math.round(param.value) + '' : '';
}
},
data: [
{
name: 'Mark1',
coord: ['2013/5/31', 2230],
value: 12,
itemStyle: {
color: 'rgb(0,204,102)'
}
},
{
name: 'Mark2',
coord: ['2013/6/4', 2250],
value: 12,
itemStyle: {
color: 'rgb(41,60,85)'
}
},
],
tooltip: {
formatter: function (param) {
return param.name + '<br>' + (param.data.coord || '');
}
}
},
//----------------------------------------------------
markLine: {
symbol: ['none', 'none'],
data: [
//-------------------------------------
[
{
name: 'Position_01',
type: 'min',
coord: ['2013/5/31', 2230],
symbol: 'circle',
symbolSize: 10,
itemStyle: {
color: 'rgb(0,204,102)'
},
label: {
show: false
},
emphasis: {
label: {
show: false
}
}
},
{
type: 'max',
coord: ['2013/6/4', 2250],
symbol: 'circle',
symbolSize: 10,
label: {
show: false
},
emphasis: {
label: {
show: false
}
},
},
],
//-------------------------------------
[
{
name: 'Position_02', //from lowest to highest
type: 'min',
coord: ['2013/5/6', 2230],
symbol: 'circle',
symbolSize: 10,
itemStyle: {
color: 'rgb(255,0,0)'
},
label: {
show: true
},
emphasis: {
label: {
show: true
}
}
},
{
type: 'max',
coord: ['2013/5/14', 2200],
symbol: 'circle',
symbolSize: 10,
label: {
show: true
},
emphasis: {
label: {
show: true
}
},
},
],
//--------------------------------------
]
}
},
// Lines
{
name: 'MA5',
type: 'line',
data: calculateMA(5),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'MA10',
type: 'line',
data: calculateMA(10),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'MA20',
type: 'line',
data: calculateMA(20),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'Indicatorline_1',
type: 'line',
itemStyle: {
color: 'rgb(255,0,0)'
},
data: [2190.1, 2148.35, 2126.22, 2190.1, 2242.26, 2210.9, 2205.07, 2250.63, 2264.43, 2242.11, 2240.07, 2266.69,2190.1, 2148.35],
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'Indicatorline_2',
type: 'line',
itemStyle: {
color: 'rgb(0,128,255)'
},
data: [2320.26, 2300.92, 2347.224,2360.75, 2383.43, 2377.41, 2425.92,2320.26, 2300.92, 2347.224, 2360.75, 2383.43, 2377.41, 2425.92],
smooth: true,
lineStyle: {
opacity: 0.5
}
}
]
};
if (option1 && typeof option1 === 'object') {
myChart1.setOption(option1);
}
//===========================================================================================================
var dom2 = document.getElementById("container2");
var myChart2 = echarts.init(dom2);
var app = {};
var option2;
option2 = {
title: {
text: 'Lines Graph',
left: 0
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data: ['Line_1', 'Line_2', 'Line_3', 'Line_4', 'Line_5']
},
grid: {
left: '1%',
right: '5%',
bottom: '15%',
containLabel: true
},
toolbox: {
right: '3%',
feature: {
restore: { show: true },
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: data0.categoryData,
},
yAxis: {
type: 'value',
},
//------
dataZoom: [
{
type: 'inside',
start: 50,
end: 100
},
{
show: true,
type: 'slider',
top: '8%',
start: 50,
end: 100,
height: 20,
handleSize: '100%'
}
],
//------
series: [
{
name: 'Line_1',
type: 'line',
data: [
120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210
, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210
, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210
, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210
, 120, 132, 101, 134
]
},
{
name: 'Line_2',
type: 'line',
data: [
220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310
, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310
, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310
, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310
]
},
{
name: 'Line_3',
type: 'line',
data: [
150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410
, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410
, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410
, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410
, 150, 232, 201, 154
]
},
{
name: 'Line_4',
type: 'line',
data: [
320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320
, 320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320
, 320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320
, 320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320
, 320, 332, 301, 334
]
},
{
name: 'Line_5',
type: 'line',
data: [
820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320
, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320
, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320
, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320
, 820, 932, 901, 934
]
},
]
};
option2 && myChart2.setOption(option2);
//===========================================================================================================
var dom3 = document.getElementById("container3");
var myChart3 = echarts.init(dom3);
var app = {};
var option3;
option3 = {
title: {
text: 'Volume Bar Graph',
left: 0
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: {
left: '1%',
right: '5%',
bottom: '15%',
containLabel: true
},
toolbox: {
right: '3%',
feature: {
dataView: { show: false, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['Sell Volume', 'Buy Volume', 'Total Volume']
},
xAxis: [
{
type: 'category',
data: data0.categoryData,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: 'Volume',
axisLabel: {
formatter: '{value} vol'
}
}
],
//------
dataZoom: [
{
type: 'inside',
start: 50,
end: 100
},
{
show: true,
type: 'slider',
top: '8%',
start: 50,
end: 100,
height: 20,
handleSize: '100%'
}
],
//------
series: [
{
name: 'Sell Volume',
type: 'bar',
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 4.9, 7.0, 23.2,, 25.6
]
},
{
name: 'Buy Volume',
type: 'bar',
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 2.6, 5.9, 9.0, 26.4, 28.7
]
},
{
name: 'Total Volume',
type: 'line',
data: [
4.6, 10.8, 16.0, 49.6, 54.3, 147.4, 311.2, 344.4, 81.3, 38.8, 12.4, 5.6, 4.6, 10.8, 16.0, 49.6, 54.3, 147.4, 311.2, 344.4, 81.3, 38.8, 12.4, 5.6, 4.6, 10.8, 16.0, 49.6, 54.3, 147.4, 311.2, 344.4, 81.3, 38.8, 12.4, 5.6
, 4.6, 10.8, 16.0, 49.6, 54.3, 147.4, 311.2, 344.4, 81.3, 38.8, 12.4, 5.6, 4.6, 10.8, 16.0, 49.6, 54.3, 147.4, 311.2, 344.4, 81.3, 38.8, 12.4, 5.6, 4.6, 10.8, 16.0, 49.6, 54.3, 147.4, 311.2, 344.4, 81.3, 38.8, 12.4, 5.6
, 4.6, 10.8, 16.0, 49.6, 54.3, 147.4, 311.2, 344.4, 81.3, 38.8, 12.4, 5.6, 4.6, 10.8, 16.0, 49.6, 54.3
]
}
]
};
option3 && myChart3.setOption(option3);
//===========================================================================================================
echarts.connect([myChart1, myChart2, myChart3]);
</script>
</body>
</html>

Use echarts.connect to connect your charts as follow :
echarts.connect([myChart1, myChart2, myChart3])
For this to work on your example, you'll have to remove the ids from the 3 'slider' type dataZoom.
dataZoom: [
{
type: 'inside',
start: 50,
end: 100
},
{
show: true,
//id: 'S3',
type: 'slider',
top: '8%',
start: 50,
end: 100,
height: 20,
handleSize: '100%'
}
],

Related

How do I programmatically select row in Qtable in Quasar correctly

I want to select a row in a Qtable with just the row-key field (not the entire row data)
so far I am able to make the checkbox toggle when I use the row-key
this.selected = [{"name":"Eclair"}]
but I expected that the entire row data would populate into the selected object, it does not.
Go to the codepen below, first try clicking on the checkbox and note the stringified data at the bottom of the screen,
then
click on the button, and note that the stringified data is not the whole row.
codepen
https://codepen.io/jniumata/pen/YzVWoQO
So my question is, how can I programmatically select a row with just the row-key field, AND get the entire row data into the array.
(note: I don't want to have to pass the entire object, just the row-key )
new Vue({
el: '#q-app',
methods: {
onChangeSelect (details) {
console.log('details: ', details)
// parse details and make a request....
},
testMethod () {
if(this.selected.length > 0) {
this.selected = [];
} else {
this.selected = [{"name": "Eclair"}];
}
}
},
data () {
return {
selected: [],
columns: [
{
name: 'desc',
required: true,
label: 'Dessert (100g serving)',
align: 'left',
field: row => row.name,
format: val => `${val}`,
sortable: true
},
{ name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
{ name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
{ name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
{ name: 'protein', label: 'Protein (g)', field: 'protein' },
{ name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
{ name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
{ name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }
],
data: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
sodium: 87,
calcium: '14%',
iron: '1%'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
sodium: 129,
calcium: '8%',
iron: '1%'
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
sodium: 337,
calcium: '6%',
iron: '7%'
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
sodium: 413,
calcium: '3%',
iron: '8%'
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
sodium: 327,
calcium: '7%',
iron: '16%'
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
sodium: 50,
calcium: '0%',
iron: '0%'
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
sodium: 38,
calcium: '0%',
iron: '2%'
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
sodium: 562,
calcium: '0%',
iron: '45%'
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
sodium: 326,
calcium: '2%',
iron: '22%'
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
sodium: 54,
calcium: '12%',
iron: '6%'
}
]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/quasar#1.14.3/dist/quasar.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/quasar#1.14.3/dist/quasar.umd.min.js"></script>
<!--
Forked from:
https://quasar.dev/vue-components/table#Example--Single-selection
-->
<div id="q-app">
<div class="q-pa-md">
<q-table
title="Programmatically select row (click button below)"
:data="data"
:columns="columns"
row-key="name"
selection="single"
:selected.sync="selected"
#selection="(details) => onChangeSelect(details)"
></q-table>
<div class="row justify-start">
<q-btn label="I like eclairs" #click="testMethod" color="primary" class="q-mt-sm" />
</div>
<div class="q-mt-md">
Selected: {{ JSON.stringify(selected) }}
</div>
</div>
</div>

A bit late, but you could try this
this.selected = this.data.filter(row => row.name == "Eclair")

How to change color of vertical line with google chart candle stick?

I want to change the candlestick chart's color.
When fallingColor.fill and risingColor.fill are set, the vertical line color remains blue like the image.
This is the code I wrote.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
// Treat first row as data as well.
], true);
var options = {
legend:'none',
candlestick: {
fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
risingColor: { strokeWidth: 0, fill: '#0f9d58' }, // green
},
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
https://jsfiddle.net/fe26/t6b57vnL/7/
How can I change the color of the line?

you can use the colors option, an array of color strings.
each color in the array, is applied to each series in the data table.
in the example posted, there is only one series, so only one color is needed / allowed.
the colors option will change the color of all the chart elements.
however, the fallingColor & risingColor options will override the colors option.
leaving only the vertical lines the same color as the colors option.
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
], true);
var options = {
legend:'none',
candlestick: {
fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
risingColor: { strokeWidth: 0, fill: '#0f9d58' }, // green
},
colors: ['magenta']
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
you can also you the style column role.
the style role is added as an additional column to the data table.
set the value of the column to the color / style you want to display for each row.
if the style value is null, it will default back to the above scenario.
however, if it is not null, it will override both options in the above scenario.
note: you will need to provide column headings to use the style role.
var data = google.visualization.arrayToDataTable([
['x', 'low', 'open', 'close', 'high', {role: 'style', type: 'string'}],
['Mon', 20, 28, 38, 45, 'lime'],
['Tue', 31, 38, 55, 66, 'purple'],
['Wed', 50, 55, 77, 80, null],
['Thu', 77, 77, 66, 50, null],
['Fri', 68, 66, 22, 15, 'orange']
]);
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'low', 'open', 'close', 'high', {role: 'style', type: 'string'}],
['Mon', 20, 28, 38, 45, 'lime'],
['Tue', 31, 38, 55, 66, 'purple'],
['Wed', 50, 55, 77, 80, null],
['Thu', 77, 77, 66, 50, null],
['Fri', 68, 66, 22, 15, 'orange']
]);
var options = {
legend:'none',
candlestick: {
fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
risingColor: { strokeWidth: 0, fill: '#0f9d58' }, // green
},
colors: ['magenta']
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
another option would be to use css, and override the svg elements for the vertical lines,
which are drawn using <rect> elements, with --> width="2"
but I would use this as a last resort.
#chart_div rect[width="2"] {
fill: #000000;
stroke: #000000;
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'low', 'open', 'close', 'high', {role: 'style', type: 'string'}],
['Mon', 20, 28, 38, 45, 'lime'],
['Tue', 31, 38, 55, 66, 'purple'],
['Wed', 50, 55, 77, 80, null],
['Thu', 77, 77, 66, 50, null],
['Fri', 68, 66, 22, 15, 'orange']
]);
var options = {
legend:'none',
candlestick: {
fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
risingColor: { strokeWidth: 0, fill: '#0f9d58' }, // green
},
colors: ['magenta']
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
#chart_div rect[width="2"] {
fill: #000000;
stroke: #000000;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
you could also listen for the chart's 'ready' event,
and manually change the chart's svg elements using your own script.
but this is not recommended...

PUG rendering of Chart

I am having issues trying to get this chartJS piechart to render in PUG. I would like to put the chartJS code in its own folder and then render it across a PUG template. Can explain what I am doing wrong or point me to some docs that may hep with this? As everyone will be able to see I am attempting to try this in a few different ways. I have placed screen shots in hopes that someone might be able to tell me the cleanest way to go about it, as well as simply getting it to render on the page. I have placed screenshots, please let me know if there is any further info that I could provide. Thanks for any help you can provide.
[app.JS File][1]
const express = require('express');
const bodyParser = require('body-parser')
const path = require('path')
const app = express();
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'css')));
app.set('view engine', 'pug')
app.locals.basedir = path.join(__dirname, 'views');
app.get ('/', (req, res) => {
res.render("dashboard", {title: "Home"})
})
app.listen(3000, () => {
console.log('listening to PORT 3000')
})
[JavaScript Pug Code][2]
$( document ).ready(function () {
var ctx = document.getElementById("myChart").getContext('2d');
var chart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
})
[Main Dashboard Page][3]
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title USRA-NASA-NAMS
link(rel="stylesheet" href="./insight.css")
script(src="https://code.jquery.com/jquery-3.5.0.min.js")
script(src='https://cdn.jsdelivr.net/npm/chart.js#2.8.0')
script(type="text/javascript" src='pieChart.js')
<!DOCTYPE html>
<html>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer");
chart.options.axisY = { prefix: "$", suffix: "K" };
chart.options.title = { text: "Fruits sold in First & Second Quarter" };
var series1 = { //dataSeries - first quarter
type: "column",
name: "First Quarter",
showInLegend: true
};
var series2 = { //dataSeries - second quarter
type: "column",
name: "Second Quarter",
showInLegend: true
};
chart.options.data = [];
chart.options.data.push(series1);
chart.options.data.push(series2);
series1.dataPoints = [
{ label: "banana", y: 58 },
{ label: "orange", y: 69 },
{ label: "apple", y: 80 },
{ label: "mango", y: 74 },
{ label: "grape", y: 64 }
];
series2.dataPoints = [
{ label: "banana", y: 63 },
{ label: "orange", y: 73 },
{ label: "apple", y: 88 },
{ label: "mango", y: 77 },
{ label: "grape", y: 60 }
];
chart.render();
}
[Pug Page with PieChart Code][4]
div(class="chart")
canvas(id="chartPic" width="400" height="400")
script(src="chart.js")
script.
-window.onload = function() {
-var red="#{red}", green="#{green}", blue="#{blue}";
-var ctx = document.getElementById("chartPic").getContext('2d');
-var chart = new Chart(ctx, {
-type: 'pie',
-data: {
-labels: ["red", "green", "blue"],
-datasets: [{
-label: 'Number of votes',
-data: [1, 1, 1],
-backgroundColor: [red, green, blue],
-borderColor: [green, blue, red],
-borderWidth: 1
}],
},
-options: {
-title: {
-display: true,
-text: "chart",
},
-legend: {
-position: 'bottom'
},
}
});
};

Google Chart: material column chart, last column has different set of colors, using series

I'm new to google chart, so my apology if this question is too noobs of me,
i have a material column chart with 2 bars each column, and i want the 2 bars at the last column to have a different color, and i dont want these color to be seen on the legend.i know i should use series for this, but i dont know how to construct it.
currenty what i have is:
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawchart);
function drawchart(){
var data = google.visualization.arrayToDataTable([
['Year', 'bar1', { role: 'annotation'}, 'bar2', { role: 'annotation'}],
['2015', 90, '90%', 69, '69%'],
['2016', 86, '86%', 96, '96%'],
['2017', 83, '83%', 87, '87%'],
['2018', 84, '84%', 78, '78%'],
['AVERAGE', 86, '86%', 82, '82%'],
]);
var options = {
height:500,
vAxis: {
gridlines: {count: 12},
viewWindow: { max: 120, min: 0 } ,
textStyle: { color: 'white' }
},
seriesType: 'bars' ,
series: {4:{colors: ['green', 'yellow']}},
legend: {position: 'bottom'},
annotations: {
textStyle: { fontSize: 18, bold: true }
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart-div'));
var formatter = new google.visualization.NumberFormat(
{suffix:'%', fractionDigits: 0});
formatter.format(datasecond, 1); // Apply formatter to second column
formatter.format(datasecond, 3);
chart.draw(datasecond, google.charts.Bar.convertOptions(options));
}
click here to see the image of my goal output
thanks in advance!

you can use a 'style' column role to change the color of individual bars.
add the style to the data table, similar to annotations,
use null for the values that should be the default style
var data = google.visualization.arrayToDataTable([
['Year', 'bar1', {role: 'annotation'}, {role: 'style'}, 'bar2', {role: 'annotation'}, {role: 'style'}],
['2015', 90, '90%', null, 69, '69%', null],
['2016', 86, '86%', null, 96, '96%', null],
['2017', 83, '83%', null, 87, '87%', null],
['2018', 84, '84%', null, 78, '78%', null],
['AVERAGE', 86, '86%', '#109618', 82, '82%', '#ff9900'],
]);
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Year', 'bar1', {role: 'annotation'}, {role: 'style'}, 'bar2', {role: 'annotation'}, {role: 'style'}],
['2015', 90, '90%', null, 69, '69%', null],
['2016', 86, '86%', null, 96, '96%', null],
['2017', 83, '83%', null, 87, '87%', null],
['2018', 84, '84%', null, 78, '78%', null],
['AVERAGE', 86, '86%', '#109618', 82, '82%', '#ff9900'],
]);
var options = {
chartArea: {
height: '100%',
width: '100%',
top: 64,
left: 64,
right: 32,
bottom: 48
},
height: '100%',
width: '100%',
vAxis: {
gridlines: {count: 12},
viewWindow: {max: 120, min: 0} ,
textStyle: {color: 'white'}
},
seriesType: 'bars',
legend: {position: 'bottom'},
annotations: {
textStyle: {fontSize: 18, bold: true}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart-div'));
var formatter = new google.visualization.NumberFormat({
suffix:'%',
fractionDigits: 0
});
formatter.format(data, 1);
formatter.format(data, 3);
chart.draw(data, options);
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}
.chart {
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart-div"></div>
note: you're actually using a classic chart, not material
google.visualization.ComboChart
material charts use namespace --> google.charts
classic --> google.visualization
probably shouldn't use google.charts.Bar.convertOptions with a classic chart...

ALL query operator with range?

Is it possible to specify a range when we use all operator in query ?
Example:
Where favorites_ordered contains [174, 225, 25, 165, 65, 87, 158], standart way will be:
Select where 174 and 158 are in favorites_ordered field.
db.inventory.find( { favorites_ordered: { $all: [ 174, 158 ] } } )
[174, 225, 25, 165, 65, 87, 158] : found
I would like make
Select where 174 and 158 are in favorites_ordered field and are in 3 first values.
[174, 225, 25, 165, 65, 87, 158] : not found

You can do this in mongo:
> db.foo.insert({favorites_ordered: [174, 225, 25, 165, 65, 87, 158]})
> db.foo.insert({favorites_ordered: [158, 225, 25, 165, 65, 87, 174]})
> db.foo.insert({favorites_ordered: [100, 158, 225, 25, 165, 65, 87, 174]})
> db.foo.find({ 'favorites_ordered.0': { $in : [174, 158] } })
{ "_id" : ObjectId("51fa394f59a0a6afeec5b138"), "favorites_ordered" : [ 174, 225, 25, 165, 65, 87, 158 ] }
{ "_id" : ObjectId("51fa3a2d59a0a6afeec5b139"), "favorites_ordered" : [ 158, 225, 25, 165, 65, 87, 174 ] }