Related
I am using a combination of stack bar and line chart at the same with the help of HighChart, I want to be able to select a bar(or in my case the entire stack bar as well as the point in the line graph) and change its color when I click on it,
Right now I am able to select a bar and change its color but not able to change the color of both bars and the point of the line which was clicked
Below is the click of the code which I tried from my end, I want to be able to select the entire bar and line when clicked, but I am only able to select one of them
SandBox Link
I tried this sorry that the sandbox link was broken
Highcharts.chart('container', {
"chart": {
"zoomType": "xy",
"height": 320
},
"credits": {
"enabled": false
},
"title": {
"text": "",
"align": "left",
"style": {
"fontFamily": "Poppins, Helvetica, \"sans-serif\"",
"fontWeight": "600"
}
},
"xAxis": {
"title": {
"text": ""
},
"categories": [
"0.01-0.05",
"0.06-0.10",
"0.11-0.15",
"0.16-0.20",
"0.21-0.25",
"0.26-0.30",
"0.31-0.35",
"0.36-0.40",
"0.41-0.45",
"0.46-0.50",
"0.51-0.55",
"0.56-0.60",
"0.61-0.65",
"0.66-0.70",
"0.71-0.75",
"0.76-0.80",
"0.81-0.85",
"0.86-0.90",
"0.91-0.95",
"0.96-1.00"
],
"crosshair": true,
"plotLines": [{
"color": "#A9A9A9",
"width": 3,
"value": 9.5,
"dashStyle": "longdashdot"
}]
},
"yAxis": [{
"title": {
"text": "Count"
},
"min": 0
},
{
"title": {
"text": "y1 count"
},
"opposite": true,
"min": 0
}
],
"tooltip": {
"shared": true
},
plotOptions: {
series: {
stacking: 'normal',
point: {
events: {
click() {
var indexP = this.x,
series = this.series.chart.series;
if (series[0].data[indexP].selected) {
//unselect
series[0].data[indexP].select(false, true);
series[1].data[indexP].select(false, true);
} else {
var i = 0;
var len = series[1].data.length;
for (i = 0; i < len; i++) { //clear all selection
series[0].data[i].select(false, true);
series[1].data[i].select(false, true);
series[2].data[i].select(false, true);
}
//select
series[0].data[indexP].select(true, true);
series[1].data[indexP].select(true, true);
series[2].data[indexP].select(true, true);
}
return false;
}
}
}
}
},
"legend": {
"layout": "horizontal",
"align": "right",
"verticalAlign": "top"
},
"exporting": {
"enabled": false
},
"series": [{
"name": "y1",
"type": "column",
"stack": 1,
"yAxis": 1,
"color": "rgb(217, 141, 39)",
"data": [
1,
13,
24,
25,
34,
74,
104,
66,
104,
121,
111,
89,
87,
97,
93,
92,
100,
147,
250,
567
],
"tooltip": {
"valueSuffix": " "
}
},
{
"name": "y3",
"type": "column",
"stack": 1,
"yAxis": 1,
"color": "rgb(44, 99, 143)",
"data": [
463,
287,
208,
201,
209,
197,
171,
150,
134,
102,
65,
50,
36,
24,
33,
20,
13,
13,
10,
9
],
"tooltip": {
"valueSuffix": ""
}
},
{
"name": "y3",
"type": "line",
"color": "#F1416C",
"data": [
1,
14,
38,
63,
97,
171,
275,
341,
445,
566,
677,
766,
853,
950,
1043,
1135,
1235,
1382,
1632,
2199
],
"tooltip": {
"valueSuffix": " "
}
}
]
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>
Multiple nested donut charts on the same page not working properly. I have two nested donut charts. One is showing ball0on text and another one is not. If I have 4 charts in first nested donut and two charts in second nested donut chart, balloon text will appear for last two outer charts in first and for both inner charts of the second donut.
Reference : Simulating nested donut chart using multiple pie chart instances
"Plugin: Manipulate z-index of the chart" is also there.
JSFIDDLE : PROBLEM STATEMENT
Hover on first nested donut chart inner pie charts, then hover on pie charts of second nested donut chart.
I didn't get any helpful data here : Documentation.
How to make balloon appear for all charts?
/**
* Plugin: Manipulate z-index of the chart
*/
AmCharts.addInitHandler(function(chart) {
// init holder for nested charts
if (AmCharts.nestedChartHolder === undefined)
AmCharts.nestedChartHolder = {};
if (chart.bringToFront === true) {
chart.addListener("init", function(event) {
// chart inited
var chart = event.chart;
var div = chart.div;
var parent = div.parentNode;
// add to holder
if (AmCharts.nestedChartHolder[parent] === undefined)
AmCharts.nestedChartHolder[parent] = [];
AmCharts.nestedChartHolder[parent].push(chart);
// add mouse mouve event
chart.div.addEventListener('mousemove', function() {
// calculate current radius
var x = Math.abs(chart.mouseX - (chart.realWidth / 2));
var y = Math.abs(chart.mouseY - (chart.realHeight / 2));
var r = Math.sqrt(x * x + y * y);
// check which chart smallest chart still matches this radius
var smallChart;
var smallRadius;
for (var i = 0; i < AmCharts.nestedChartHolder[parent].length; i++) {
var checkChart = AmCharts.nestedChartHolder[parent][i];
if ((checkChart.radiusReal < r) || (smallRadius < checkChart.radiusReal)) {
checkChart.div.style.zIndex = 1;
} else {
if (smallChart !== undefined)
smallChart.div.style.zIndex = 1;
checkChart.div.style.zIndex = 2;
smallChart = checkChart;
smallRadius = checkChart.radiusReal;
}
}
}, false);
});
}
}, ["pie"]);
/**
* Create the charts
*/
var pie1 = AmCharts.makeChart("chart1", {
"type": "pie",
"bringToFront": true,
"dataProvider": [{
"title": "$",
"value": 100,
"color": "#090E0F"
}],
"startDuration": 0,
"pullOutRadius": 0,
"color": "#fff",
"fontSize": 14,
"titleField": "title",
"valueField": "value",
"colorField": "color",
"labelRadius": -25,
"labelColor": "#fff",
"radius": 25,
"innerRadius": 0,
"labelText": "[[title]]",
"balloonText": "[[title]]: [[value]]"
});
var pie2 = AmCharts.makeChart("chart2", {
"type": "pie",
"bringToFront": true,
"dataProvider": [{
"title": "Marketing",
"value": 33,
"color": "#BA3233"
}, {
"title": "Production",
"value": 33,
"color": "#624B6A"
}, {
"title": "R&D",
"value": 33,
"color": "#6179C0"
}],
"startDuration": 1,
"pullOutRadius": 0,
"color": "#fff",
"fontSize": 9,
"titleField": "title",
"valueField": "value",
"colorField": "color",
"labelRadius": -28,
"labelColor": "#fff",
"radius": 80,
"innerRadius": 27,
"outlineAlpha": 1,
"outlineThickness": 4,
"labelText": "[[title]]",
"balloonText": "[[title]]: [[value]]"
});
var pie3 = AmCharts.makeChart("chart3", {
"type": "pie",
"bringToFront": true,
"dataProvider": [{
"title": "Online",
"value": 11,
"color": "#BA3233"
}, {
"title": "Print",
"value": 11,
"color": "#BA3233"
}, {
"title": "Other",
"value": 11,
"color": "#BA3233"
}, {
"title": "Equipment",
"value": 16.5,
"color": "#624B6A"
}, {
"title": "Materials",
"value": 16.5,
"color": "#624B6A"
}, {
"title": "Labs",
"value": 16.5,
"color": "#6179C0"
}, {
"title": "Patents",
"value": 16.5,
"color": "#6179C0"
}],
"startDuration": 1,
"pullOutRadius": 0,
"color": "#fff",
"fontSize": 8,
"titleField": "title",
"valueField": "value",
"colorField": "color",
"labelRadius": -27,
"labelColor": "#fff",
"radius": 135,
"innerRadius": 82,
"outlineAlpha": 1,
"outlineThickness": 4,
"labelText": "[[title]]",
"balloonText": "[[title]]: [[value]]"
});
var pi4 = AmCharts.makeChart("chart4", {
"type": "pie",
"bringToFront": true,
"dataProvider": [{
"title": "Design",
"value": 5.5,
"color": "#BA3233"
}, {
"title": "P&P",
"value": 5.5,
"color": "#BA3233"
}, {
"title": "Magazines",
"value": 11,
"color": "#BA3233"
}, {
"title": "Outdoor",
"value": 3.66,
"color": "#BA3233"
}, {
"title": "Promo",
"value": 3.66,
"color": "#BA3233"
}, {
"title": "Endorsement",
"value": 3.66,
"color": "#BA3233"
}, {
"title": "Maintenance",
"value": 8.25,
"color": "#624B6A"
}, {
"title": "Acquisition",
"value": 8.25,
"color": "#624B6A"
}, {
"title": "Raw",
"value": 5.5,
"color": "#624B6A"
}, {
"title": "Recycling",
"value": 5.5,
"color": "#624B6A"
}, {
"title": "Logistics",
"value": 5.5,
"color": "#624B6A"
}, {
"title": "LAB1",
"value": 3.3,
"color": "#6179C0"
}, {
"title": "LAB2",
"value": 3.3,
"color": "#6179C0"
}, {
"title": "LAB3",
"value": 3.3,
"color": "#6179C0"
}, {
"title": "Supply",
"value": 3.3,
"color": "#6179C0"
}, {
"title": "Disposal",
"value": 3.3,
"color": "#6179C0"
}, {
"title": "Application",
"value": 5.5,
"color": "#6179C0"
}, {
"title": "Acquisition",
"value": 5.5,
"color": "#6179C0"
}, {
"title": "Settlement",
"value": 5.5,
"color": "#6179C0"
}],
"startDuration": 1,
"pullOutRadius": 0,
"color": "#fff",
"fontSize": 8,
"titleField": "title",
"valueField": "value",
"colorField": "color",
"labelRadius": -27,
"labelColor": "#fff",
"radius": 190,
"innerRadius": 137,
"outlineAlpha": 1,
"outlineThickness": 4,
"labelText": "[[title]]",
"balloonText": "[[title]]: [[value]]",
"allLabels": [{
"text": "ACME Inc. Spending Chart",
"bold": true,
"size": 18,
"color": "#404040",
"x": 0,
"align": "center",
"y": 20
}]
});
var pie5 = AmCharts.makeChart("chart11", {
"type": "pie",
"bringToFront": true,
"dataProvider": [{
"title": "$",
"value": 100,
"color": "#090E0F"
}],
"startDuration": 0,
"pullOutRadius": 0,
"color": "#fff",
"fontSize": 14,
"titleField": "title",
"valueField": "value",
"colorField": "color",
"labelRadius": -25,
"labelColor": "#fff",
"radius": 25,
"innerRadius": 0,
"labelText": "[[title]]",
"balloonText": "[[title]]: [[value]]"
});
var pie6 = AmCharts.makeChart("chart22", {
"type": "pie",
"bringToFront": true,
"dataProvider": [{
"title": "Marketing",
"value": 33,
"color": "#BA3233"
}, {
"title": "Production",
"value": 33,
"color": "#624B6A"
}, {
"title": "R&D",
"value": 33,
"color": "#6179C0"
}],
"startDuration": 1,
"pullOutRadius": 0,
"color": "#fff",
"fontSize": 9,
"titleField": "title",
"valueField": "value",
"colorField": "color",
"labelRadius": -28,
"labelColor": "#fff",
"radius": 80,
"innerRadius": 27,
"outlineAlpha": 1,
"outlineThickness": 4,
"labelText": "[[title]]",
"balloonText": "[[title]]: [[value]]"
});
#charts,
#charts1 {
width: 200px;
height: 500px;
position: relative;
margin: 0 auto;
font-size: 8px;
flex: 1;
}
#charts {
width: 400px;
}
.chartdiv {
width: 400px;
height: 500px;
position: absolute;
top: 0;
left: 0;
}
#parent {
display: flex;
width: 700px;
border: 2px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<div id="parent">
<div id="charts">
<div id="chart1" class="chartdiv"></div>
<div id="chart2" class="chartdiv"></div>
<div id="chart3" class="chartdiv"></div>
<div id="chart4" class="chartdiv"></div>
</div>
<div id="charts1">
<div id="chart11" class="chartdiv"></div>
<div id="chart22" class="chartdiv"></div>
<div id="chart33" class="chartdiv"></div>
<div id="chart44" class="chartdiv"></div>
</div>
</div>
There's a bug with the nested plugin where it's using a reference to an element to hold a nest, which doesn't work when you have multiple sets of nested pie charts. A quick fix for this is to have it use the chart div's parent element ID to ensure that each set of pie charts are grouped correctly:
var parent = div.parentNode.id;
Of course this will add a dependency that the container div must have an ID but that's a small requirement.
You'll also want to remove the other divs if they don't have pie charts as they will prevent the mouseover event from firing on the second column's charts.
Updated code below:
/**
* Plugin: Manipulate z-index of the chart
*/
AmCharts.addInitHandler(function(chart) {
// init holder for nested charts
if (AmCharts.nestedChartHolder === undefined)
AmCharts.nestedChartHolder = {};
if (chart.bringToFront === true) {
chart.addListener("init", function(event) {
// chart inited
var chart = event.chart;
var div = chart.div;
var parent = div.parentNode.id; //changed to use the parent's ID instead of a reference.
// add to holder
if (AmCharts.nestedChartHolder[parent] === undefined) {
AmCharts.nestedChartHolder[parent] = [];
}
AmCharts.nestedChartHolder[parent].push(chart);
// add mouse mouve event
chart.div.addEventListener('mousemove', function() {
// calculate current radius
var x = Math.abs(chart.mouseX - (chart.realWidth / 2));
var y = Math.abs(chart.mouseY - (chart.realHeight / 2));
var r = Math.sqrt(x * x + y * y);
// check which chart smallest chart still matches this radius
var smallChart;
var smallRadius;
for (var i = 0; i < AmCharts.nestedChartHolder[parent].length; i++) {
var checkChart = AmCharts.nestedChartHolder[parent][i];
if ((checkChart.radiusReal < r) || (smallRadius < checkChart.radiusReal)) {
checkChart.div.style.zIndex = 1;
} else {
if (smallChart !== undefined)
smallChart.div.style.zIndex = 1;
checkChart.div.style.zIndex = 2;
smallChart = checkChart;
smallRadius = checkChart.radiusReal;
}
}
}, false);
});
}
}, ["pie"]);
/**
* Create the charts
*/
var pie1 = AmCharts.makeChart("chart1", {
"type": "pie",
"bringToFront": true,
"dataProvider": [{
"title": "$",
"value": 100,
"color": "#090E0F"
}],
"startDuration": 0,
"pullOutRadius": 0,
"color": "#fff",
"fontSize": 14,
"titleField": "title",
"valueField": "value",
"colorField": "color",
"labelRadius": -25,
"labelColor": "#fff",
"radius": 25,
"innerRadius": 0,
"labelText": "[[title]]",
"balloonText": "[[title]]: [[value]]"
});
var pie2 = AmCharts.makeChart("chart2", {
"type": "pie",
"bringToFront": true,
"dataProvider": [{
"title": "Marketing",
"value": 33,
"color": "#BA3233"
}, {
"title": "Production",
"value": 33,
"color": "#624B6A"
}, {
"title": "R&D",
"value": 33,
"color": "#6179C0"
}],
"startDuration": 1,
"pullOutRadius": 0,
"color": "#fff",
"fontSize": 9,
"titleField": "title",
"valueField": "value",
"colorField": "color",
"labelRadius": -28,
"labelColor": "#fff",
"radius": 80,
"innerRadius": 27,
"outlineAlpha": 1,
"outlineThickness": 4,
"labelText": "[[title]]",
"balloonText": "[[title]]: [[value]]"
});
var pie3 = AmCharts.makeChart("chart3", {
"type": "pie",
"bringToFront": true,
"dataProvider": [{
"title": "Online",
"value": 11,
"color": "#BA3233"
}, {
"title": "Print",
"value": 11,
"color": "#BA3233"
}, {
"title": "Other",
"value": 11,
"color": "#BA3233"
}, {
"title": "Equipment",
"value": 16.5,
"color": "#624B6A"
}, {
"title": "Materials",
"value": 16.5,
"color": "#624B6A"
}, {
"title": "Labs",
"value": 16.5,
"color": "#6179C0"
}, {
"title": "Patents",
"value": 16.5,
"color": "#6179C0"
}],
"startDuration": 1,
"pullOutRadius": 0,
"color": "#fff",
"fontSize": 8,
"titleField": "title",
"valueField": "value",
"colorField": "color",
"labelRadius": -27,
"labelColor": "#fff",
"radius": 135,
"innerRadius": 82,
"outlineAlpha": 1,
"outlineThickness": 4,
"labelText": "[[title]]",
"balloonText": "[[title]]: [[value]]"
});
var pi4 = AmCharts.makeChart("chart4", {
"type": "pie",
"bringToFront": true,
"dataProvider": [{
"title": "Design",
"value": 5.5,
"color": "#BA3233"
}, {
"title": "P&P",
"value": 5.5,
"color": "#BA3233"
}, {
"title": "Magazines",
"value": 11,
"color": "#BA3233"
}, {
"title": "Outdoor",
"value": 3.66,
"color": "#BA3233"
}, {
"title": "Promo",
"value": 3.66,
"color": "#BA3233"
}, {
"title": "Endorsement",
"value": 3.66,
"color": "#BA3233"
}, {
"title": "Maintenance",
"value": 8.25,
"color": "#624B6A"
}, {
"title": "Acquisition",
"value": 8.25,
"color": "#624B6A"
}, {
"title": "Raw",
"value": 5.5,
"color": "#624B6A"
}, {
"title": "Recycling",
"value": 5.5,
"color": "#624B6A"
}, {
"title": "Logistics",
"value": 5.5,
"color": "#624B6A"
}, {
"title": "LAB1",
"value": 3.3,
"color": "#6179C0"
}, {
"title": "LAB2",
"value": 3.3,
"color": "#6179C0"
}, {
"title": "LAB3",
"value": 3.3,
"color": "#6179C0"
}, {
"title": "Supply",
"value": 3.3,
"color": "#6179C0"
}, {
"title": "Disposal",
"value": 3.3,
"color": "#6179C0"
}, {
"title": "Application",
"value": 5.5,
"color": "#6179C0"
}, {
"title": "Acquisition",
"value": 5.5,
"color": "#6179C0"
}, {
"title": "Settlement",
"value": 5.5,
"color": "#6179C0"
}],
"startDuration": 1,
"pullOutRadius": 0,
"color": "#fff",
"fontSize": 8,
"titleField": "title",
"valueField": "value",
"colorField": "color",
"labelRadius": -27,
"labelColor": "#fff",
"radius": 190,
"innerRadius": 137,
"outlineAlpha": 1,
"outlineThickness": 4,
"labelText": "[[title]]",
"balloonText": "[[title]]: [[value]]",
"allLabels": [{
"text": "ACME Inc. Spending Chart",
"bold": true,
"size": 18,
"color": "#404040",
"x": 0,
"align": "center",
"y": 20
}]
});
var pie5 = AmCharts.makeChart("chart11", {
"type": "pie",
"bringToFront": true,
"dataProvider": [{
"title": "$",
"value": 100,
"color": "#090E0F"
}],
"startDuration": 0,
"pullOutRadius": 0,
"color": "#fff",
"fontSize": 14,
"titleField": "title",
"valueField": "value",
"colorField": "color",
"labelRadius": -25,
"labelColor": "#fff",
"radius": 25,
"innerRadius": 0,
"labelText": "[[title]]",
"balloonText": "[[title]]: [[value]]"
});
var pie6 = AmCharts.makeChart("chart22", {
"type": "pie",
"bringToFront": true,
"dataProvider": [{
"title": "Marketing",
"value": 33,
"color": "#BA3233"
}, {
"title": "Production",
"value": 33,
"color": "#624B6A"
}, {
"title": "R&D",
"value": 33,
"color": "#6179C0"
}],
"startDuration": 1,
"pullOutRadius": 0,
"color": "#fff",
"fontSize": 9,
"titleField": "title",
"valueField": "value",
"colorField": "color",
"labelRadius": -28,
"labelColor": "#fff",
"radius": 80,
"innerRadius": 27,
"outlineAlpha": 1,
"outlineThickness": 4,
"labelText": "[[title]]",
"balloonText": "[[title]]: [[value]]"
});
#charts,
#charts1 {
width: 200px;
height: 500px;
position: relative;
margin: 0 auto;
font-size: 8px;
flex: 1;
}
#charts {
width: 400px;
}
.chartdiv {
width: 400px;
height: 500px;
position: absolute;
top: 0;
left: 0;
}
#parent {
display: flex;
width: 700px;
border: 2px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<div id="parent">
<div id="charts">
<div id="chart1" class="chartdiv"></div>
<div id="chart2" class="chartdiv"></div>
<div id="chart3" class="chartdiv"></div>
<div id="chart4" class="chartdiv"></div>
</div>
<div id="charts1">
<div id="chart11" class="chartdiv"></div>
<div id="chart22" class="chartdiv"></div>
<!--
commented out as the mouseover event doesn't fire if there are empty divs overlapping
<div id="chart33" class="chartdiv"></div>
<div id="chart44" class="chartdiv"></div>
-->
</div>
</div>
I would like to make bubble chart like the following using amcharts and I have come across a bubble chart example in amcharts (1). I would like to get some help/guidance on how to make axis range like the sample which I have given below. Any help would be appreciated.
/**
* Plugin: Arrange data pints into separate value "bands"
* Relies on `bandValueScope` being there in the chart config
*/
AmCharts.addInitHandler( function( chart ) {
// check if bandValueScope is set
if ( chart.bandValueScope === undefined )
return;
// iterate through data points and apply step value
for ( var i = 0; i < chart.dataProvider.length; i++ ) {
var add = chart.bandValueScope * i;
for ( var x = 0; x < chart.graphs.length; x++ ) {
chart.dataProvider[ i ][ chart.graphs[ x ].yField ] += add;
}
}
// set up Y axis labelFunction to recalculate those values as well
for ( var i = 0; i < chart.valueAxes.length; i++ ) {
var axis = chart.valueAxes[ i ];
if ( axis.applyBandValues ) {
// set up labelFunction to recalculate labels
axis.labelFunction = function( value, a, b ) {
var newValue = value - Math.floor( value / chart.bandValueScope ) * chart.bandValueScope;
if ( newValue === 0 )
return "";
newValue = newValue.toString();
if ( axis.unit )
newValue += axis.unit;
return newValue;
}
// go through guides and recalculate their values as well
if ( axis.guides && axis.guides.length ) {
for ( var x = 0; x < axis.guides.length; x++ ) {
var add = chart.bandValueScope * x;
var guide = axis.guides[ x ];
if ( guide.value !== undefined )
guide.value += add;
if ( guide.toValue !== undefined )
guide.toValue += add;
}
}
}
}
}, [ "xy" ] );
/**
* Create chart
*/
var chart = AmCharts.makeChart( "chartdiv", {
"type": "xy",
"theme": "light",
"marginRight": 70,
"balloon": {
"fixedPosition": true,
},
/**
* `bandValueScope` is a custom paramater which will be used by a plugin
* to restructure data so that each data point is recalculated into a new
* band
*/
"bandValueScope": 50,
"dataProvider": [ {
// North America
// Home
"x1": 35,
"y1": 30,
"v1": 35,
// Health
"x2": 31,
"y2": 26,
"v2": 35,
// Life
"x3": 21,
"y3": 32,
"v3": 20,
// Long term
"x4": 23,
"y4": 35,
"v4": 29,
// Auto
"x5": 11,
"y5": 33,
"v5": 25,
// Theft
"x6": 10,
"y6": 38,
"v6": 15
}, {
// Asia
// Home
"x1": 50,
"y1": 28,
"v1": 20,
// Health
"x2": 55,
"y2": 25,
"v2": 20,
// Life
"x3": 38,
"y3": 28,
"v3": 20,
// Long term
"x4": 42,
"y4": 32,
"v4": 20,
// Auto
"x5": 25,
"y5": 31,
"v5": 20,
// Theft
"x6": 20,
"y6": 39,
"v6": 20
}, {
// Europe
// Home
"x1": 90,
"y1": 18,
"v1": 100,
// Health
"x2": 85,
"y2": 14,
"v2": 85,
// Life
"x3": 70,
"y3": 29,
"v3": 50,
// Long term
"x4": 80,
"y4": 22,
"v4": 40,
// Auto
"x5": 50,
"y5": 25,
"v5": 40,
// Theft
"x6": 40,
"y6": 35,
"v6": 20
} ],
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"title": "Number of Policies Issued",
"titleColor": "#ff7f27",
"titleFontSize": 18,
}, {
"axisAlpha": 0,
"position": "left",
"minimum": 0,
"minVerticalGap": 20,
"unit": "%",
"title": "Avg. Normalized Premiums",
"titleFontSize": 18,
"applyBandValues": true,
"guides": [ {
"value": 0,
"toValue": 50,
"lineColor": "#e2e2e2",
"lineAlpha": 1,
"lineThickness": 2,
"fillColor": "#00c",
"fillAlpha": 0.1,
"label": "North\nAmerica",
"boldLabel": true,
"color": "#ff7f27",
"position": "right"
}, {
"value": 0,
"toValue": 50,
"lineColor": "#e2e2e2",
"lineAlpha": 1,
"lineThickness": 2,
"fillColor": "#c00",
"fillAlpha": 0.1,
"label": "Asia",
"boldLabel": true,
"color": "#ff7f27",
"position": "right"
}, {
"value": 0,
"toValue": 50,
"lineColor": "#e2e2e2",
"lineAlpha": 1,
"lineThickness": 2,
"fillColor": "#0c0",
"fillAlpha": 0.1,
"label": "Europe",
"boldLabel": true,
"color": "#ff7f27",
"position": "right"
} ]
} ],
"startDuration": 1.5,
"sequencedAnimation": false,
"legend": {
"position": "right",
"markerType": "circle"
},
"graphs": [ {
"balloonText": "[[title]]: [[value]]",
"title": "Home",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v1",
"xField": "x1",
"yField": "y1",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#a6cf28"
}, {
"balloonText": "[[title]]: [[value]]",
"title": "Health",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v2",
"xField": "x2",
"yField": "y2",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#7fadd1"
}, {
"balloonText": "[[title]]: [[value]]",
"title": "Life",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v3",
"xField": "x3",
"yField": "y3",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#f9c900"
}, {
"title": "Long term",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v4",
"xField": "x4",
"yField": "y4",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#ff8a00"
}, {
"title": "Auto",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v5",
"xField": "x5",
"yField": "y5",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#ff1568"
}, {
"title": "Theft",
"bullet": "circle",
"bulletBorderAlpha": 1,
"bulletBorderThickness": 2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"valueField": "v6",
"xField": "x6",
"yField": "y6",
"minBulletSize": 15,
"maxBulletSize": 60,
"lineColor": "#689494"
} ]
} );
(1.) https://codepen.io/team/amcharts/pen/05584b0b6afd661337b3ce5c8d6a14e3
You could offset both value axes of your bubble chart to center them. However, the offset values are defined in pixels, so unfortunately the axes will not keep their position when the chart is zoomed or panned. So you'll probably have to disable these features in this case.
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
// ...
"valueAxes": [{
"position": "bottom",
"offset": -200,
"minimum": 0,
"maximum": 100
}, {
"position": "left",
"offset": -200,
"minimum": 0,
"maximum": 100
}]
});
Here's a Codepen demo: https://codepen.io/team/amcharts/pen/137ecc09f89b5303b66944e4cf278b14?editors=0010.
You could also use minimum and maximum values for both value axes to make it easier to center your axes.
ValueAxis offset: https://docs.amcharts.com/3/javascriptcharts/ValueAxis#offset
i am working with amcharts and i need to put some dots on specific date but not join them together. I tried with guides but i couldn't.
My chart has category field: date max zoom is hourly.
This is my chart with the red dots i drew to show you.
I want them in different date but with the same height
This is my code:
var weatherChart = AmCharts.makeChart("weatherChart", {
"type": "serial",
"theme": "light",
"language": "es",
"marginRight": 80,
"mouseWheelZoomEnabled": true,
"zoomOutText": "Mostrar todo",
"autoMarginOffset": 20,
"gridAboveGraphs": false,
"marginTop": 7,
"dataProvider": chartData,
"valueAxes": [{
"id": "v1",
"axisColor": "#969696",
"axisAlpha": 1,
"axisThickness": 2,
"offset": 10,
"autoGridCount": true,
"gridAlpha": 0,
"minorGridEnabled": false,
"position": "left",
"title": "Temperatura y velocidad del viento"
}, {
"id": "v2",
"axisColor": "#969696",
"axisThickness": 2,
"axisAlpha": 1,
"offset": 10,
"gridAlpha": 0,
"minorGridEnabled": false,
"position": "right",
"title": "Humedad"
},{
"id": "v3",
"axisColor": "#969696",
"axisThickness": 0,
"axisAlpha": 0,
"labelsEnabled": false,
"offset": 50,
"gridAlpha": 0,
"minorGridEnabled": false,
"position": "left",
}],
"graphs": [{
"id": "g4",
"valueAxis": "v3",
//"fillColorsField": "color",
"fillColors": "#40f947",
"lineColor": "#40f947",
"balloonText": "[[value]]ha",
"fillAlphas": .6,
"lineAlpha": 0.2,
"type": "column",
"title": "Hectareas fumigadas",
"showBalloon": true,
"valueField": "hectares",
"dashLengthField": "hectares_dash"
}, {
"id": "g1",
"valueAxis": "v1",
"balloonText": "[[value]]°",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#ffb014",
"hideBulletsCount": 50,
"title": "Temperatura",
"bulletSize": 5,
"valueField": "temperature",
"dashLengthField": "temperature_dash",
"lineColor": "#ffb014",
"useLineColorForBulletBorder": true
}, {
"id": "g2",
"valueAxis": "v2",
"balloonText": "[[value]]%",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#245be5",
"hideBulletsCount": 50,
"title": "Humedad",
"bulletSize": 5,
"valueField": "humidity",
"dashLengthField": "humidity_dash",
"lineColor": "#245be5",
"useLineColorForBulletBorder": true
}, {
"id": "g3",
"valueAxis": "v1",
"balloonText": "[[value]]km/h",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#63c2f2",
"hideBulletsCount": 50,
"title": "Velocidad del viento",
"valueField": "wind",
"dashLengthField": "wind_dash",
"bulletSize": 5,
"lineColor": "#63c2f2",
"useLineColorForBulletBorder": true
}],
"chartScrollbar": {
"oppositeAxis": false,
"scrollbarHeight": 30,
"dragIcon": "dragIconRectBig"
},
"chartCursor": {
"categoryBalloonDateFormat": "YYYY-MM-DD HH:NN:SS",
"pan": true
},
"categoryField": "date",
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"categoryAxis": {
"minPeriod": "hh",
"parseDates": true,
"axisColor": "#DADADA",
"dashLength": 1,
"autoGridCount": true,
"gridAlpha": 0,
"minorGridEnabled": false
},
"legend": {
"enabled": true,
"useGraphSettings": false
},
"export": {
"enabled": true
}
});
Your best bet is to create a graph specifically for those red dots. You just have to set lineColor to a red color for the bullets, set lineAlpha to 0 so that the lines aren't visible and then add data points for them. You can also set visibleInLegend to false if you don't want a marker for this graph.
var chartData = [{
"date": "2017-06-05 15:47:00",
"hectares": 10,
"temperature": 50,
"wind": 11,
"humidity": 35,
"reddot": 50 //data point for red dot graph
},
{
"date": "2017-06-05 16:47:00",
"hectares": 12,
"temperature": 41,
"wind": 11,
"humidity": 35
},
{
"date": "2017-06-05 17:47:00",
"hectares": 13,
"temperature": 47,
"wind": 12,
"humidity": 31,
"reddot": 50 //data point for red dot graph
},
// ... etc
]
var weatherChart = AmCharts.makeChart("weatherChart", {
// ...
"graphs": [
// ... other graphs omitted
{
"id": "g5",
"bullet": "round",
"valueField": "reddot",
"bulletColor": "#800",
"lineColor": "#800",
"visibleInLegend": false, //optional: hide from legend
"lineAlpha": 0
}
],
// ...
});
Demo:
var chartData = [{
"date": "2017-06-05 15:47:00",
"hectares": 10,
"temperature": 50,
"wind": 11,
"humidity": 35,
"reddot": 55
},
{
"date": "2017-06-05 16:47:00",
"hectares": 12,
"temperature": 41,
"wind": 11,
"humidity": 35,
"reddot": 55
},
{
"date": "2017-06-05 17:47:00",
"hectares": 13,
"temperature": 47,
"wind": 12,
"humidity": 31
},
{
"date": "2017-06-05 18:47:00",
"hectares": 12,
"temperature": 44,
"wind": 8,
"humidity": 37,
"reddot": 55
},
{
"date": "2017-06-05 19:47:00",
"hectares": 12,
"temperature": 43,
"wind": 12,
"humidity": 38
},
{
"date": "2017-06-05 20:47:00",
"hectares": 11,
"temperature": 48,
"wind": 9,
"humidity": 37
},
{
"date": "2017-06-05 21:47:00",
"hectares": 11,
"temperature": 40,
"wind": 12,
"humidity": 32,
"reddot": 55
},
{
"date": "2017-06-05 22:47:00",
"hectares": 15,
"temperature": 44,
"wind": 8,
"humidity": 32
},
{
"date": "2017-06-05 23:47:00",
"hectares": 15,
"temperature": 44,
"wind": 9,
"humidity": 32
},
{
"date": "2017-06-06 00:47:00",
"hectares": 13,
"temperature": 50,
"wind": 10,
"humidity": 32
},
{
"date": "2017-06-06 01:47:00",
"hectares": 11,
"temperature": 41,
"wind": 12,
"humidity": 31
},
{
"date": "2017-06-06 02:47:00",
"hectares": 10,
"temperature": 48,
"wind": 12,
"humidity": 38
},
{
"date": "2017-06-06 03:47:00",
"hectares": 12,
"temperature": 46,
"wind": 12,
"humidity": 36
},
{
"date": "2017-06-06 04:47:00",
"hectares": 15,
"temperature": 48,
"wind": 11,
"humidity": 37
},
{
"date": "2017-06-06 05:47:00",
"hectares": 11,
"temperature": 47,
"wind": 9,
"humidity": 36
},
{
"date": "2017-06-06 06:47:00",
"hectares": 13,
"temperature": 40,
"wind": 9,
"humidity": 36,
"hectares_dash": 5,
"temperature_dash": 5,
"humidity_dash": 5,
"wind_dash": 5
},
{
"date": "2017-06-06 07:47:00",
"hectares": 14,
"temperature": 49,
"wind": 12,
"humidity": 32,
"hectares_dash": 5,
"temperature_dash": 5,
"humidity_dash": 5,
"wind_dash": 5
},
{
"date": "2017-06-06 08:47:00",
"hectares": 10,
"temperature": 47,
"wind": 9,
"humidity": 37,
"hectares_dash": 5,
"temperature_dash": 5,
"humidity_dash": 5,
"wind_dash": 5
},
{
"date": "2017-06-06 09:47:00",
"hectares": 10,
"temperature": 46,
"wind": 10,
"humidity": 33,
"hectares_dash": 0, //reset the dash by setting it to 0
"temperature_dash": 0,
"humidity_dash": 0,
"wind_dash": 0
},
{
"date": "2017-06-06 10:47:00",
"hectares": 13,
"temperature": 47,
"wind": 10,
"humidity": 34,
"reddot": 55
}
]
var weatherChart = AmCharts.makeChart("weatherChart", {
"type": "serial",
"theme": "light",
"language": "es",
"marginRight": 80,
"mouseWheelZoomEnabled": true,
"zoomOutText": "Mostrar todo",
"autoMarginOffset": 20,
"gridAboveGraphs": false,
"marginTop": 7,
"dataProvider": chartData,
"valueAxes": [{
"id": "v1",
"axisColor": "#969696",
"axisAlpha": 1,
"axisThickness": 2,
"offset": 10,
"autoGridCount": true,
"gridAlpha": 0,
"minorGridEnabled": false,
"position": "left",
"title": "Temperatura y velocidad del viento"
}, {
"id": "v2",
"axisColor": "#969696",
"axisThickness": 2,
"axisAlpha": 1,
"offset": 10,
"minorGridEnabled": false,
"position": "right",
"title": "Humedad"
}, {
"id": "v3",
"axisColor": "#969696",
"axisThickness": 0,
"axisAlpha": 0,
"labelsEnabled": false,
"offset": 50,
"minorGridEnabled": false,
"position": "left",
}],
"graphs": [{
"id": "g4",
"valueAxis": "v3",
"fillColorsField": "color",
"balloonText": "[[value]]ha",
"fillAlphas": .6,
"lineAlpha": 0.2,
"type": "column",
"title": "Hectareas fumigadas",
"showBalloon": true,
"valueField": "hectares",
"dashLengthField": "hectares_dash",
}, {
"id": "g1",
"valueAxis": "v1",
"balloonText": "[[value]]°",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#ffb014",
"hideBulletsCount": 50,
"title": "Temperatura",
"bulletSize": 5,
"valueField": "temperature",
"dashLengthField": "temperature_dash",
"lineColor": "#ffb014",
"useLineColorForBulletBorder": true
}, {
"id": "g2",
"valueAxis": "v2",
"balloonText": "[[value]]%",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#245be5",
"hideBulletsCount": 50,
"title": "Humedad",
"bulletSize": 5,
"valueField": "humidity",
"dashLengthField": "humidity_dash",
"lineColor": "#245be5",
"useLineColorForBulletBorder": true
}, {
"id": "g3",
"valueAxis": "v1",
"balloonText": "[[value]]km/h",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#63c2f2",
"hideBulletsCount": 50,
"title": "Velocidad del viento",
"valueField": "wind",
"dashLengthField": "wind_dash",
"bulletSize": 5,
"lineColor": "#63c2f2",
"useLineColorForBulletBorder": true
}, {
"id": "g5",
"bullet": "round",
//if this needs to be on a particular value axis, set that here as well
//"valueAxis": "v2",
"valueField": "reddot",
"bulletColor": "#800",
"lineColor": "#800",
"visibleInLegend": false, //optional: hide from legend
"lineAlpha": 0
}],
"chartScrollbar": {
"oppositeAxis": false,
"scrollbarHeight": 30,
"dragIcon": "dragIconRectBig"
},
"chartCursor": {
"categoryBalloonDateFormat": "YYYY-MM-DD HH:NN:SS",
"pan": true
},
"categoryField": "date",
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"categoryAxis": {
"minPeriod": "hh",
"parseDates": true,
"axisColor": "#DADADA",
"dashLength": 1,
"autoGridCount": true,
"gridAlpha": 0,
"minorGridEnabled": false
},
"legend": {
"enabled": true,
"useGraphSettings": false
},
"export": {
"enabled": true
}
});
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="weatherChart" style="width: 100%; height: 300px;"></div>
I have 4 different data sets data1, data2, data3, data4, each data set contain different dates, so date is not in order, hence graph is not displaying according to date
Here is my code
AmCharts.makeChart("chartdiv", {
"type": "serial",
"addClassNames": true,
"startDuration": 0.4,
"theme": "light",
"dataDateFormat": "YYYY-MM-DD",
"trendLines": [],
"applyGapValue": 0,
"graphs": [{
"bullet": "round",
"type": "smoothedLine",
"valueField": "data2",
}, {
"bullet": "round",
"type": "smoothedLine",
"valueField": "data1",
}, {
"bullet": "round",
"type": "smoothedLine",
"valueField": "data3",
}, {
"bullet": "round",
"type": "smoothedLine",
"valueField": "data4",
}],
"guides": [],
"valueAxes": [{
"id": "ValueAxis-1",
}],
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"equalSpacing": true,
"minorGridEnabled": true,
"gridPosition": "start",
},
"allLabels": [],
"balloon": {
"borderThickness": 3,
"horizontalPadding": 17,
"offsetX": 50,
"offsetY": 8
},
"chartCursor": {
"cursorAlpha": 0,
"cursorPosition": "mouse",
"graphBulletSize": 1,
"zoomable": false
},
"legend": {
"enabled": true,
"useGraphSettings": true,
"position": "top",
},
"dataProvider": [
{
"date": "2017-06-02",
"data1": 202,
}, {
"date": "2017-06-04",
"data1": 420,
}, {
"date": "2017-06-05",
"data1": 910,
}, {
"date": "2017-06-07",
"data1": 60,
},
{
"date": "2017-06-02",
"data2": 110,
}, {
"date": "2017-06-04",
"data2": 920,
}, {
"date": "2017-06-05",
"data2": 320,
}, {
"date": "2017-06-07",
"data2": 355,
},
{
"date": "2017-06-02",
"data3": 80,
}, {
"date": "2017-06-04",
"data3": 350,
}, {
"date": "2017-06-05",
"data3": 710,
}, {
"date": "2017-06-07",
"data3": 710,
},
{
"date": "2017-06-02",
"data4": 580,
}, {
"date": "2017-06-04",
"data4": 510,
}, {
"date": "2017-06-05",
"data4": 702,
}, {
"date": "2017-05-07",
"data4": 940,
}, {
"date": "2017-06-09",
"data4": 940,
},
]
});
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
in the output I want chart to be displayed according to ordered date, thank you
You can sort the data like this:
chartData.sort(function(a, b) {
return new Date(b.date) - new Date(a.date);
});
Let's say you do this before passing it to the dataProvider property.
While you do have to sort the data by dates as previously mentioned, it's not enough for AmCharts. You also need to group the data by date as well or your chart will not render or behave correctly, i.e. the array element with the date "2017-06-02" needs to have the "data1", "data2", "data3", "data4" properties in the same element.
Here's one way to group it (assuming your data is in a variable called chartData):
var dataMap = {}; //map to group data by date
var newChartData = []; //new chart data array
chartData.forEach(function(dataItem) {
if (!dataMap[dataItem.date]) {
dataMap[dataItem.date] = {};
}
Object.keys(dataItem).forEach(function(key) { //assign keys to map
if (key !== "date") {
dataMap[dataItem.date][key] = dataItem[key];
dataMap[dataItem.date].date = dataItem.date;
}
});
});
//sort the dates and add the grouped objects to the new array.
Object.keys(dataMap).sort(function(lhs, rhs) {
return new Date(lhs) - new Date(rhs);
}).forEach(function(date) {
newChartData.push(dataMap[date]);
});
Demo:
var chartData = [
{
"date": "2017-06-02",
"data1": 202,
}, {
"date": "2017-06-04",
"data1": 420,
}, {
"date": "2017-06-05",
"data1": 910,
}, {
"date": "2017-06-07",
"data1": 60,
},
{
"date": "2017-06-02",
"data2": 110,
}, {
"date": "2017-06-04",
"data2": 920,
}, {
"date": "2017-06-05",
"data2": 320,
}, {
"date": "2017-06-07",
"data2": 355,
},
{
"date": "2017-06-02",
"data3": 80,
}, {
"date": "2017-06-04",
"data3": 350,
}, {
"date": "2017-06-05",
"data3": 710,
}, {
"date": "2017-06-07",
"data3": 710,
},
{
"date": "2017-06-02",
"data4": 580,
}, {
"date": "2017-06-04",
"data4": 510,
}, {
"date": "2017-06-05",
"data4": 702,
}, {
"date": "2017-05-07",
"data4": 940,
}, {
"date": "2017-06-09",
"data4": 940,
},
];
var dataMap = {}; //map to group data by date
var newChartData = []; //new chart data array
chartData.forEach(function(dataItem) {
if (!dataMap[dataItem.date]) {
dataMap[dataItem.date] = {};
}
Object.keys(dataItem).forEach(function(key) { //assign keys to map
if (key !== "date") {
dataMap[dataItem.date][key] = dataItem[key];
dataMap[dataItem.date].date = dataItem.date;
}
});
});
//sort the dates and add the grouped objects to the new array.
Object.keys(dataMap).sort(function(lhs, rhs) {
return new Date(lhs) - new Date(rhs);
}).forEach(function(date) {
newChartData.push(dataMap[date]);
});
AmCharts.makeChart("chartdiv", {
"type": "serial",
"addClassNames": true,
"startDuration": 0.4,
"theme": "light",
"dataDateFormat": "YYYY-MM-DD",
"trendLines": [],
"applyGapValue": 0,
"graphs": [{
"bullet": "round",
"type": "smoothedLine",
"valueField": "data2",
}, {
"bullet": "round",
"type": "smoothedLine",
"valueField": "data1",
}, {
"bullet": "round",
"type": "smoothedLine",
"valueField": "data3",
}, {
"bullet": "round",
"type": "smoothedLine",
"valueField": "data4",
}],
"guides": [],
"valueAxes": [{
"id": "ValueAxis-1",
}],
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"equalSpacing": true,
"minorGridEnabled": true,
"gridPosition": "start",
},
"allLabels": [],
"balloon": {
"borderThickness": 3,
"horizontalPadding": 17,
"offsetX": 50,
"offsetY": 8
},
"chartCursor": {
"cursorAlpha": 0,
"cursorPosition": "mouse",
"graphBulletSize": 1,
"zoomable": false
},
"legend": {
"enabled": true,
"useGraphSettings": true,
"position": "top",
},
"dataProvider": newChartData
});
html,
body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>