We Keep Coding

Trail mode of hovering events doesnt work in tsParticles(similar to particlejs)

I have got two queries, I am implementing tsParticles in my React application.
First one:.
<Particles
id="tsparticles"
options={{
background: {
color: {
value: "black",
},
},
fpsLimit: 60,
interactivity: {
detectsOn: "window",
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "trail",
},
resize: true,
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color:{
animation:{
enable:true,
speed:50,
},
value:"#f00"
},
links: {
shadow:{
blur:true,
color:"#00ff00"
},
triangles:{
frequency: 1
},
color: "random",
distance: 150,
enable: true,
frequency:1,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
angle:{
offset: 45,
value: 90
},
attract:{
rotate:{
x:3000,
y:3000
}
},
gravity:{
acceleration: 9.81,
enable:false,
maxSpeed:1
},
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
value_area: 1000,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
random: true,
value: 5,
},
},
detectRetina: true,
}}
/>
There is a section of onHover and key value of mode in it. There are like 8 different modes to it, can be viewed in https://particles.matteobruni.it/ .
All other modes work fine but the trail mode when I use this code, am I missing some other properties to the Particles component?
Second one:
Also,
I have got two divs, one for the particle and the other for the text to display on top of it. I have achieved this using z-index and positions.
I need the canvas height to be dynamic that is occupy 100% height of its parent whatever the screen size is. I have tried doing this by including Particles component inside a div and keeping its height to 100% but the canvas height decreases with the decrease in the screen size.
Kindly help me, thank you :)

Wow, there's a lot to answer here, but I try to do my best.
First point, the config and mouse trail
The mouse trail needs more configuration, in the modes section of interactivity you have to configure the trail section.
You can see a sample here: https://codepen.io/matteobruni/pen/abdpbBY
If you need more documentation checkout the right section in documentation: https://particles.js.org/interfaces/_options_interfaces_interactivity_modes_itrail_.itrail.html
Second point, the canvas size
If you need a dynamic canvas size the best solution is to use the backgroundMode in the options root object
You can see a sample here: https://codepen.io/matteobruni/pen/MWeqxNL
The background mode if enabled sets the canvas style with a fixed position and the desired zIndex
You can see the documentation here: https://particles.js.org/interfaces/_options_interfaces_backgroundmode_ibackgroundmode_.ibackgroundmode.html
If you are using the backgroundMode, the better results are obtained without setting any style to the containing div (the tsParticles target/container)

echarts Media queries not working with Bootstrap (carousel)

I have a bootstrap carousel with 2 slides. Both the slides uses bootstrap grids of 2x2 to display charts on them. They are working fine , however I am trying to implement responsive media queries and can't seem to make it work. I used baseOptions and media options to define but the charts do not load up and the console doesn't show any error.
I have tried to define the <div> container with inline style width and height i.e. style="width: 100%;height:400px;" and I have also tried to define the width and height in CSS like so-
.mychart {
width: 100%;
height: 400px;
}
The javascript looks like below.
<div id="chart1" style="width: 100%;height:400px;"></div> //with inline style
<div id="chart1" class="mychart"></div> //with CSS class
var myChart1 = echarts.init(document.getElementById('chart1'));
var lpnArr = [101, 43, 10, 250];
option = {
title : {
text: 'My data Pie',
subtext: 'Data as of last batch',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['Processed','Unprocessed','In RIB','Errors']
},
color: ['#4bc14f','#ff7f50','#da70d6','#d8316f'],
toolbox: {
show : true,
feature : {
mark : {show: false},
dataView : {show: false},
magicType : { show: false},
dataZoom : { show : false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'Processed',
type:'pie',
radius : ['50%', '70%'],
startAngle : 230,
center: ['35%', '50%'],
itemStyle : labelFormatter, //custom formatter
data: lpnArr //load chart with data array lpnArr
}
]
}
var mediaQuery = [
{
option: {
series: [
{
radius: ['50%', '70%'],
center: ['35%', '50%']
}
]
}
},
{
query: {
minAspectRatio: 1
},
option: {
series: [
{
radius: ['50%', '70%'],
center: ['35%', '50%']
}
]
}
},
{
query: {
maxAspectRatio: 1
},
option: {
series: [
{
radius: ['50%', '70%'],
center: ['50%', '35%']
}
]
}
},
{
query: {
maxWidth: 500
},
option: {
series: [
{
radius: ['50%', '70%'],
center: ['50%', '35%']
}
]
}
}
];
myChart1.setOption({baseOption : option,
media : mediaQuery});
if I use it without the media query it works just fine. like this
myChart1.setOption(option);
Using the media query, as per the documentation along with baseOptions and media, the charts simply don't load and it doesn't show me any error in the console as well, so I am not sure if I am using it correctly or not.
By the way, I also have this in the end of the script to be able to resize the charts when the window is resized but then I realized that this is not truly responsive -
$(window).on('resize', function(){
myChart1.resize();
});
The bootstrap chart elements are <div> elements within other div with a class of BS container-fluid. The carousel code can be found in this JSFiddle.

Media query was introduced in echarts version 3, whereas I have been using version 2 and thus it wasn't working. It's extremely odd that using media with version 2 doesn't show any kind of error, neither does baseOption show any error so I was left scratching my head. Documentation isn't clear enough to say that media queries is only supported in version 3. So after scouring through the code and GitHub threads for hours and trying out all their js versions I came to this conclusion.
The downside of using version 3 echarts is that it is missing the "Tree" chart type and it's a lot more pickier than any prior version. Also, it's twice as much slower than version 2.

Legend texts for bar chart cut off

I got a legend for stacked bar chart. However, the texts for the legend are getting cut off:
Here is the code:
var options ={
title: 'No. of cases by Planning Area(Islandwide)',
vAxis: { title: '', titleTextStyle: { color: 'black'} },
chartArea : {top :20,right : 45},
isStacked: true,
width: 500,
height: 1600,
colors: ['#cab2d6', '#b2df8a','#1f78b4','#33a02c','#a6cee3','#ffff99','#ff7f00','#e31a1c','#6a3d9a','#fb9a99','#cccccc'],
fontSize: getFontSize(),
legend:{ alignment: 'center', textStyle: { fontSize: getFontSize(), overflow: 'auto'} }
};
var chart = new google.visualization.BarChart(document.getElementById('pieOne'));
chart.draw(data,options);
$(".chart").colorbox({ inline: true, open: true, width: 800, height: 800});
Although I set the autoflow property for legend already but it still getting cut off. I wonder why is it so?
Thanks in advance.

Pagination in Google charts?

I am using Google charts to show some graphs in my website. The thing is I have too many periods (by weeks), imagine two years, I would have over 100 weeks, the chart really becomes incomprehensible, so I thought about adding some kind of pagination by month, is this possible?
$j('#Summary').Chart({
chartClass: google.visualization.AreaChart,
chartOptions: {
backgroundColor: '#FFF',
width: '100%',
height: 400,
hAxis: { title: 'time' },
vAxis: { title: 'contents' },
isStacked: true
},
chartData: data,
setCertainty: true
});

Maybe you this is what you are looking for
https://developers.google.com/chart/interactive/docs/examples#tablequerywrapper
Is a table, but is paginated
If not, try to implement some system to move ranges between your data. Some example, will help

QTip show my ajax content before downloading all the content

I am using QTip in my project and I have a very frustrating problem.
I have a page which contains around 20 elements. while standing over them, qtip generate an ajax request and get additional details on these elements while showing them in a qtip.
The problem is that it seems the qtip show the tip before downloading all the content of the additional page and causing weird artifacts. This happen the first time for each additional content. second time it shows the tip there is no problem.
Here is how I am calling qtip :
$(".challenge_button").each(function (index, domEle)
{
$(domEle).qtip({
content: {
url: '/main/challenge_get_info/' + $(this).data("challenge-id") +'/'
},
position: {
adjust: { x: -50, y: -10, screen: true },
corner: {
target: 'bottomRight',
tooltip: 'topLeft'
}
},
style: {
name: $(this).data("state"),
width: {
max: 500,
min: 370
},
tip: true
},
show: {
ready: false,
delay: 500,
effect:
{type : 'fade', length : 400 }
}
});
});