Radar chart mi and max axis values - amcharts

How to limit my Radar chart from 0 to 10?
I have tried to set minimum and maximum keys, but this did not work.
am4core.useTheme(am4themes_animated);
const chart = am4core.createFromConfig({
'xAxes': [{
'type': 'CategoryAxis',
'minimum': 0,
'maximum': 10,
'dataFields': {
'category': 'category'
},
'tooltip': {
'disabled': true
},
'renderer': {
'labels': {
'fill': '#757575',
'fontSize': 12
}
}
}],
'yAxes': [{
'type': 'ValueAxis',
'minimum': 0,
'maximum': 10,
'tooltip': {
'disabled': true
},
'renderer': {
'labels': {
'fill': '#757575',
'fontSize': 12
}
}
}],
'legend': {
'position': 'bottom',
'fontSize': '1rem',
'fontWeight': '400'
},
'cursor': {},
'series': [
{
'type': 'RadarSeries',
'dataFields': {
'valueY': 'value1',
'categoryX': 'category'
},
'fill': '#4a90e2',
'stroke': '#4a90e2',
'strokeWidth': 3,
'tooltipText': '{valueY}',
'renderer': {
'tooltip': {
'fill': '#fff'
}
},
'tooltip': {
'getFillFromObject': false,
'background': {
'fill': '#4a90e2'
}
},
'name': 'Средняя оценка',
'bullets': [{
'type': 'CircleBullet'
}]
}],
'data': data.map(el => {
return {
'category': el.sLabel,
'value1': el.iRating
};
})
}, 'radar-chart', am4charts.RadarChart);
I expect my chart axis to always start at 0 and end at 10.

Related

How to pass data in Laravel with Chart.js

I want to display total of men and woman from learnings table in chart using Chartjs in Laravel.
My controller
public function index()
{
$men_learning = DB::table('learnings')->where('active', 1)->whereYear('created_at', $year)->sum('men');
$women_learning = DB::table('learnings')->where('active', 1)->whereYear('created_at', $year)->sum('women');
$learning = $men_learning + $women_learning ;
return view('home', compact('learning'));
}
My script in blade view.
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['total'],
datasets: [{
label: '# of Votes',
data: [12],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
How can I propagate loaded statistic from my script to the chart?
public function index()
{
$men_learning = DB::table('learnings')->where('active', 1)->whereYear('created_at', $year)->sum('men');
$women_learning = DB::table('learnings')->where('active', 1)->whereYear('created_at', $year)->sum('women');
return view('home', compact('men_learning', 'women_learning'));
}
<script type="text/javascript">
$(function(){
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Men', 'Women'],
datasets: [{
label: 'Men',
data: [{!!$men_learning!!}],
borderWidth: 2,
backgroundColor: 'rgba(40,167,69,1)',
borderWidth: 0,
borderColor: 'transparent',
pointBorderWidth: 0 ,
pointRadius: 3.5,
pointBackgroundColor: 'transparent',
pointHoverBackgroundColor: 'rgba(254,86,83,.8)',
},
{
label: 'Women',
data: [{!!$women_learning!!}],
borderWidth: 2,
backgroundColor: 'rgba(220,53,69,.8)',
borderWidth: 0,
borderColor: 'transparent',
pointBorderWidth: 0,
pointRadius: 3.5,
pointBackgroundColor: 'transparent',
pointHoverBackgroundColor: 'rgba(63,82,227,.8)',
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
gridLines: {
display: true,
drawBorder: false,
color: '#f2f2f2',
},
ticks: {
beginAtZero: true,
stepSize: 100,
callback: function(value, index, values) {
return value;
}
}
}],
xAxes: [{
gridLines: {
display: false,
tickMarkLength: 15,
}
}]
},
}
});
});
</script>

AmCharts - Controlling value axis labels

I want my y-axis to have labels 0%, 25%, 50%, 75%, 100%
I would have expected a gridCount of 4 or 5 to do it, but it refuses. I've tried labelFrequency set to 25 but that doesn't work either.
window.AmCharts.makeChart('chartdiv', {
'type': 'serial',
'categoryField': 'category',
'dataDateFormat': 'YYYY-MM-DD',
'startDuration': 1,
'theme': 'light',
'categoryAxis': {
'parseDates': true,
'axisThickness': 0,
'color': '#989898',
'gridThickness': 0
},
'graphs': [
{
'fillAlphas': 1,
'type': 'column',
'valueField': 'column-1'
}
],
'valueAxes': [
{
'zeroGridAlpha': -2,
'titleColor': '#989898',
'axisThickness': 0,
'color': '#989898',
'gridThickness': 1,
unit: '%',
autoGridCount: false,
minimum:0,
maximum:100,
gridCount: 5
}
],
'dataProvider': [
{
'category': '2014-03-01',
'column-1': 8
},
{
'category': '2014-03-02',
'column-1': 16
},
{
'category': '2014-03-03',
'column-1': 2
},
{
'category': '2014-03-04',
'column-1': 7
},
{
'category': '2014-03-05',
'column-1': 5
},
{
'category': '2014-03-06',
'column-1': 9
},
{
'category': '2014-03-07',
'column-1': 4
},
{
'category': '2014-03-08',
'column-1': 15
},
{
'category': '2014-03-09',
'column-1': 12
},
{
'category': '2014-03-10',
'column-1': 17
},
{
'category': '2014-03-11',
'column-1': 18
},
{
'category': '2014-03-12',
'column-1': 21
},
{
'category': '2014-03-13',
'column-1': 24
},
{
'category': '2014-03-14',
'column-1': 23
},
{
'category': '2014-03-15',
'column-1': 24
}
]
})
Unfortunately there isn't a way to outright set your own axis divisions through the value axis properties. To workaround this, you can disable the value axis labels and grids and set up your own grid and labels using guides:
'valueAxes': [{
'zeroGridAlpha': -2,
'titleColor': '#989898',
'axisThickness': 0,
'color': '#989898',
'gridThickness': 1,
minimum: 0,
maximum: 100,
gridAlpha: 0,
tickLength: 0,
labelsEnabled: false,
guides: [{
value: 0,
label: "0%",
tickLength: 5,
lineAlpha: .15
}, {
value: 25,
label: "25%",
tickLength: 5,
lineAlpha: .15
}, {
value: 50,
label: "50%",
tickLength: 5,
lineAlpha: .15
}, {
value: 75,
label: "75%",
tickLength: 5,
lineAlpha: .15
}, {
value: 100,
label: "100%",
tickLength: 5,
lineAlpha: .15
},
]
}],
Demo below:
AmCharts.makeChart('chartdiv', {
'type': 'serial',
'categoryField': 'category',
'dataDateFormat': 'YYYY-MM-DD',
'startDuration': 1,
'theme': 'light',
'categoryAxis': {
'parseDates': true,
'axisThickness': 0,
'color': '#989898',
'gridThickness': 0
},
'graphs': [{
'fillAlphas': 1,
'type': 'column',
'valueField': 'column-1'
}],
'valueAxes': [{
'zeroGridAlpha': -2,
'titleColor': '#989898',
'axisThickness': 0,
'color': '#989898',
'gridThickness': 1,
minimum: 0,
maximum: 100,
gridAlpha: 0,
tickLength: 0,
labelsEnabled: false,
guides: [{
value: 0,
label: "0%",
tickLength: 5,
lineAlpha: .15
}, {
value: 25,
label: "25%",
tickLength: 5,
lineAlpha: .15
}, {
value: 50,
label: "50%",
tickLength: 5,
lineAlpha: .15
}, {
value: 75,
label: "75%",
tickLength: 5,
lineAlpha: .15
}, {
value: 100,
label: "100%",
tickLength: 5,
lineAlpha: .15
},
]
}],
'dataProvider': [{
'category': '2014-03-01',
'column-1': 8
},
{
'category': '2014-03-02',
'column-1': 16
},
{
'category': '2014-03-03',
'column-1': 2
},
{
'category': '2014-03-04',
'column-1': 7
},
{
'category': '2014-03-05',
'column-1': 5
},
{
'category': '2014-03-06',
'column-1': 9
},
{
'category': '2014-03-07',
'column-1': 4
},
{
'category': '2014-03-08',
'column-1': 15
},
{
'category': '2014-03-09',
'column-1': 12
},
{
'category': '2014-03-10',
'column-1': 17
},
{
'category': '2014-03-11',
'column-1': 18
},
{
'category': '2014-03-12',
'column-1': 21
},
{
'category': '2014-03-13',
'column-1': 24
},
{
'category': '2014-03-14',
'column-1': 23
},
{
'category': '2014-03-15',
'column-1': 24
}
]
})
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>

Setting a min & max on the axis

I am using anuglar-nvd3 and can't find any documentation on the API. The issue I'm facing right now is how can I set a maximum & minimum value on the xAxis and yAxis.
In other words regardless of the data, the axis would have a minimum of -1 and a maximum of 1.
Plunker: http://plnkr.co/edit/LKt3UJe5PnJOf8uQEwxr?p=preview
Code:
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'scatterChart',
height: 450,
color: d3.scale.category10().range(),
scatter: {
onlyCircles: false
},
showDistX: true,
showDistY: true,
tooltipContent: function(key) {
return '<h3>' + key + '</h3>';
},
duration: 350,
xAxis: {
scale: [0,5],
axisLabel: 'X Axis',
tickFormat: function(d){
return d3.format('.02f')(d);
}
},
yAxis: {
axisLabel: 'Y Axis',
tickFormat: function(d){
return d3.format('.02f')(d);
},
axisLabelDistance: -5
},
zoom: {
//NOTE: All attributes below are optional
enabled: false,
scaleExtent: [1, 10],
useFixedDomain: false,
useNiceScale: false,
horizontalOff: false,
verticalOff: false,
unzoomEventType: 'dblclick.zoom'
},
margin: {
top: 100,
right: 100,
left: 100,
bottom: 100
}
}
};
$scope.data = [
{
"key":"static",
"color":"#fff",
"values":[
{
"x":-1,
"y":-1,
"size":0.0000001,
"shape":"circle",
"series":0
},
{
"x":1,
"y":1,
"size":0.0000001,
"shape":"circle",
"series":0
}
]
},
{
"key":"Group 0",
"color":"#1f77b4",
"values":[
{
"x":-0.5,
"y":-0.5,
"size":0.5,
"shape":"circle",
"series":0
}
]
},
{
"key":"Group 1",
"color":"#ff7f0e",
"values":[
{
"x":-0.5,
"y":0.5,
"size":0.5,
"shape":"circle",
"series":0
}
]
},
{
"key":"Group 2",
"color":"#2ca02c",
"values":[
{
"x":0.5,
"y":-0.5,
"size":0.5,
"shape":"circle",
"series":0
}
]
},
{
"key":"Group 3",
"color":"#d62728",
"values":[
{
"x":0.5,
"y":0.5,
"size":0.5,
"shape":"circle",
"series":0
}
]
}
];
});
Have you tried
forceY: [-1, 1],
forceX: [-1, 1],

Amcharts add Euro symbol to value in balloon

This is my Json response, I can't figure out how I can add Euro symbol to my values. Ofcourse this is an idea of response and not the actual array that is being sent.
{"graphAxis":[{"valueAxis":"v0","lineColor":"#00969e","bullet":"round","bulletBorderAlpha":1,"bulletSize":"8","bulletBorderThickness":1,"bulletColor":"#FFFFFF","lineThickness":"2","hideBulletsCount":"50","title":"Prolongatie brandstoftermijn","valueField":"Prolongatie brandstoftermijn","costTypeId":15,"useLineColorForBulletBorder":true}],"dataProvider":[{"Prolongatie brandstoftermijn":4163.82,"date":"2016-01-01"},{"Prolongatie brandstoftermijn":7297.77,"date":"2016-02-01"},{"Prolongatie brandstoftermijn":7297.77,"date":"2016-03-01"},{"Prolongatie brandstoftermijn":162.43,"date":"2016-04-01"}]}
Can anyone provide any inputs on how to add Eur symbol to balloon text
This is my code in js file
//ajax request to show graph
$("#diaplayGraph").click(function(event) {
event.preventDefault();
$.ajax
({
url: $("#frmCostViewGraph").attr('action'),
data: $("#frmCostViewGraph").serialize(),
type: 'post',
beforeSend: function( xhr ) {
var message = '';
var selectedCostAllocations = $("#costAllocations").val();
var selectedCostTypes = $("#costTypes").val();
if(selectedCostAllocations == null) {
errorMessage($("#costAllocationError").html());
return false;
}
if(selectedCostTypes == null) {
errorMessage($("#costTypeError").html());
return false;
}
if($('input[name=reportType]:checked').length<=0)
{
errorMessage($("#reportTypeError").html());
return false
}
showLoading();
},
dataType:"JSON",
success: function(result)
{
hideMessage();
chartData = result.dataProvider;
graphAxis = result.graphAxis;
if(chartData == '') {
$("#chartdiv").html($("#noRecordFound").html());
hideLoading();
return false;
}
var chart = AmCharts.makeChart("chartdiv", {
"fontFamily": "Helvetica Neue,Helvetica,Arial,Open Sans,sans-serif",
"fontSize":12,
"type": "serial",
"theme": "default",
"mouseWheelZoomEnabled":true,
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth":true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"legend": {
"useGraphSettings": false,
},
"dataProvider": chartData,
"graphs":graphAxis,
"chartScrollbar": {
"graph": "g1",
"oppositeAxis":false,
"offset":30,
"scrollbarHeight": 20,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount":true,
"color":"#AAAAAA",
"autoGridCount": true,
"resizeEnabled":true
},
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable":true,
"cursorPosition": "mouse",
"oneBalloonOnly": true,
"categoryBalloonDateFormat": "DD-MMM-YYYY"
},
"valueScrollbar":{
"oppositeAxis":false,
"offset":75,
"scrollbarHeight":10,
"backgroundAlpha":1,
},
"valueAxes": [{
"axisColor": "#23272D",
"axisAlpha": 1,
"position": "left",
"unit": "$",
"unitPosition": "left"
}],
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"minPeriod":"MM",
"axisColor": "#23272D"
},
"export": {
"enabled": true,
},
"numberFormatter": {
"precision": -1,
"decimalSeparator": ",",
"thousandsSeparator": "."
},
});
chart.addListener("clickGraphItem", handleClick);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
hideLoading();
}
});
})
This should be done with the graphs array, within your graphAxis.
If for instance you have an graph implementation like this, you can add the euro sign to the balloonText property:
success: function(result) {
hideMessage();
chartData = result.dataProvider;
graphAxis = result.graphAxis;
if(graphAxis && graphAxis[0]) {
graphAxis[0].balloonText = "<b>€ [[Prolongatie brandstoftermijn]]</b>";
}
//...
}

change legend color using highchart-ng

I want to change legend color in highchart. I have used highchart-ng, the below code its not working, Please help me
scope.dvBarChartNG = {
options: {
chart: {
type: 'column',
backgroundColor: '#ffffff'
}
},
xAxis: {
},
yAxis: {
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
},
},
*legend: {
itemStyle: {
'color' : '#000'
},
itemHoverStyle: {
'color' : '#000'
},
itemHiddenStyle: {
'color' : '#000'
}
},*
series: [{
name: 'xxxx',
data: scope.yyyy.series.user,
color: '#cfffac',
borderColor: "#cfffac",
showInLegend: true
}, {
name: 'xxxx',
data: scope.yyyy.series.entity,
color: '#82c84c',
borderColor: "#82c84c",
showInLegend: true
}]
};
my html code is

Resources