I'm building a multiple series line chart using Apexcharts under Vue3, and running into an issue where chart options are not being updated. The series data updates as expected, but I have yet to see an option update successfully.
I'm using composition api with ref, which overall seems to be working great. But once the chart is assigned via lineChart.value = achart, no changes I make will update the chart. For example, the options file contains colors: ['#FFFF00', '#0000FF'], which is yellow and blue, but updating the ref with new colors changes nothing on the chart. Looking at the data using moustache syntax, I can see the new color values have been updated, but not in the chart. See attached screenshot.
I have followed every guide and post I can find, but still no luck. Does anyone know if this is a common issue, or if there is some special consideration I should be taking? If this is a larger issue I'll work on creating a codepen project.
Thanks
UPDATE: Adding a codesandbox.io project
Use updateOptions insted https://apexcharts.com/docs/methods/#updateOptions
ApexCharts.exec("chartID", "updateOptions", {
series: [
{
data: [1,2,3,2]
}
],
xaxis: {
categories: ['a', 'b', 'c','d'],
},
colors:['#00ff00']
})
I encounter the same problem, since I use async and await the data updates after a seconds but doesnt update the chart itself,
I read the docs and it said that you need to update the whole value of the chart options.
chartOptions.value.xaxis.categories = [2020, 2021, 2022]
instead
chartOptions.value = {
... charts: {}
xaxis: {
...
categories: [2022, 2021, 2022]
Related
I am using PptGenJs (https://gitbrent.github.io/PptxGenJS/docs/api-charts/) to create a Multi Type Chart (a bar and a line in the same chart) in my Angular application. I am testing the demo code from the PptGenJs-Github-Repo, which you can find it here: https://github.com/gitbrent/PptxGenJS/blob/master/demos/modules/demo_chart.mjs#L1715
I am surprised to find that it doesn't work in my case. I have PptGenJs Version of 3.10.0 and Angular Version of 13.2.0.
The problems are:
charts are not found in "type: pptx.charts.BAR". Instead, I have to change it to "type: pptx.ChartType.bar"
the method of "slide.addChart(chartTypes, opts)" shows error. It seems that the parameter of "data" is missing according to its documentation:
addChart(type: CHART_NAME | IChartMulti[], data: any[], options?: IChartOpts): Slide
I must have done something wrong, but have no idea. Could anyone help me? Many thanks.
regards,
CC
I am in Terraform 14 and I am trying to add labels to my template file which should generate a YAML:
Template File:
labels:
${labels}
Code:
locals {
labels = merge(
var.labels,
map(
"module", basename(abspath(path.module)),
"module_version", var.module_version
)
)
prometheus_config = templatefile("${path.module}/prometheus.tmpl", {
labels = indent(8, yamlencode(local.labels))
})
When I try to add the labels indenting with 8 this outputs in the template file causing YAML errors:
Error Output:
labels:
"module": "my_module"
"module_version": "1.0"
As you can see the module_version has indent 8 which is correct but the module line is not indented.
I tried many things like moving ${labels} everywhere in the beginning, with multiple indentations but nothing seems to work.
It is for this reason that the templatefile documentation recommends using yamlencode for the entire data structure, rather than trying to concantenate bits of YAML together using just string templates. That way the yamlencode function can guarantee you a correctly-formatted result and you only have to produce a suitable data structure:
In your case, that would involve replacing the template contents with the following:
${yamlencode({
labels = labels
})}
...and then replacing the prometheus_config definition with the following:
locals {
prometheus_config = templatefile("${path.module}/prometheus.tmpl", {
labels = local.labels
})
}
Notice that the yamlencode call is now inside the template, and it covers the entire YAML document rather than just a fragment of it.
With a simple test configuration I put together with some hard-coded values for the variables you didn't show, I got the following value for local.prometheus_config:
"labels":
"module": "example"
"module_version": "1.0"
If this was a full example of the YAML you are aiming to generate then I might also consider simplifying but just inlining the yamlencode call directly inside the local value definition, and not have the separate template file at all:
locals {
prometheus_config = yamlencode({
labels = local.labels
})
}
If the real YAML is much larger or is likely to grow larger later then I'd probably still keep that templatefile call, but I just wanted to note this for completeness, since there's more than one way to get this done.
So using terraform 14 I was not able to transform lists or maps into yaml with yamlencode. Every option I tried using the suggested answer produced results with the wrong indentation. Maybe due to the many indentation levels in the file... I am not sure. So I dropped the use of yamlencode in the solution.
Solution:
I decided to use inline solution so for lists I transform then with string with join and for maps I use jsonencode so:
# var.list is a list in terraform
# local.abels is a map in terraform
thanos_config = templatefile("${path.module}/thanos.tmpl", {
urls = join(",", var.list),
labels = jsonencode(local.labels)
})
The resulting plan output is a bit ugly but it works.
I would like to make such a map that only allows checking/showing 2 layers at a time and it should show some warning if chosen more.
After searching the internet, and taking a look at these possible solutions and references: first, second, third etc.
...I still can't get my code to do this simple thing: to count the layers in a layer group and according to that, to show a message.
Here my code:
var NumbActive = new L.layerGroup();
NumbActive.addTo(map);
map.on('overlayadd',function(active){
if (active.layer===LAY1){
NumbActive.addLayer(LAY1);
}});
map.on('overlayadd',function(active){
if (active.layer===LAY2){
NumbActive.addLayer(LAY2);
}});
map.on('overlayadd',function(active){
if (active.layer===LAY3){
NumbActive.addLayer(LAY3);
}});
size = NumbActive.getLayers().length;
var options = { timeout: 5000 };
var box = L.control.messagebox(options).addTo(map);
if (size >2){
box.show( 'Please choose only 2 layers at the same time!' );
};
I am also using this plugin for showing messages, which normally works fine, but in this case not at all.
I thought that layerGroup.getLayers().length should give a number as a result (length of an array)? It should work but somehow it doesn't.
Please tell me your suggestions. It can't be that complicated. I would just like to know if I'm making some minor mistake that's possible to be corrected or should I write some new function/search for a plugin.
Thanks in advance! :)
i'm using JSNetworkX for graph exploration and rendering.
JSNetworkX is using D3.js for graph render. However, as I work with large graph (json file about 5Mb), I would like to render this graph directly without any animations (so, in placing each node directly without force attraction).
I try to use D3.layout.force().stop() after rendering, but it's without effects.
Because of that, I'm thinking that it has to be done in jsnx.draw, see my code below.
jsnx.draw(G, {
element: 'body',
d3: d3,
layout_attr: {
charge: -1500,
linkDistance: 1,
gravity: 1,
friction: 0.4,
alpha: -100
},
});
force = d3.layout.force();
Unfortunately, you can't do that with the current version. Do you need a force layout at all or do you already have positions for each node? FWIW, if you really have a large graph, even a static layout would be slow, because you'd still have too many SVG elements. The next version will include a WebGL rendered for large graphs.
So, we can't for the moment.
As of v0.3.4, jsnx.draw returns the force layout object so you can do var force = jsnx.draw{/*...*/} then force.stop().
In kendo 2012.3.1114, I ran across a numeric text box issue (see How can I have kendo NumericTextBox keep focus during highlighting in a kendo window?).
I've been unable to find a work around so in the interim I hesitantly decided (because I'm near end of the project release cycle) to try version 2012.3.1315. During my regression testing, I found that issue to be fixed but hideColumn of the grid component to be broken.
Here's a jsfiddle showing the issue
http://jsfiddle.net/e6shF/42/
Here's the code:
var grid = $("#grid").kendoGrid({
dataSource: {
data: [
{"foo": {"bar": 10, "moo": "y", "coo": 4}, "too": "test1"},
{"foo": {"bar": 20, "moo": "z", "coo": 3}, "too": "test1"}
]
},
columns: [
{
field: "foo.bar"
},
{
field: "foo.moo"
},
{
field: "foo.coo"
},
{
field: "too"
}
]
}).data("kendoGrid");
grid.hideColumn("foo.moo");
grid.hideColumn("foo.coo");
Notice that the second call to hideColumn will hide the column header but not the column data. It appears making a grid.refresh call after the second column hide will remedy the issue but this is was not necessary in the previous version (nor does the documentation indicate the call is necessary). I think this is a bug that was introduced, so I guess I'm trading one issue for a new issue (perhaps many issues).
Any thoughts on
1) how to fix this issue without a grid refresh or
2) why hideColumn is not working in the new version or
3) even better on how to fix the numeric text box issue in the other thread so I don't have to worry about hoping to catch and fix other issues in this new version prior to releasing
would be greatly appreciated?
This may not be the answer you're looking for, but I noticed that switching the order of column hiding makes the problem go away:
grid.hideColumn("foo.coo");
grid.hideColumn("foo.moo");
Here's a fiddle showing it working: http://jsfiddle.net/derickbailey/rkmqz/
I'll make the dev team aware of this, too.