We Keep Coding

Multiple brush charts with Apexcharts in VueJs

I'm developing an application where I'm using apex charts to create a brush chart. However, I want my brush to control multiple charts instead a single one, as the example shows.
Before I start working with callbacks I'm wondering if there is an easy-way of make this work with that library, for example by passing an array of targets:
brush:{
target: 'chart2',
enabled: true
},
Thanks in advance,

I think this might be undocumented, but apparently apexcharts lets you define this:
brush: { enabled: true, targets: ['candles', 'candles_2nd'] },
I found in the lib-code that it actually handles it like this:
var targets = w.config.chart.brush.targets || [w.config.chart.brush.target]; // retro compatibility with single target option
Regards,
Jim

mapbox-gl unclustered points overlaps as one circle

I'm trying to view a group of unclustered points on the map after zooming in to level 16 but, for understandable reasons all the circles are being rendered on top of each other.
What i'm trying to achieve is, after zooming to level 16, i want to show set markers that contain a correct total number of points being rendered at that point (similar to cluster) but i want to show the GeoJson properties that is attached to it.
i've tried mini clustering it with turf that didn't work. i would like to create a marker that shows min and max of the value of all the points that are near to each other.
here's my codesandbox
https://codesandbox.io/s/late-smoke-tuc6b

Could make something that looks like it work by reading this pull requesst and relative issue
Here is the codesandbox modified :
https://codesandbox.io/s/cocky-greider-dserm
the main idea is to use these options
map.on("load", () => {
map.addSource("earthquakes", {
type: "geojson",
// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
data,
cluster: true,
clusterMaxZoom: 15, // Max zoom to cluster points on
clusterRadius: 60, // Radius of each cluster when clustering points (defaults to 50)
// THIS OPTION TO ADD --------------------------------------
clusterProperties: {
max: ["max", ["get", "value"]],
min: ["min", ["get", "value"]]
}
});
// ...
map.addLayer({
id: "cluster-count",
type: "symbol",
source: "earthquakes",
filter: ["has", "max"],
layout: { // the text field ------------------------
"text-field": "min:{min}, max:{max}",
"text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
"text-size": 12
}
});
now you have more flexibility on what you can show, but remains the part of making a marker that fits the text
I'm not a mapbox user, hope this is what you were looking for
PS: you should change your API KEY now that anybody has been able to see it ...

Force-directed graph in Highcharts has lost its lines

First of all, here's the standard JSFiddle for a Force-Directed Graph.
Here's the JSFiddle for my (perhaps misuse of) Force-Directed Graph.
My JSFiddle is throwing a larger-than-usual lump of data at Highcharts (scroll right to the bottom of the JS panel to see actual code) which may be the reason why I'm having the problem that I am having, namely that the lines joining the nodes are missing.
Other non-standard things are happening, e.g.
series: [{
dataLabels: {
enabled: true
},
data: Data.DAT,
formatting: Data.FMT
}
]
The formatting tag is permitted (according to Highcharts themselves) as it doesn't clash with anything in Highcharts API. In subsequent iterations of the main code base, I put everything into data and refer to DAT and FMT deeper in.
It is possible that something in the node management is amiss
e.options.data.forEach(function (link, i) {
if (!e.options.formatting[link.from]) {
console.log("No formatting given for FROM %s", link.from);
} else {
nodes[link.from] = {
id: link.from,
marker: {
radius: e.options.formatting[link.from].size
},
plotX: e.options.formatting[link.from].x,
plotY: e.options.formatting[link.from].y,
fixedPosition: true,
name: e.options.formatting[link.from].name,
color: e.options.formatting[link.from].colour
};
}
if (!e.options.formatting[link.to]) {
console.log("No formatting given for TO %s", link.to);
} else {
nodes[link.to] = {
id: link.to,
marker: {
radius: e.options.formatting[link.to].size
},
plotX: e.options.formatting[link.to].x,
plotY: e.options.formatting[link.to].y,
fixedPosition: true,
name: e.options.formatting[link.to].name,
color: e.options.formatting[link.to].colour
};
}
});
However, I'm at a loss trying to work out how to gets the lines to reappear, thus this posting.

The reason your lines disappear is because you are above turboThreshold. You can see this by looking at console which gives the following error:
Highcharts error #12: www.highcharts.com/errors/12
The fix for this, is either to comply with turbo threshold, that is format your series as an array (which could improve performance). Or to increase the turbo threshold. The latter will make it work, but performance will not be great.
Working example: https://jsfiddle.net/ewolden/3qLdmut8/

Strange issue with Chart.js bar chart, image scattering

I've included in my HTML page a stacked bar graphic (with the Chart.js library) that makes user visualize some data. These data change on selection of the user, the Javascript function that enables this onclick feature is:
function aggLav(){
[...]
for(i=2; i<src.rows.length-1; i++){
cells[i]=row.insertCell(j);
cells[i].onclick = function () {//load graphic
dati=createData();
makeGrafico(dati, this.innerHTML);
var gr=document.getElementById("canvas");
if($(gr).is(':hidden')) $(gr).slideToggle();
};
}
where the function createData creates the JSON object (with labels and datasets) to pass to the graphic (works fine), and the function makeGrafico():
function makeGrafico(dati, titolo){
var d=getFirstMonday();
var mondays=[];
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: dati,
options: {
title:{
display:true,
text:titolo//change to name of procedure
},
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
}
takes the name of the parameter in order to display it, and the JSON object of the previous function.
When i first click on one procedure (the cell with the onclick feature rapresents an industrial procedure, not relevant), everything goes just fine, the graphic slides up and show the correct result. But when i click on another procedure, i expect to see the graphic related to that procedure: this is true, but when i move the mouse over the image, the graphic suddenly changes, making me see for a while the data of the first procedure i clicked.
In general, if i click 10 different procedures, and i hover the mouse on the graphic, i see all the 10 graphics alterning each other. If i manage to find the spot on where the graphic changes, it rests changed for all the time i leave the pointer on that position.
I'd surely like to make the data (and the graphic) be persistent, and relative to the last procedure i clicked.
How to solve this weird issue? Am i missing something? I'm new to this library.

You might be interested by this post. You need to clear the canvas at the beginning of your makeGrafico function.
In a first time, you should try adding window.myBar.destroy(). If it does not work, you should consider deleting the canvas element and then creating it again :
var $parent = $('#canvas').parent();
$('#canvas').remove();
$parent.append('<canvas id="canvas"></canvas>');

Multi bar chat with Flot

Any sample code for chart with multiple bars using flot ??
similar to this example . The given patched files are not working for me. Anywhere I can download the latest files for multi bar graph.
Update
I am sure Flot is a very good library but plugins/add-ons are not available easily and the examples given on the website are very basic, so I decided to use jqPlot instead

Updated Info: Andión's answer makes reference to this library. Bars-side-by-side
You can download the code here:
http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js
The result is :

Have you tried the orderBars plugin?
You can download the code here

You have to treat each bar as its own data series, so if you see 11 bars you need to create 11 data series.
Here's sample code for 2 bars.
<script id="source" language="javascript" type="text/javascript">
$(function () {
var d1 =[0, 2];
var d2 =[1,3];
var startData = [
{ //first series
label:"d1",
data: [d1],
bars:{
show: true,
fill: true,
fillColor: "red"
}
},
{ //second series
label:"d2",
data: [d2],
bars:{
show: true,
fill: true,
fillColor: "blue"
}
}
];
var option={
series: {
bars:{
show: true,
fill: true
}
},
grid: {
hoverable: true,
clickable: true
},
yaxis: { ticks: 5 }
};
$.plot($("#placeholder"),startData,option );
});

Double-check the values that you're passing in on the X-axis (of your bar series).
You don't need a different series for each bar, that would be.... excessive.
What you do need is a different series for each colour of bar (or more accurately, each different set of rendering settings that you'd like to have in your chart).
I realize you've moved on, but if you want to post the code that was giving you issues, it might help other people. The examples on the flot site are pretty straight-forward, so it may have just been something simple (like your X-axis value if they weren't defined) that was tripping you up.
I'm using flot in a production system to render three different bar series (red, yellow and green bars) so it sounds like a very similar solution what you're trying to do.