It seems that Amchart is caching the json and it is not drawing the graph nor legend.
First time I open the modal it displays fine, but if I close it and open again it displays all the data in labels (taken from the same JSON), but the chart is not being drawed. Is it a caching issue?
This is the way I am drawing it:
var modelPie = #Html.Raw(jsonPie);
var dataProvider = [];
dataProvider = modelPie.UsefulLifes;
var chartdivdounut = AmCharts.makeChart("chartdivdounut", {
"type": "pie",
"startDuration": 0,
"theme": "light",
"addClassNames": true,
"legend": {
"position": "right",
"marginRight": 0,
"autoMargins": false
},
"innerRadius": "30%",
"defs": {
"filter": [{
"id": "shadow",
"width": "200%",
"height": "200%",
"feOffset": {
"result": "offOut",
"in": "SourceAlpha",
"dx": 0,
"dy": 0
},
"feGaussianBlur": {
"result": "blurOut",
"in": "offOut",
"stdDeviation": 5
},
"feBlend": {
"in": "SourceGraphic",
"in2": "blurOut",
"mode": "normal"
}
}]
},
"dataProvider": dataProvider,
"valueField": "Value",
"titleField": "FieldName",
"showZeroSlices": false,
"labelsEnabled": false,
"export": {
"enabled": true
}
});
chartdivdounut.addListener("init", handleInit);
chartdivdounut.addListener("rollOverSlice", function (e) {
handleRollOver(e);
});
function handleInit() {
chartdivdounut.legend.addListener("rollOverItem", handleRollOver);
}
function handleRollOver(e) {
var wedge = e.dataItem.wedge.node;
wedge.parentNode.appendChild(wedge);
}
enter code here
I realized that the script section in the partial view was being executed just one time.
Seems to be something messed up. I re-wrote that part of the code and it started to work properly.
Related
I created a dashboard in Kibana and included also some Vega visualizations. My problem is that I cannot make the Vega bar chart responsive in sense of dynamically adjusting the size when the window size changes:
The bar chart on the dashboard
Settings:
autosize: {
type: "fit",
contains: "padding",
resize: true,
}
Bar chart on the dashboard
The bar chart after resizing - data does not adjust to the window
Bar char after resizing
I also tried to follow the instructions here https://vega.github.io/vega-lite/docs/size.html and used setting width or height to "container", but nothing worked, or I am defining them incorrectly.
The complete Vega specification is available below:
{
$schema: https://vega.github.io/schema/vega-lite/v5.json
title: Test
autosize: {
type: "fit",
contains: "padding",
resize: true,
},
// Define the data source
data: {
url: {
%context%: true
%timefield%: time
index: test
body: {
"aggs":{
"date_hist":{
"date_histogram": {
"field": "time",
"calendar_interval": "day",
"format": "strict_date"
},
"aggs":{
"state":{
"terms": {
"field": "f.keyword",
"include":["active","revoked"],
"min_doc_count": 0,
"size": 10000
}
},
"increased":{
"bucket_script": {
"buckets_path": {
"in": "state['active']>_count",
"out": "state['revoked']>_count"
},
"script": "params.in - params.out"
}
},
"active_patients":{
"cumulative_sum": {
"buckets_path": "increased"
}
}
}
}
},
"size":0
}
}
format: {property: "aggregations.date_hist.buckets"}
}
mark: bar
encoding: {
x: {
field: key_as_string
type: ordinal
axis: {title: "Date", "labelAngle": 45}
}
y: {
field: active_patients.value
type: quantitative
axis: {title: " "}
}
"color": {"value": "#00A6CE "}
}
}
I would appreciate any assistance!
You need to create a signal that will listen window resize event.
This signal will read the container width.
"signals": [
{
"name": "width",
"init": "containerSize()[0]",
"on": [{ "events": "window:resize", "update": "containerSize()[0]" }]
}
],
After that, you need to define a range on xscale to read the signal previously created.
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "your_value"},
"range": [0, { "signal": "width" }],
"padding": 0.05
},
]
I'm trying to show labels on a point FeatureLayer, the label is not visible for just one Feature, But it become visible when the map change scale, is there any explanation?
Here is my code:
"renderer": {
"type": "class-breaks",
"field": "nums",
"classBreakInfos": [
{
"minValue": 0,
"maxValue": 9,
"label": " < 10",
"symbol": {
"type": "picture-marker",
"url": "./assets/picto/nums/vert.png",
"width": 30,
"height": 50
}
},
{
"minValue": 10,
"maxValue": 19,
"label": " 10 à 19",
"symbol": {
"type": "picture-marker",
"url": "./assets/picto/nums/orange.png",
"width": 30,
"height": 50
}
},
{
"minValue": 20,
"maxValue": 1000000,
"label": " > 19",
"symbol": {
"type": "picture-marker",
"url": "./assets/picto/nums/rouge.png",
"width": 30,
"height": 50
}
}
]
},
"labelingInfo": [
{
"labelExpressionInfo": {
"expression": "$feature.nums"
},
"labelPlacement": "center-center",
"symbol": {
"type": "text",
"color": "black",
"haloColor": "white",
"xoffset": -2,
"yoffset": 13,
"font": {
"size": 7,
"family": "sans-serif",
"weight": "bolder"
}
}
}
]
I joined a picture of the FeatureLayer labels problem:
Base on you definition, you are using the default deconflict strategy ("static"). Sometimes when overlaps occurs the overlapped label is not showed. Depends on the situation this strategy make sense or not.
You could try "none" option, to turn off deconfliction and you should not have that issue. It seems it might be what you are looking for.
labelClass.deconflictionStrategy = "none";
ArcGIS JS API - LabelClass deconflictionStrategy
I'm trying to create a pie chart with a custom set of colours using Am4Charts and the createFromConfig method.
I've followed the tutorial here but the chart keeps appearing with it's default color set.
Here is a sample of the JSON I've tried:
"innerRadius": 100,
"colors": {"list": ["#ff0000", "#00ff00", "#0000ff" ]},
"data": {
"0": {
"pot": "Within 8 days",
"value": "£111,119.70",
},
"1": {
"pot": "9 - 17 days",
"value": "£225,537.73"
},
"2": {
"pot": "18+ days",
"value": "£720,279.85"
}
},
"legend": [],
"xAxes": [
{
"type": "CategoryAxis",
"title": {
"text": "pot"
},
"dataFields": {
"category": "pot",
"title": {
"text": "Month"
}
},
"renderer": {
"labels": {
"rotation": 190,
"verticalCenter": "middle",
"horizontalCenter": "left"
}
}
}
],
"series": [
{
"type": "PieSeries",
"dataFields": {
"value": "value",
"category": "pot"
},
"ticks": {
"disabled": true
},
"labels": {
"disabled": true
},
}
],
Can somebody see where I've gone wrong?
Update 2:
Fixed in 4.0.0-beta.85.
Make sure you clear your browser cache after upgrading. And feel free to contact us again if you are still experiencing this issue.
Update 1:
Response from amchart contributor/CTO Martynas Majeris (https://github.com/martynasma):
Looks like there are two issues: documentation is wrong and there's a bug that prevents it from working :)
I updated the docs. It should say this:
{
// ...
"series": [{
// ...
"colors": {
"list": [
"#845EC2",
"#D65DB1",
"#FF6F91",
"#FF9671",
"#FFC75F",
"#F9F871"
]
}
}]
}
Also, fixed bug in dev version. New version will be released within 1-2 days.
Original
This might be a bug and I have opened an issue on amchart github. I will update this once I get a response: https://github.com/amcharts/amcharts4/issues/577
By the way, I do think your configuration JSON has couple issues:
data is an array, not an object
legend is an object, not an array
This is what I used to create the pie chart demo for the opened issue:
// Create chart instance in one go
let chart = am4core.createFromConfig({
"colors": {
"list": ["#ff0000","#00ff00", "#0000ff"]
},
// Create pie series
"series": [{
"colors": ["#ff0000","#00ff00", "#0000ff"],
"type": "PieSeries",
"dataFields": {
"value": "value",
"category": "pot"
}
}],
// Add data
"data": [{
"pot": "Within 8 days",
"value": "£111,119.70"
}, {
"pot": "9 - 17 days",
"value": "£225,537.73"
}, {
"pot": "18+ days",
"value": "£720,279.85"
}],
// Add legend
"legend": {},
"innerRadius": 100
}, "chart", am4charts.PieChart);
In am Charts, i have users list as category and duration (hh:mm:ss) in value axis graph. I had set grid count to 24 but, its not working as expected (1 hr * 24 steps). Its being set as 2000 secs steps. I tried changing a lot of parameter.
My sample data : https://live.amcharts.com/iMWNh/
Here, the duration split up is not working as expected in 1 hr split ups of 24 grids. My input data is in seconds.
Any advice ?
This helped me ! Hope someone finds it useful.
Hi,
Unfortunately, what you require would be impossible to implement using
Live Editor, due to some of its limitation.
However, it's possible using amCharts.
I have made necessary changes here:
https://codepen.io/team/amcharts/pen/55fe695a57e33657e9d5feb33423d481?editors=0010
AmCharts.useUTC = true;
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"categoryField": "category",
"rotate": true,
"startDuration": 1,
"backgroundAlpha": 0.8,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "Online(secs)",
"type": "column",
"valueField": "Online(sec)"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "Offline(secs)",
"type": "column",
"valueField": "Offline(sec)"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"maximum": 86400000,
"stackType": "regular",
"strictMinMax": true,
"autoGridCount": false,
"autoRotateCount": 0,
"gridCount": 24,
"labelRotation": 50.4,
"title": "",
"titleRotation": 0,
"type": "date",
"minPeriod": "hh",
"boldPeriodBeginning": false,
"markPeriodChange": false
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}
],
"dataProvider": [
{
"category": "Diana",
"Online(sec)": 7200000,
"Offline(sec)": 79200000
},
{
"category": "Clarke",
"Online(sec)": 18000000,
"Offline(sec)": 68400000
},
{
"category": "Bruce",
"Online(sec)": 3600000,
"Offline(sec)": 7200000
}
]
});
There were quite a few changes:
1) Remove the duration from value axis, and set its type: "date;
2) Make values in data non-string (remove quotes around them) and convert
to milliseconds, since JavaScript deals in milliseconds;
3) Similarly convert maximum in valueAxis to milliseconds as well;
4) Set the following two settings for valueAxis: (so that it does not try to
format the first hour differently)
"boldPeriodBeginning": false, "markPeriodChange": false
5) Finally, set AmCharts.useUTC = false before chart code. (this ensures that
timestamps are not being recalculated to local time zone)
I hope you find this useful.
Yours sincerely,
Martynas Majeris
amCharts
I am drawing a intractive graph using amcharts. I want to draw several line graphs in one single graph. But my code draw only one graph. When I add code for second line graph , it did not show anything due to error. How I can add second line graph in it. Here is .js file.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginTop":0,
"marginRight": 80,
"dataProvider": [{
"D": "100",
"value": 10
}, {
"D": "200",
"value": 20
}, {
"D": "200",
"value": 30
}, {
"D": "400",
"value": 40
}, {
"D": "500",
"value": 50
}],
"graphs": [{
"id":"g1",
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
"bullet": "round",
"bulletSize": 8,
"lineColor": "#d1655d",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value"
}],
"chartCursor": { /* required for zoom effect */
"cursorAlpha": 0,
"valueLineEnabled":true,
"valueLineBalloonEnabled":true,
"valueLineAlpha":0.5,
"fullWidth":true
},
/*show x axis values on graph*/
"categoryField": "D",
});
chart.addListener("rendered", zoomChart);
if(chart.zoomChart){
chart.zoomChart();
}
function zoomChart(){
chart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4), Math.round(chart.dataProvider.length * 0.55));
}
I found a solution. If you want to plot more linegraphs in one single graph. Just add extra id' in "graph": and add extra valueField inside that id. And add needed points in "dataProvider":. Similarly you can do this for more than 2 graphs by adding ids inside "graph":. And save it with .js extension.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginTop":0,
"marginRight": 80,
"dataProvider": [{
"D": "5",
"value":0.30,
"value1":0.5,
}, {
"D": "10",
"value": 0.29,
"value1":0.27,
}, {
"D": "15",
"value": 0.28,
"value1":0.20,
}, {
"D": "20",
"value": 0.27,
"value1":0.32,
}, {
"D": "25",
"value": 0.26,
"value1":0.25,
}],
"graphs": [{
"id":"g1",
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
"bullet": "round",
"bulletSize": 8,
"lineColor": "#d1655d",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"title": "redpoint",
"valueField": "value"
}, {
"id":"g2",
"balloonText": "[[category]]<br><b><span style='font-size:14px;> [value]]</span></b>",
"bullet": "round",
"bulletSize": 8,
"lineColor": "#20acd4",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"title": "bluepoint",
"valueField": "value1"
}],
"chartCursor": { /* required for zoom effect */
"cursorAlpha": 0,
"valueLineEnabled":true,
"valueLineBalloonEnabled":true,
"valueLineAlpha":0.5,
"fullWidth":true
},
/*legend show points value on top*/
"legend": {
"useGraphSettings": true,
"position": "top"
},
/*show x axis values on graph*/
"categoryField": "D",
});
chart.addListener("rendered", zoomChart);/*zoom effect*/
if(chart.zoomChart){
chart.zoomChart();
}
function zoomChart(){
chart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4), Math.round(chart.dataProvider.length * 0.55));
}