I'm trying to build a Gantt chart based on amcharts. I will probably have only one item per line though, so I tried with the sample _JSON_ganttDateBased but when I leave only one item per row (John, Smith and Ben only have one task each), the X axis reverts to time instead of date.
I looked into floating bar as a possible way around but I'm not sure I can put dates on the axis.
Thanks
This happens because the total time span is small and there's plenty of space to put grid lines / labels on X axis. So the chart reverts to lines.
This can be easily resolved by enforcing the granularity for your value axis to daily:
"valueAxis": {
"type": "date",
"minPeriod": "DD"
}
That should revert your axis increments back to days.
Here's a working example:
var chart = AmCharts.makeChart( "chartdiv", {
"type": "gantt",
"period": "DD",
"valueAxis": {
"type": "date",
"minPeriod": "DD"
},
"brightnessStep": 10,
"graph": {
"fillAlphas": 1,
"balloonText": "[[open]] - [[value]]"
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"dataDateFormat": "YYYY-MM-DD",
"startDateField": "start",
"endDateField": "end",
"dataProvider": [ {
"category": "John",
"segments": [ {
"start": "2015-01-02",
"end": "2015-01-03"
} ]
}, {
"category": "Smith",
"segments": [ {
"start": "2015-01-01",
"end": "2015-01-02"
} ]
}, {
"category": "Ben",
"segments": [ {
"start": "2015-01-06",
"end": "2015-01-09"
} ]
} ],
"chartCursor": {
"valueBalloonsEnabled": false,
"cursorAlpha": 0,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true
},
"chartScrollbar": {
}
} );
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/gantt.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
Related
I'm looking to make a radarchart in chart.js with an empty center like this:
Thus, I'm looking to make the angle line (the line going from the center) to start at 2 and the center to be a white pentagon in the following working example:
radarChart = new Chart('radarCanvas',{
"type": "radar",
"data": {
"labels": [
"Management & Leadership",
"Education & Teaching",
"Research",
"Impact",
"Team"
],
"datasets": [
{
"label": "4-3-21",
"backgroundColor": "rgb(231,74,59,0.5)",
"hoverBackgroundColor": "rgb(231,74,59,0.8)",
"borderColor": "rgb(231,74,59)",
"data": [
2.7,
3.8,
4.6,
2.2,
3.2
]
}
]
},
"options": {
"responsive": true,
"maintainAspectRatio": false,
"scale": {
"angleLines": {
"color": "rgb(90,92,105)"
},
"gridLines": {
"color": "rgb(90,92,105)"
},
"ticks": {
max: 10,
min: 0,
stepSize: 2,
}
}
}
})
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="radarCanvas" width="400" height="400"></canvas>
Solution I've tried sofar and their shortcomings:
Change angleline options: there exists no property that allows this in the documentation
Draw a dataset with a white backgroundcolor: dataset [2,2,2,2,2] for the above graph should perfectly cover the anglelines, but chart.js mixes the background color with overlaying datasets resulting in non-white overlay, also I have found no way of turning of labels for this dataset in the legenda resulting in a empty label next to the labels for the different datasets
The internet: I've found one mention of this being possible by the developers but have not been able to find the solution..
You could try to achieve something like this by making the ticks scale negative (min: -2) and then using the borderDash configuration for angleLines. However, if the size of your chart changes, you will also need to adjust the 4th array number in borderDash accordingly.
The below code should render something like this for my screen size:
radarChart = new Chart('radarCanvas', {
"type": "radar",
"data": {
"labels": [
"Management & Leadership",
"Education & Teaching",
"Research",
"Impact",
"Team"
],
"datasets": [{
"label": "4-3-21",
"backgroundColor": "rgb(231,74,59,0.5)",
"hoverBackgroundColor": "rgb(231,74,59,0.8)",
"borderColor": "rgb(231,74,59)",
"data": [
2.7,
3.8,
4.6,
2.2,
3.2
]
}]
},
"options": {
"responsive": true,
"maintainAspectRatio": false,
"scale": {
"angleLines": {
"color": "rgb(90,92,105)",
"lineWidth": 1,
"borderDash": [
0,
0,
0,
28,
150,
250
]
},
"gridLines": {
"color": "rgb(90,92,105)"
},
"ticks": {
"max": 10,
"min": -2,
"stepSize": 2,
"callback": function(tickValue, index, ticks) {
if (tickValue >= -0) {
return tickValue
}
return null
},
},
"max": 10,
"min": -4,
"beginAtZero": false
}
}
})
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="radarCanvas" width="400" height="400"></canvas>
I have an AmCharts working, this is the code:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"precision":"3",
"decimalSeparator": ",",
"thousandsSeparator": ".",
"legend": {
"horizontalGap": 10,
"maxColumns": 3,
"position": "top",
"useGraphSettings": false,
"markerSize": 10,
"marginTop": 20,
"autoMargins":true,
"forceWidth":true,
"valueAlign":"right",
"labelWidth":85,
"valueWidth":85
},
"dataProvider": response,
"synchronizeGrid":true,
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Activos"
}],
/*"startDuration": 0.5,*/
"graphs": graphs,
"chartScrollbar": {},
"chartCursor": {
"cursorPosition": "mouse"
},
"categoryField": "diahora",
"categoryAxis": {
/*"parseDates": true,*/
"gridPosition": "start",
"axisColor": "#DADADA",
/*"minorGridEnabled": true*/
},
"export": {
"enabled": true,
"position": "top-right",
"class": "export-main",
"menu": [ {
"title": "Exportar el gráfico a archivo de imagen",
"label": "Descargar",
"menu": [ "PNG", "JPG", "PDF" ]
}]
}
});
I'm calling it with ajax with:
$.get(url, function(response){
So, I need to get the 2 values of the range of X of the graph that is being rendered on the browser after a zoom, any idea?
For example, when the graph starts, the range of the axis x are 0 and 100. If I zoom into some range, for example 40 and 60, I need to retrieve those values (40 and 60) because I will use them for another things in the page.
So, how could I save those ranges after every ajax call?
AmCharts provides the zoomed event, which gives you the start and end indices/values. You can use that and store the values for whatever you need, e.g.
AmCharts.makeChart("chartdiv", {
// ...
listeners: [{
event: "zoomed",
method: function(e) {
//e.startIndex and e.endIndex gives you the indicies in the dataProvider
//e.startValue and e.endValue gives you the start and end values
//e.startDate and e.endDate gives you the start and end dates if you're using parseDates
}
}]
});
Note that zoomed is also called on the initial load. If you don't want to capture the initial start/end values, you might need to keep track of the first load before storing those values on subsequent zoom events.
I am new to javascript and am working on an application which would allow someone to view a plot for data using amCharts. I had tried Dash by Plotly but unfortunately on a shared platform I couldnt run it as it consumed more resources than expected. The challenge I have been having is linking the dropdown menu to the amCharts. I tried linking them up using the code below but returned errors saying value is not known. I have the following blocks of code can someone assist in linking them up.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#dropdown {
width : 100%;
height : auto;
}
#chartdiv {
width : 100%;
height : 500px;
}
</style>
<meta charset="utf-8"/>
<script src="amcharts.js" type="text/javascript"></script>
<script src="serial.js" type="text/javascript"></script>
<script src="amstock.js" type="text/javascript"></script>
<script src="plugins/dataloader/dataloader.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
</head>
<body>
<script>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
d3.csv("data.csv", function(error, data) {
var select = d3.select("body")
.append("div")
.append("select")
select
.on("change", function(d) {
var value = d3.select(this).property("value");
});
select.selectAll("option")
.data(data)
.enter()
.append("option")
.attr("value", function (d) { return d.value; })
.text(function (d) { return d.label; });
});
var chart = AmCharts.makeChart( "chartdiv", {
"path": "/amcharts/",
"type": "stock",
"theme": "light",
"dataSets": [ {
"title": value,
"fieldMappings": [ {
"fromField": "Open",
"toField": "open"
}, {
"fromField": "High",
"toField": "high"
}, {
"fromField": "Low",
"toField": "low"
}, {
"fromField": "Close",
"toField": "close"
}, {
"fromField": "Volume",
"toField": "volume"
} ],
"compared": false,
"categoryField": "Date",
/**
* data loader for data set data
*/
"dataLoader": {
"url": "http://www.google.com/finance/historical?q="+value+":ADBE&startdate=Jan+01%2C+2009&enddate=Aug+2%2C+2012&output=csv",
"format": "csv",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": false,
"delimiter": ",",
"useColumnNames": true
},
}],
"panels": [ {
"showCategoryAxis": false,
"title": "Value",
"percentHeight": 70,
"stockGraphs": [ {
"type": "line",
"id": "g1",
/*"openField": "open",
"closeField": "close",
"highField": "high",
"lowField": "low",*/
"valueField": "close",
"lineColor": "#db4c3c",
"fillColors": "#fff",
"negativeLineColor": "#db4c3c",
"negativeFillColors": "#db4c3c",
"fillAlphas": 0,
"comparedGraphLineThickness": 2,
"columnWidth": 0.7,
"useDataSetColors": false,
"comparable": true,
"compareField": "close",
"showBalloon": false,
"proCandlesticks": true
} ],
"stockLegend": {
"periodValueTextComparing": "[[percents.value.close]]%",
"periodValueTextRegular": "[[value.close]]"
}
}, {
"title": "Volume",
"percentHeight": 30,
"stockGraphs": [ {
"valueField": "volume",
"type": "column",
"showBalloon": false,
"fillAlphas": 1,
"lineColor": "#db4c3c",
"fillColors": "#db4c3c",
"negativeLineColor": "#db4c3c",
"negativeFillColors": "#db4c3c"
} ],
"stockLegend": {
"periodValueTextRegular": "[[value.close]]"
}
} ],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"fullWidth": true,
"cursorAlpha": 0.1,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"valueLineAlpha": 0.5
},
"periodSelector": {
"position": "left",
"periods": [ {
"period": "MM",
"selected": true,
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
},{
"period": "YYYY",
"count": 2,
"label": "2 year"
},{
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
} ]
},
"dataSetSelector": {
"position": "left"
},
"export": {
"enabled": true
}
} );
</script>
<div id="chartdiv"></div>
</body>
</html>
The trick is retaining the value of the dropdown and appending it to the url. The other thing is it possible to create a call back function to update the plot whenever the dropdown is changed. The contents of the dropdown are
name,ticker
apple, AAPL
google,googl
microsoft,msft
The first row being the header row with column names. The intention is not to hard code the dataset and the dropdown to allow someone without any knowledge to change add a dataset to the list. Its not necessarily financial data but also healthcare and other forms. chose this as a working example coz it was nearest.
value isn't defined by the time AmCharts.makeChart is called due to the fact that the csv method is asynchronous. You'll want to adjust your setup so that your csv callback creates the initial chart with a default value, e.g.
var chart;
d3.csv("data.csv", function(error, data) {
// ... other code ...
var value = data[0].ticker; //for this particular use case - update to the appropriate csv column name as needed
chart = AmCharts.makeChart("...", {
// ... rest of your config as usual, including the now defined value variable
});
});
To make the dropdown update the chart, you need to modify the chart instance's dataLoader url then call the loadData method during the change callback:
select
.on("change", function(d) {
var value = d3.select(this).property("value");
chart.dataSets[0].dataLoader.url = /* modify the url string here */
chart.dataSets[0].dataLoader.loadData(); //reload the data with new URL value
});
Highcharts ng heatmap draw line instead of boxes
$scope.chartConfig = {
"chart": {
"type": "heatmap"
},
"credits": {
"enabled": false
},
"size": {
"height": 1000
},
"title": {
"text": ""
},
"xAxis": {
"categories": ["23-02-2005", "24-02-2005", "27-02-2005", "28-02-2005", "01-03-2005", "02-03-2005"]
},
"yAxis": {
"categories": ["Bond2Y", "Bond3Y"],
"title": null
},
"series": [{
"name": "Trades Data",
"borderWidth": 1,
"data": [
[0, 0, 0.7642386249005615],
[0, 1, 0.5010608923969173],
[1, 0, 0.5009742082142428],
[1, 1, 0.9114076033035807]
],
"dataLabels": {
"enabled": false,
"color": "#000000"
}
}]
}
Angular Highcharts
When i place these config with JQuery Its works fi
jQuery Highcharts
Is this is the highcharts-ng issue ?
When I checked your fiddle I had observed that you have not included the heatmap.js library.
Also, You need to move your chart and colorAxis inside the options block.
Check the below working fiddle link in which you can see the square blocks identical to your jQuery example.
Working Fiddle: http://jsfiddle.net/y9wjy0kz/10/
Hope this helps!
Is it possible to reverse the category axis of a time-based chart in amcharts? I know that the value axis can be easily flipped but I've not seen a solution for the category axis. I need to have the most relevant and therefore recent data on the left.
I'm using a time-based area chart. Here's a demo: http://jsfiddle.net/N5rpu/1/
In the example I've reversed the value axis and done the same to the category axis just to show that nothing happens.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"dataProvider": chartData,
"valueAxes": [{
"position": "left",
"title": "Unique visitors",
"reversed": true
}],
"graphs": [{
"fillAlphas": 0.4,
"valueField": "visits"
}],
"chartScrollbar": {},
"chartCursor": {
"categoryBalloonDateFormat": "JJ:NN, DD MMMM",
"cursorPosition": "mouse"
},
"categoryField": "date",
"categoryAxis": {
"minPeriod": "mm",
"parseDates": true,
"reversed": true
}
});
In fact I had the opposite problem - dates in the AmCharts categoryAxis where being displayed in reverse from chronological order!
This was achieved by ordering the dates from most recent to less recent in the dataProvider array, i.e.
"dataProvider": [{
"value": 74,
"date": "2014-11-16"
},
{
"value": 73,
"date": "2014-11-15"
},
{
"value": 70,
"date": "2014-11-14"
}];