How to make touchable area on image [click on position 1 show effect and same effects and different effects show on another position 2, 3, 4, 5.]
Actually when i am Clicking on Particular Position On an image, getting the Corresponding x and y co-ordinates but not getting touchable area on image
Please follow this
we have to create a mapping object similar to this
const MAPPING = [
{
id: '0',
name: 'First Area Name',
shape: 'rectangle',
width: 30,
height: 40,
x1: 80,
y1: 500,
prefill: 'red',
fill: 'blue'
},
{
id: '1',
name: 'Second Area Name',
shape: 'rectangle',
x2: 155,
y2: 540,
x1: 125,
y1: 500
},
]
using of ImageMapper
<ImageMapper
imgHeight={500}
imgWidth={250}
imgSource={imageSource}
imgMap={MAPPING}
onPress={(item, idx, event) => this.onAnyAreaPress(item, idx, event)}
containerStyle={styles.myCustomStyle}
selectedAreaId="my_area_id"
/>
It provided touch points based on mappings we pass.
Please go through this doc for more info.
Library
Related
I'm trying to chart a time scatter plot using vue-chartjs but am having trouble getting the line tension to work. If I set the tension option for the data set to anything but 0 the line disappears.
The chart data and options (just some dummy data for now):
const chartOptions = {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: false
}
};
const chartData = ref({
datasets: [
{
data: [
{ x: 0, y: 5 },
{ x: 3, y: 4 },
{ x: 5, y: 7 },
{ x: 8, y: 13 },
{ x: 13, y: 6 },
{ x: 18, y: 2 },
{ x: 25, y: 11 },
],
backgroundColor: "#ED1369",
borderColor: "#ED1369",
showLine: true,
tension: 0,
pointRadius: 3.5,
pointHoverRadius: 3.5,
borderWidth: 2
}
]
});
Result with no tension (tension: 0):
Chart showing lines with no tension
Result with tension (tension > 0):
Chart breaking and no longer showing lines
I've tried using both "tension" and "lineTension" options, as well as the "cubicInterpolationMode" option. I have also tried various combinations of those options. I have tested and found that Chart.js does support curved lines on scatter plots.
Turns out you have to register the Filler component.
https://github.com/apertureless/vue-chartjs/issues/988
Im new to Chart.js and im trying make a line chart where it is possible to click somewhere in the line graph and retrieve the full data object.
This is what my chart looks like right now which is working fine but now I would like to use this my own data
const myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['9:00', '12:00', '15:00', '9:00', '12:00', '15:00', '9:00', '12:00', '15:00', '9:00', '12:00', '15:00',],
datasets: [{
label: 'Cardscans',
data: [
214,
200,
195,
214,
200,
320,
214,
200,
299,
214,
200,
210],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.2,
pointStyle: 'circle',
pointRadius: 5,
pointHoverRadius: 15
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}});
So now I want to fill the line chart with the total scans and the pie chart with 'successful' and 'failed'.
I would like to use for example this array of objects:
[
{
id: 1,
date: '01-10-2022',
Scans: {
total: 206151,
times: [
{
time: '12:00 - 13:00',
successful: 12283,
failed: 24,
0: 12184,
1: 55,
2: 22,
3: 12,
4: 8,
5: 2,
}
]
}
},
{
....
}]
What I want to achieve is to fill a pie chart with the 'successful' and 'Failed' data. But I want to do this based on the previous clicked data in the Line chart.
So my question is not about how to click something in the line chart but more about how i fill my line chart with the data above and pull the specific object to fill the other pie chart with.
Thanks in advance
I am try to display a billboardjs bubble chart using javascript and html.
I included the lib in my index.html file as:
src="/lib/billboard.pkgd.js"
The codes are very simple but when ran, I got the "NaN" error.
this.d3Chart = bb.generate({
bindto: "#d3bubbleChart",
data: {
type: "bubble",
label: false,
xs: {
data1: "x1",
data2: "x2"
},
columns: [,
["x1", 10, 20, 50, 100, 50],
["x2", 30, 40, 90, 100, 170],
["data1", [20, 50], [30, 10], [50, 28], [60, 70], [100, 80]],
["data2", [350, 50, 30], [230, 90], [200, 100],[250, 150],[200, 200]]
]
},
bubble: {
maxR: 50
},
grid: { y: { show: true } },
axis: {
x: {
label: { text: "AOV", position: "outer-left"},
height: 50,
tick: { format: function(x) { return ("$"+x);}}
},
y: {
fit: false,
min: {fit: true, value: 0},
max: 450,
labels: "yes",
label: { text: "Conversion Rate", position: "outer-bottom"},
tick: { format: function(x) { return (x+"%");}}
}
}
});
Checkout the allowed data for bubble type from API doc:
For 'bubble' type, data can contain dimension value:
- an array of [y, z] data following the order
- or an object with 'y' and 'z' key value
'y' is for y axis coordination and 'z' is the bubble radius value
I'm seeing from your example, that the first data of data2 contains additional value. Removing that will work fine.
this.d3Chart = bb.generate({
data: {
...
columns: [,
// the length for each bubble should be 2
["data2", [350, 50, 30], ...]
]
I want to create a control panel which provides a slider for quick input but also an textinput to type in the exact value as float number. Additionally there shall be a label, which displays the actual value.
The problem is, that I am not quit shure how to link all three widgets to each other AND auto update them if one changes the value...
Everything is done in an external .kv file.
Here is my first attempt via id. It works but the textinput does not change its content if I change the sliders value. Does anyone have a better solution for my problem?
Thanks for your help :)
That's the content of test.kv:
<MainLayout>:
BoxLayout:
pos: self.parent.x + self.parent.width*0.1, self.parent.y
orientation: 'vertical'
BoxLayout:
orientation: 'horizontal'
Label:
color: 0, 0, 0, 1
font_size: 20
text: 'Position: ' + str(linear_pos_slider.value) + ' mm'
size: self.texture_size
Slider:
id: linear_pos_slider
orientation: 'horizontal'
max: 50
min: -50
padding: 1
value: float(linear_pos_ti.text)
step: 0.1
TextInput:
id: linear_pos_ti
size_hint: 0.2, 0.8
font_size: 20
text_color: 0, 0, 0, 1
input_filter: 'float'
multiline: 'False'
text: '0'
And here is the content of the test.py to make the application run:
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.uix.slider import Slider
from kivy.uix.floatlayout import FloatLayout
from kivy.core.window import Window
Window.clearcolor = (1, 1, 1, 1)
class MainLayout(BoxLayout):
pass
class Test(App):
def build(self):
return MainLayout()
if __name__ == "__main__":
Test().run()
You should just be able to bind them to each other:
Label:
color: 0, 0, 0, 1
font_size: 20
text: 'Position: ' + str(linear_pos_slider.value) + ' mm'
size: self.texture_size
Slider:
id: linear_pos_slider
orientation: 'horizontal'
max: 50
min: -50
padding: 1
value: float(linear_pos_ti.text)
step: 0.1
TextInput:
id: linear_pos_ti
size_hint: 0.2, 0.8
font_size: 20
text_color: 0, 0, 0, 1
input_filter: 'float'
multiline: 'False'
text: str(linear_pos_slider.value)
Although in practice, it would be better if you used a NumericProperty (or StringProperty) in the code and bound them to that. This has all the same advantages but it is cleaner and gives you easy access from the code side too.
Note that since the bindings are one-way (property -> widget), you will need to set it with on_* events:
Slider:
id: linear_pos_slider
orientation: 'horizontal'
max: 50
min: -50
padding: 1
value: root.value
on_value: root.value = self.value
step: 0.1
TextInput:
id: linear_pos_ti
size_hint: 0.2, 0.8
font_size: 20
text_color: 0, 0, 0, 1
input_filter: 'float'
multiline: 'False'
text: str(root.value)
on_text: root.value = float(self.text)
with:
from kivy.properties import NumericProperty, StringProperty
class MainLayout(BoxLayout):
value = NumericProperty(0.0)
pass
I there a way where by I can define the colours of bubbles in a motion chart provided by Google visualization API ? I do not want to use the default colour scheme.
Thank you in advance.
I've not found an inbuilt way to do this. However, what you can do is assign each bubble a "colour" variable. Then you can set the colour of the bubbles to this variable. I have found that for 3 bubbles, setting one to 1, another to 1.5 and the third to 3 projects reasonable well (on the default colour scheme, yellow projects very poorly). This approach gives you limited control over the colour scheme.
It's 2017 and I have yet to find a good update for this. So here is the solution I came up with. HTH.
#views.py
# Bubble Chart: ID, X, Y Color, Size
data.append(['ID', 'X', 'Y', 'Category', 'Z'])
data.append(['', 0, 0, 'Cat 1', 0]) #<-- the order of
data.append(['', 0, 0, 'Cat 2', 0]) #<-- these fakeout items
data.append(['', 0, 0, 'Cat 3', 0]) #<-- is important
data.append(['', 0, 0, 'Cat 4', 0]) #<-- Blue, Red, Orange, Green - in that order
... for r in source:
data.append(r.a, r.b, r.c, r.d, r.e)
return render(
request,
'Template.html',
{
'title':'',
'year':datetime.now().year,
'org': org,
'data': json.dumps(data),
}
#in the scripts block of template.html
<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({{data|safe}});
var options = {
title: 'Bubble By Category Strategy',
hAxis: { title: 'X', ticks: [{v: 0, f:''}, {v: 1, f:'L'}, {v: 2, f:'M'}, {v: 3, f:'H'}, {v: 4, f:''}] },
vAxis: { title: 'Y', ticks: [{v: 0, f:''}, {v: 1, f:'L'}, {v: 2, f:'M'}, {v: 3, f:'H'}, {v: 4, f:''}] },
bubble: {
textStyle: {
fontSize: 11,
fontName: 'Lato',
}
}
};
var chart = new google.visualization.BubbleChart(document.getElementById('riskChart'));
chart.draw(data, options);
}
</script>