enter image description here
Points are not plotted correct on the scichart
xAxis.axisAlignment = EAxisAlignment.Left;
xAxis.flippedCoordinates = false;
yAxis.axisAlignment = EAxisAlignment.Top;
yAxis.flippedCoordinates = true;
const fastLineSeries = new FastLineRenderableSeries(wasmContext, {
dataSeries: ds,
strokeThickness: 1,
stroke: "red"
pointMarker: new SquarePointMarker(wasmContext, {
width: 5,
height: 5,
fill: "blue",
stroke: "blue",
strokeThickness: 1,
});
});
According to SciChart.js Forums, this issue was patched in build 1.1.1362.
You can get the latest builds of SciChart.js over at npm.
Related
Is there any way to do the same with the cropbox action in the link below?
I am using the latest version of konva, but it seems that the link does not work after version 4.
https://codepen.io/kade87/pen/vYavQMp?editors=1011
How can I use it to work like a link in the latest version?
We must solve this problem. Or is there a javascript crop library that supports both pc and mobile? If so, please recommend. However, most of the libraries didn't work the way we wanted.
<script src="https://unpkg.com/konva#^4/konva.min.js"></script>
<div id="container"></div>
<script>
// noprotect
const stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
const layer = new Konva.Layer();
stage.add(layer);
Konva.Image.fromURL('https://i.imgur.com/ktWThtZ.png', img => {
img.setAttrs({
width: stage.width(),
height: stage.height(),
opacity: 0.5
});
layer.add(img)
})
Konva.Image.fromURL('https://i.imgur.com/ktWThtZ.png', img => {
var group = new Konva.Group({
clipFunc: (ctx) => {
ctx.save();
ctx.translate(fakeShape.x(), fakeShape.y())
ctx.rotate(Konva.getAngle(fakeShape.rotation()))
ctx.rect(0, 0, fakeShape.width() * fakeShape.scaleX(), fakeShape.height() * fakeShape.scaleY());
ctx.restore()
}
})
layer.add(group);
img.setAttrs({
width: stage.width(),
height: stage.height(),
});
group.add(img);
var fakeShape = new Konva.Rect({
width: 100,
height: 100,
x: 100,
y: 100,
fill: 'rgba(0,0,0,0)',
draggable: true
})
layer.add(fakeShape);
var tr = new Konva.Transformer({
enabledAnchors: ['top-left', 'bottom-right'],
rotateEnabled: false,
keepRatio: false,
flipEnabled: true,
node: fakeShape,
boundBoxFunc: (oldBox, newBox) => {
if(newBox.width < 50) {
newBox.width = 50
// newBox.x = oldBox.x
}
if(newBox.height < 50) {
newBox.height = 50
// newBox.y = oldBox.y
}
return newBox
}
});
layer.add(tr);
layer.draw();
});
</script>
I have developed blinking markups on my model viewer and used below code part for it. But, when I changed camera viewing on my model, the location of markups has been changed and they were located incorrectly. I want to hook them and not to change the state of them.
$('#mymk'+randomId).append('<svg id="mysvg'+randomId+ '"></svg>')
$('#mysvg'+randomId ).css({
'width': '50px'
});
var rad = 12;
const size=300;
var s = Snap($('#mysvg'+randomId)[0]);
s.attr({viewBox: "0 0 " + size + " " + size});
const userPath = s.path("M500,10C229.4,10,10,229.4,10,500c0,270.6,219.4,490,490,490c270.6,0,490-219.4,490-490S770.6,10,500,10z M496.2,255c70,0,126.7,56.7,126.7,126.7s-56.7,126.7-126.7,126.7s-126.7-56.7-126.7-126.7C369.5,311.7,426.3,255,496.2,255z M629.1,745h-266c-25.8,0-78.2-21.1-78.2-46.8v0c0-85.8,70.4-156,156.4-156h109.5c86,0,156.4,70.2,156.4,156C707.4,723.9,654.9,745,629.1,745z")
.attr({fill: "#029e02"});
const userBox = userPath.getBBox();
const circleBg = s.circle(userBox.cx, userBox.cy, userBox.width / 2)
.attr({fill: "#029e02", stroke: "#029e02", strokeWidth: 800});
const user = s.group(circleBg, userPath);
const userScaleFactor = 0.09;
const userMtx = new Snap.Matrix();
userMtx.translate(size/2 - userBox.width*userScaleFactor / 2, size/2 - userBox.height*userScaleFactor/2);
userMtx.scale(userScaleFactor);
user.attr({transform: userMtx, cursor: "pointer"});
const smallUserMtx = userMtx.clone().scale(0.9, 0.9, userBox.cx, userBox.cy);
setInterval(blink, 3000);
function blink(){
user.animate({transform: smallUserMtx}, 200, mina.easein, () => user.animate({transform: userMtx}, 200));
const newCircle = s.circle(size/2, size/2, 40);
user.before(newCircle);
newCircle.attr({fill: "rgb(244, 203, 217)", strokeWidth: "20", stroke: "#015401"});
newCircle.animate({r: size/2, opacity: 0}, 2000, mina.easeout, () => newCircle.remove());
};
user.attr({
pointerEvents: "auto",
cursor: "pointer"
});
In the viewer this is typically handled by locking the camera navigation, basically preventing the user from moving the camera while the overlay markups are displayed. You can use the setNavigationLock method to control the navigation.
Just to preface, I'm very new to code! I'm working with Chart.js to show the number of recruitment candidates generated from a marketing campaign. I'm trying to display the data generated on a weekly basis. So I'll have a start date and the x-axis will show every next week. Right now, I can only get it to show every day. Again, I'm not well versed on the topic just yet so I apologize if I'm not explaining it properly. For this example the x-axis would sat 2020/11/20, 2020/12/07, 2020/12/14 and so on. Thanks!
What I have so far
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'></script>
<canvas id="timeSeriesChart"></canvas>
<script>
Chart.defaults.global.defaultFontFamily = 'Poppins';
const ctx = document.getElementById('timeSeriesChart').getContext('2d');
const startDate = new Date(2020, 10, 30);
const labels = [];
for (let i = 0; i < 13; i++) {
const date = moment(startDate).add(i, 'days').format('YYYY/MM/DD');
labels.push(date.toString());
}
const chart = new Chart(ctx, {
type: 'line',
data: {
labels,
datasets: [{
label: 'Recruitment Candidates',
data: [4, 5, 6, 90, 56, 32, 14, 6, 72, 99],
borderWidth: 1
}]
},
options: {}
});
</script>
Welcome to the world of coding. Never mind asking questions - it's professional, and we all started one day :-)
I hope I understood correctly your need and offer a solution right away with latest version:
Chart.js v3.xx (not compatible with v2.xx)
Time Series Axis (with moment.js + adapter):
Source: https://www.chartjs.org/docs/latest/axes/cartesian/timeseries.html
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
//gets you the latest version of chart, now v3.2.1
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
//you need this adapter for timeseries to work with momentjs
<div>
<canvas id="timeSeriesChart"></canvas>
</div>
<script>
Chart.defaults.font.family = 'Poppins';
// watch out, it's not Chart.defaults.global.defaultFontFamily anymore as in v2.xx
const ctx = document.getElementById('timeSeriesChart').getContext('2d');
const startDate = new Date(2020, 10, 30);
const labels = [];
let i = 0;
//tip: declare variable `i` outside `for ()` loop - better performance
let date = new Date();
//also: declare variable `date` outside `for ()` loop
for (i; i < 13; i++) {
date = moment(startDate).add(i, 'weeks').format('YYYY/MM/DD');
//add `weeks` instead of `days` if you have weekly totals
//add `days` if you have daily totals
labels.push(date.toString());
}
const chart = new Chart(ctx, {
type: 'line',
data: {
labels,
datasets: [{
label: 'Recruitment Candidates',
data: [4, 5, 6, 90, 56, 32, 14, 6, 72, 99],
borderWidth: 1,
tension: 0.3,
fill: true
}]
},
options: {
scales: { //watch out here - new syntax in v3.xx
x: {
type: 'timeseries',
time: {
unit: 'week', //this does the trick :-)
isoWeekday: true,
// declare Monday as the first day of the week
// because in some locale, sunday would be first day of week
}
}
}
}
});
</script>
You should get following result:
Hope this helps and happy coding ...
This map is of Population Totals in a neighborhood. The layer 'Population2000Layer' includes the attribute field 'Total'. Just need to reach in there and display the total at the polygon's center with some like
choroplethize(feature.properties.Total)
The goal is to use to the Total Population attribute to label each polygon:
function choroplethize(d) {
<!-- jenks breaks from 2010 were applied to 2000 as well-->
return d > 1175 ? '#045a8d' :
d > 1083 ? '#2b8cbe' :
d > 801 ? '#74a9cf' :
d > 711 ? '#bdc9e1' :
'#f1eef6';
}
// styling for the total Population layers
function styleTotalPop(feature) {
return {
weight: 3,
opacity: 0.25,
color: 'black',
dashArray: '3',
fillOpacity: 0.9,
fillColor: choroplethize(feature.properties.Total)
}
}
<!-- add blocks' Populations for 2000 and 2010 as GeoJSON layer -->
var Population2000Layer = L.geoJson(Population2000, {
style: styleTotalPop,
onEachFeature: geojsonPopup2000,
pointToLayer: function (feature, latlng) {
return L.marker(latlng);
}
});
In my case my JS doesn't make choroplethize categories, but I declared some cases with other syntax. I think this could be helpful for you.
These are the attributes:
var calzada = new L.geoJson(data, {
style: function (feature) {
var c;
switch (feature.properties.dpv_cal) {
case 'Natural':
c = '#ffffff';
break;
case 'Mejorada':
c = '#db6adb';
break;
case 'Pavimentada':
c = '#ff0127';
break;
default:
c = '#000000';
}
return {color: c, opacity: 1, weight: 2};
}
}).addTo(map);
This is just a part of my code, obviously, and worked for me. It is a line shape and refers to different routes' categories.
I have used an example and can successfully read data using php and mysql and plot it (timebase vs a variable), all works fine. I have taken that and used it as a template and used a different db that doesn't use a timebase but the graph isn't rendering. The graph is meant to display data from an SQL query that collates the frequency of occurrence of a variable with the variable on the x axis and the frequency of occurrence on the Y axis.
The chart pops up with the x and y axis values as expected. It looks right; except the plot is missing. To assist my troubleshooting I have listed the data on the screen albeit not pretty- this proves the db is being called correctly and there are no obvious SQL errors and that data is being returned.
db_code`
<?php
$con = mysql_connect("localhost","root","hal9000");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("sqm", $con);
$result = mysql_query("SELECT magnitude, COUNT(*) AS xxx FROM data WHERE magnitude > 1 GROUP by magnitude");
while($row = mysql_fetch_array($result)) {
echo $row['magnitude'] . "\t" . $row['xxx']. "\n";
}
mysql_close($con);
?> `
main_page code
<script type="text/javascript">
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'common_LHS',
defaultSeriesType: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Magnitude',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
plotOptions: {
series: {
marker: {
enabled: true,
symbol: 'circle',
radius: 0
}
}
},
xAxis: {
type: 'linear',
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'center',
x: -3,
y: 20
}
},
yAxis: {
title: {
text: 'Frequency of occurrence'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
tooltip: {
crosshairs: [{
width: 2,
color: 'red'
}, {
width: 2,
color: 'red'
}],
},
series: [{
name: 'Occurrence',
}]
}
jQuery.get('data.php', null, function(tsv) {
var lines = [];
traffic = [];
try {
// split the data return into lines and parse them
tsv = tsv.split(/\n/g);
jQuery.each(tsv, function(i, line) {
line = line.split(/\t/);
traffic.push ([
parseFloat(line[0]), //need to parseFloat to convert data to float from string
parseFloat(line[1])
]);
});
} catch (e) { }
options.series[0].data = traffic;
chart = new Highcharts.Chart(options);
});
});
The data looks as I expected when graphed in LibreCalc, apart from the line not rendering it is almost done in Highcharts.
Appreciate any advice. Unfortunately since I am new to this forum I can't submit images but happy to send them to someone if it helps.
Expect it is something simple, usually is :)
I think the problem comes from the way you build your traffic array. It might not be well sorted. Try to sort it by the first element, using something like:
function Comparator(a,b){
if (a[0] < b[0]) return -1;
if (a[0] > b[0]) return 1;
return 0;
}
traffic.sort(Comparator);
options.series[0].data = traffic;
Does it give you a different result ? Also, does your browser console log something when rendering the chart ?
Well I said it would be simple and it was.
I added ,10 to make sure it was decimal and it didn't make any difference. I changed it to 16 and was expecting the values to change and it did so it was definitely reading the data although it still didn't plot the data.
I then added .replace(',', '') to the y axis and it worked.
parseFloat (line[1],10),
parseFloat (line[1].replace(',', ''), 10)
Seems it doesn't like comma's in the data value!