JavaScript Graphics - javascript

I'm trying to create some graphics similar to this one in the MaterializeCSS website, but I cannot figure out where it is from, I look over the whole MaterializeCSS website and it is not part of the framework, and I cannot find in the code what they are using
I'm especially interested in those little boxes: (https://ibb.co/7vZVjZ8)
Small square graphics
Example website can be found here:
https://themes.materializecss.com/pages/admin-dashboard.html

I guess that you can use Chartist.js with some modifications do it, look at my code pen I create an example for you
https://codepen.io/icaronz/pen/qBbvmNR
Basically you need to set Chartist.js to not have any axis values:
var chart = new Chartist.Line('.ct-chart', {
labels: [1, 2, 3, 4],
series: [
[1, 4, 2, 5],
[2, 3, 1, 4]
]
}, {
showPoint: false,
showLine: false,
showArea: true,
fullWidth: true,
showLabel: false,
axisX: {
showGrid: false,
showLabel: false,
offset: 0
},
axisY: {
showGrid: false,
showLabel: false,
offset: 0
},
chartPadding: 0,
low: 0,
width: 400,
height: 200
});
Also, don't forget to import the necessary CSS and JS from they CDN
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />

i think that's created with chartjs https://www.chartjs.org/

Related

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)

To resize and make the Violin chart of PotlyJS responsive

I want the violin chart (I'm using plotlyjs library) to be responsive. But also don't want it to compress so much (it is compressing according to the div it is kept in).
I have tried to turn the autosize property of violin to be false and then set the height and width. In this case the chart does not compress (stays the way I want it to be), but it loses its responsiveness. Is there a way to make this chart responsive yet no so compressed?
Here is my code:
<Plot
config = {{ displayModeBar: false }}
data={[
{
type: 'violin',
y: this.props.data,
points: 'none',
box: {
visible: true
},
boxpoints: false,
line: {
color: 'red'
},
opacity: 0.6,
meanline: {
visible: true
},
x0: "OEE"
}
]}
layout={{
title: "Comparison",
yaxis: {
zeroline: false
},
// autosize: false,
// height: 300,
// width: 500,
// responsive: true
}}
useResizeHandler= {true}
style= {{width: "100%", height: "100%"}}
/>
The div inside which violin is kept:
<div className="chart-wrapper" style={{ height: "35vh" }}>
<ViolinChart data={this.state.violinChartData} />
</div>
I got the solution to the above question.
PlotlyJS also provides a "margin" property for its charts. So providing margins will let you adjust the chart the way you want it to be
var layout = {
margin: {
l: 25,
r: 25,
b: 25,
t: 25
}
};
This is what i added to my code. Setting automargin = true will automatically increase the margin size.
More about this can be found here.

Why don't see chart of width 50px & height 25px

I need many very small charts on one page, but if I set width 50px and height 25px I do not see chart. Also I will thanks of suggestions other libraries to create more than 200 charts on page without performance problem.
I tried set width and height via css on parent div.
https://codesandbox.io/s/m5pl96l8op
import React from "react";
import ReactDOM from "react-dom";
import Chart from "react-chartist";
import "./styles.css";
function App() {
return (
<div className="App">
<Chart
className="chart"
data={{
series: [[1, 3, 2, 8, 4, 12, 27, 16]]
}}
type="Line"
options={{
fullWidth: true,
width: "50px",
height: "25px",
showPoint: false,
axisY: {
showGrid: false,
showLabel: false
},
axisX: {
showGrid: false,
showLabel: false
}
}}
/>
</div>);
}
I expect very small chart, but I does not see any chart.
In Chartist's docs, you'll find all the options available and their default values.
Your issue here is that there are margins and paddings everywhere by default, which leaves very little space for your data. Here are the options you can use to remove any extra space:
https://codesandbox.io/s/4lxl0qvly9
function App() {
// We'll use this multiple times, so declare it here
const series = [1, 3, 2, 8, 4, 12, 27, 16];
return (
<div className="App">
<Chart
className="chart"
data={{
series: [series]
}}
type="Line"
options={{
fullWidth: true,
width: "50px",
height: "25px",
low: Math.min(...series), // Remove space around min and max values
high: Math.max(...series), // Remove space around min and max values
chartPadding: {
// Remove all padding
top: 0,
right: 0,
bottom: 0,
left: 0
},
showPoint: false,
axisY: {
offset: 0, // Remove any offset
position: "start", // Remove any bottom margin
showGrid: false,
showLabel: false
},
axisX: {
offset: 0, // Remove any offset
position: "start", // Remove any left margin
showGrid: false,
showLabel: false
}
}}
/>
</div>
);
}

What does this Revolution jQuery do

I was reading some code today and came across this. This is using the Revolution slider with extensions, link to their site here. I'm not entirely sure what this huge piece of code does, and was wondering if there was anyone that could help me out with this. In the code, it says navigation, so is this how the website makes its navigation bar? I was viewing the actual code and noticed that no-where in the code was there an actual place that made the navigation bar. So I'm assuming they used this or some other JavaScript to insert the nav-bar without coding it directly in HTML.
<script type="text/javascript">
var tpj=jQuery;
var revapi4;
tpj(window).load(function() {
if(tpj("#rev_slider_4_1").revolution == undefined){
revslider_showDoubleJqueryError("#rev_slider_4_1");
}else{
revapi4 = tpj("#rev_slider_4_1").show().revolution({
sliderType:"standard",
jsFileLocation:"assets/revolution/js/",
sliderLayout:"fullscreen",
dottedOverlay:"none",
delay:9000,
navigation: {
keyboardNavigation: "on",
keyboard_direction: "horizontal",
mouseScrollNavigation: "off",
onHoverStop: "off",
touch: {
touchenabled: "on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
},
arrows: {
style: "gyges",
enable: true,
hide_onmobile: false,
hide_onleave: false,
tmp: '',
left: {
h_align: "left",
v_align: "center",
h_offset: 10,
v_offset: 0
},
right: {
h_align: "right",
v_align: "center",
h_offset: 10,
v_offset: 0
}
},
bullets: {
enable: false,
hide_onmobile: false,
style: "gyges",
hide_onleave: false,
direction: "horizontal",
h_align: "center",
v_align: "top",
h_offset: 0,
v_offset: 20,
space: 5,
tmp: ''
}
},
parallax: {
type:"mouse",
origo:"slidercenter",
speed:2000,
levels:[2,3,4,5,6,7,12,16,10,50],
},
responsiveLevels:[1240,1024,778,480],
gridwidth:[1240,1024,778,480],
gridheight:[868,768,960,720],
lazyType:"none",
shadow:0,
spinner:"off",
stopLoop:"on",
stopAfterLoops:0,
stopAtSlide:1,
shuffle:"off",
autoHeight:"off",
fullScreenAlignForce:"off",
fullScreenOffsetContainer: "",
fullScreenOffset: "",
disableProgressBar:"on",
hideThumbsOnMobile:"off",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
}
}); /*ready*/
</script>
Thanks a bunch, I appreciate the help!

Can anyone please show a simple example of using BeautyTips?

Looking for a simple example of how beautytips can be used( HTML + CSS included)?
My requirement is this - I am displaying product names.On hovering of product name,I want to display products image in the tooltip.How can I do this?
thanks
Here is a website with some samples:
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html
Assuming that is that you are referring to this jquery plugin.
Here it is. You just have to make sure the js files are getting loaded. Note that i'm using hoverintent lib here to give a delay before anything pops up.
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery.bt.min.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.minified.r6.js">
<div id="mydiv">Mouse over here to see it poppin'</div>
<script>
$("mydiv").bt("Text to pop out",{
showTip: function(box){
$(box).fadeIn(300);
},
hideTip: function(box, callback){
$(box).animate({opacity: 0}, 100, callback);
},
hoverIntentOpts: {
interval: 1000,
timeout: 200
},
fill: '#E1EEF8',
cornerRadius: 10,
strokeWidth: 0,
shadow: true,
shadowOffsetX: 3,
shadowOffsetY: 3,
shadowBlur: 8,
shadowColor: 'rgba(0,0,0,.9)',
shadowOverlap: false,
noShadowOpts: {strokeStyle: '#999', strokeWidth: 2},
positions: ['top', 'bottom','right']
});
</script>

Categories