Vuetify has a sparkline component that can be used to create simple graphs.
https://vuetifyjs.com/en/components/sparklines
I can't figure out how to add more than one sparkline in the same graph. Something like adding a second list of values to the component.
If there's no way, maybe some of you know a more suited graph tool that I could use with Vue.
<template>
<v-sparkline
:value="value"
:gradient="gradient"
:smooth="radius || false"
:padding="padding"
:line-width="width"
:stroke-linecap="lineCap"
:gradient-direction="gradientDirection"
:fill="fill"
:type="type"
:auto-line-width="autoLineWidth"
auto-draw
></v-sparkline>
</template>
<script>
const gradients = [
['#222'],
['#42b3f4'],
['red', 'orange', 'yellow'],
['purple', 'violet'],
['#00c6ff', '#F0F', '#FF0'],
['#f72047', '#ffd200', '#1feaea'],
]
export default {
data: () => ({
width: 2,
radius: 10,
padding: 8,
lineCap: 'round',
gradient: gradients[5],
value: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
gradientDirection: 'top',
gradients,
fill: false,
type: 'trend',
autoLineWidth: false,
}),
}
</script>
In the code below, the first sparkline is attached normally to the v-sheet, while the second is stacked on top of the first sparkline.
<template>
<v-sheet class="stackSheet" color="white">
<v-sparkline
:value="value1"
color="blue"
line-width="3"
padding="10"
></v-sparkline>
<v-sparkline
class="stackSpark"
:value="value2"
color="red"
line-width="3"
padding="10"
></v-sparkline>
</v-sheet>
</template>
<script>
export default {
data: () => ({
value1: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
value2: [7, 4, 7, 2, 9, 0, 1, 2, 4, 7, 7, 10, 1, 3, 5],
}),
}
</script>
<style lang="css" scoped>
.stackSheet {
position: relative;
}
.stackSpark {
position: absolute;
top: 0;
left: 0;
}
</style>
Related
I'm using ChartJS v4.0.1. They've implemented a new option to curve the line chart named tension. But it looks so weird.
The option value works between 0 and 1, I've tried several options to make the Chart more beauty and here we are:
tension: 0.1
tension: 0.5
tension: 1
So my question is, what can I do to make the chart more "smooth", something like this:
Thank you!
You should use cubicInterpolationMode. It is documented here: Line Chart | Chart.js
Your line looks a bit smoother here:
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
datasets: [{
label: 'Dataset',
data: [1, 3, 2, 1, 1, 1, 2, 2, 2, 2],
cubicInterpolationMode: 'monotone' // <--- HERE
}]
},
options: {
scales: {
y: {
type: 'category',
labels: [1, 2, 3]
}
}
}
});
.chart-container {
position: relative;
height: 90vh;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#4.0.1"></script>
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
I'm using react-heatmap-grid in order to create a table with data and I want that when I click on a rectangle from the table to open a popup. I'm using Semantic UI in my project so I would like to use the Pinned Popup that appears only on click.
The code so far:
const xLabels = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];
const yLabels =['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00'];
const data = [[7, 1, 2, 1, 7, 3, 6],
[7, 1, 2, 3, 4, 5, 6],
[0, 1, 2, 3, 4, 5, 6],
[7, 1, 2, 3, 4, 5, 6],
[7, 1, 2, 3, 4, 5, 6],
[0, 1, 7, 7, 4, 5, 6],
[0, 1, 2, 7, 4, 5, 6],
[7, 1, 2, 7, 7, 5, 6],
[7, 1, 2, 3, 4, 7, 7],
[0, 1, 2, 3, 4, 5, 7],
[0, 1, 7, 0, 1, 2, 3],
[7, 1, 2, 3, 4, 5, 6]];
<HeatMap
xLabels={xLabels}
yLabels={yLabels}
xLabelWidth={60}
data={data}
squares
height={45}
width={50}
cellStyle={(background, value, min, max, x, y) => ({
background: value === 7 ? '#27414E' : '#F5F7FA',
fontSize: '10px',
color: '#444',
width: '14%',
height: '30px',
})}
cellRender={value => value && <div>{value}</div>}
/>
It works fine, it renders the data and shows it in that heatmap table. But I don't know if it is possible to add a Popup component for each square in the table.
I added an aleart to be activated when the square is clicked:
<HeatMap
xLabels={xLabels}
yLabels={yLabels}
xLabelWidth={60}
data={this.state.tableData}
squares
height={45}
width={50}
onClick={(x, y) => alert(`Clicked ${x}, ${y}`)} //here is the onClick added
cellStyle={(background, value, min, max, x, y) => ({
background: value === 7 ? '#27414E' : '#F5F7FA',
fontSize: '10px',
color: '#444',
width: '14%',
height: '30px',
})}
cellRender={value => value && <div>{value}</div>}
/>
This is the structure of the popup:
<Popup
content='show some data'
on='click'
pinned
trigger={<Button content='Button' />}
/>
Is there a way to add it in Heatmap?
Have tried putting it in cellRenderer?
...
cellRender={value => <Popup
content='show some data'
on='click'
pinned
trigger={<div style={{height: 50, width: 50}} />}/>}
...
I have created the following radar chart using this code. Codepen
data = [{
type: 'scatterpolar',
r: [39, 28, 8, 7, 28, 39],
theta: ['A','B','C', 'D', 'E', 'A'],
fill: 'toself'
}]
layout = {
polar: {
radialaxis: {
visible: true,
range: [0, 50]
}
},
showlegend: false
}
Plotly.newPlot("myDiv", data, layout)
Which results in this:
How can I set the color of each of the dots shaping the polygon?
With this tool, online graph maker, it seems you can set the colors on a scale, but I would like to set each on of the dots separately,
Any direction to how to customize the rest of the elements will be very helpful.
Thanks.
#myDiv path.point{
fill: blue !important;
}
And if you want to further customize the colors you can use CSS :nth-of-type(n) modifier https://www.w3schools.com/cssref/sel_nth-of-type.asp
data = [{
type: 'scatterpolar',
r: [37, 28, 8, 7, 28, 39],
theta: ['A','B','C', 'D', 'E', 'A'],
fill: 'toself',
marker : { color : '#B80102'}
}]
layout = {
polar: {
radialaxis: {
visible: true,
range: [0, 50]
}
},
showlegend: false
}
Plotly.newPlot("myDiv", data, layout)
#myDiv path.point{
fill: blue !important;
}
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
There are ton of possible configurations, and exploring you can get a an idea of any possible setup you might think of. Plotly is truly amazing.
For the configuration I was trying to do this is the configuration:
You can try it on the codepen
data = [{
type: 'scatterpolar',
mode : "markers+lines",
line : {
color : "rgb(158, 27, 66)",
width : "2",
dash : "solid",
shape : "linear"
},
r: [5, 1, 3, 2, 4, 3, 3, 2, 4, 3, 2, 3, 3, 2, 4, 2, 2],
theta: ['Tecnologia','Innovacion','Optimismo Digital', 'Transformador', 'Atracc. y desarrollo de talento', 'Referente', 'Etica y honestidad',
'Personas', 'Aprendizaje Continuo','Promocion del aprendizaje', 'Emprendedor', 'Escucha', 'Comunica y comparte', 'Mejora continua',
'Base tecnica y rigor', 'Logro', 'Crecimiento rentable' ],
fill: 'toself',
fillcolor: 'rgba(255, 0, 0, 0.6)',
marker : { color : [8, 8, 8, 2, 2, 6, 6, 6, 4, 4, 4, 5, 5, 5, 3, 3, 3 ],
colorscale : [
[0, '#38C041'], [0.125, '#DDD01B'], [0.25, '#c7e9b4'], [0.375, '#7fcdbb'], [0.5, '#41b6c4'], [0.625, '#1d91c0'], [0.75, '#225ea8'], [0.875, '#253494'],[1, '#081d58']
],
size : 10
}
}]
layout = {
polar: {
radialaxis: {
visible: true,
range: [0, 7]
}
},
showlegend: false,
width: 800,
height: 700,
margin:{
l : 0,
r : 0,
t : 100,
b : 0,
pad : 0,
autoexpand : true
}
}
I have created a Chartist line chart and I want to make the corners of the chart rounded like in the image bellow:
Where do I need to set up the attribute or is even possible to make it looking like I want ?
new Chartist.Line('#dashboardChartStats1', {
labels: [1, 2, 3, 4, 5, 6, 7],
series: [
[5, 6, 7, 4, 7, 6, 5]
]
}, {
low: 0,
high: 10,
showArea: true,
fullWidth: true,
axisX: {
offset: 0,
showLabel: false
},
axisY: {
offset: 0,
showGrid: false,
showLabel: false
},
lineSmooth: Chartist.Interpolation.cardinal({
tension: 1,
fillHoles: false
})
});
It is doable with border-radius;
svg {
border-radius: 50%;
}
though it does looks a bit ugly, but you can fiddle with it; fiddle here
There is no way to do this via the controls of the chart library. Maybe some css magic can make it better, but I am all out of mana. 🧙
Also embedded below;
new Chartist.Line('.container', {
labels: [1, 2, 3, 4, 5, 6, 7],
series: [
[5, 6, 7, 4, 7, 6, 5]
]
}, {
low: 0,
high: 10,
showArea: true,
fullWidth: true,
axisX: {
offset: 0,
showLabel: false
},
axisY: {
offset: 0,
showGrid: false,
showLabel: false
},
lineSmooth: Chartist.Interpolation.cardinal({
tension: 1,
fillHoles: false
})
});
.container {
width: 300px;
height: 300px;
}
svg {
border-radius: 50%;
}
<script src="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.js"></script>
<link href="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.css" rel="stylesheet"/>
<div class="container"></div>
New to plotly.js
(I am in angular environment)
I wanna put the traces inside of a multi-select drop menu. Same for all the y axis. To be able to toggle the visibility of these. Suggestions...the easy/right way.
I tried to affect the svg containers with css but no effect:
For axis:
var update = {
'yaxis.visible': false
};
Plotly.relayout(myDiv, update)
For traces:
data = [
{
line: {width: 5},
name: "myName1",
type: "scatter",
visible: "legendonly", // Plot trace but hide it to the user
x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
y: [10, 11, 2, 23, 14, 5, 16, 7, 18, 29, 10]
},
{
line: {width: 5},
name: "myName2",
type: "scatter",
visible: "legendonly" ,// Plot trace but hide it to the user
x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
y: [10, 1, 12, 13, 4, 25, 16, 17, 8, 19, 20]
}
];
allTraces=document.getElementById("myDiv").data; // Get data from chart AFTER plotting it.
// Find index of trace-object with "name" property = "text to find":
result = allTraces.findIndex(obj => {
return obj.name === "text to find";
}
// Make specified trace visible to user:
Plotly.restyle(document.getElementById("myDiv"), {"visible": true}, [result]);