Select columns and highlight them in amcharts - javascript

I have an serial amcharts, with 2 (it could be more) graphs on it. I am trying to select the column and highlight them. Taking reference from these two questions:
Highlighting a bar
Amcharts Guide
The column should be highlighted with a click along with highlighting the graph items in that column just like highlighting a bar in bar-chart. How to select the whole column with a click along with graph items?
This jsfiddle is for the amcharts graph.
JSFIDDLE
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"usePrefixes": true,
"legend": {
"useGraphSettings": true,
"position": "top"
},
"dataProvider": [
{
"200": "3875",
"month": "JAN",
"205": "310"
},
{
"200": "3500",
"month": "FEB",
"205": "280"
},
{
"200": "3875",
"month": "MAR",
"205": "310"
},
{
"200": "3750",
"month": "APR",
"205": "300"
},
{
"200": "3875",
"month": "MAY",
"205": "310"
},
{
"200": "3750",
"month": "JUN",
"205": "300"
},
{
"200": "3875",
"month": "JUL",
"205": "310"
},
{
"200": "250",
"month": "AUG",
"205": "20"
},
{
"200": "0",
"month": "SEP",
"205": "0"
},
{
"200": "0",
"month": "OCT",
"205": "0"
},
{
"200": "0",
"month": "NOV",
"205": "0"
},
{
"200": "0",
"month": "DEC",
"205": "0"
}
],
"valueAxes": [{
"axisAlpha": 1,
"axisColor": "#cccccc",
"gridCount": 10,
"position": "left",
"title": "Place taken",
"dashLength": 5,
"axisThickness": 2,
"tickLength": 0
}],
"startDuration": 0.5,
"graphs": [{
"balloonText": "[[value]]",
"bullet": "round",
"title": "200",
"valueField": "200",
"fillAlphas": 0
}, {
"balloonText": "[[value]]",
"bullet": "round",
"title": "205",
"valueField": "205",
"fillAlphas": 0
}],
"chartCursor": {
"pan": false,
"valueLineEnabled": false,
"valueLineBalloonEnabled": false,
"cursorAlpha": 1,
"cursorColor": "#e2e2d9",
"color": "black",
"valueLineAlpha": 1,
"valueZoomable": true,
"fullWidth": true
},
"categoryField": "month",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 1,
"axisThickness": 2,
"axisColor": "#cccccc",
"fillAlpha": 0.01,
"fillColor": "#000000",
"gridAlpha": 0,
"position": "bottom",
"tickLength": 0
},
"export": {
"enabled": false
},
"listeners": [{
"event": "init",
"method": function(e) {
e.chart.zoomToIndexes(e.chart.dataProvider.length - 40, e.chart.dataProvider.length - 1);
/**
* Add click event on the plot area
*/
e.chart.chartDiv.addEventListener("click", function() {
// we track cursor's last known position by "changed" event
if (e.chart.lastCursorPosition !== undefined) {
// get date of the last known cursor position
var month = e.chart.dataProvider[e.chart.lastCursorPosition][e.chart.categoryField];
// create a new guide or update position of the previous one
if (e.chart.categoryAxis.guides.length === 0) {
var guide = new AmCharts.Guide();
guide.category = month;
guide.toCategory = month;
guide.lineAlpha = 1;
guide.lineColor = "#c44";
guide.expand = true;
guide.inside = true;
guide.fillAlpha = 0.2;
guide.fillColor = "#CC0000";
e.chart.categoryAxis.addGuide(guide);
} else {
e.chart.categoryAxis.guides[0].category = month;
}
e.chart.validateData();
}
})
//handle touch screens so that subsequent guides can
//be added. Requires that the user taps the next
//point twice. Needed in order to not break zoom/pan
e.chart.chartDiv.addEventListener("touchend", function() {
e.chart.tapped = false;
});
}
}, {
"event": "changed",
"method": function(e) {
/**
* Log cursor's last known position
*/
e.chart.lastCursorPosition = e.index;
}
}],
});
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

You can combine the above solutions by using a colorField to set/unset to change the bullet color upon click since you're using a line chart instead of a column chart.
Here's an updated example using your solution from the comments. Note that I also tweaked the de-select handling to account for whether the user wants to re-select the previously de-selected field. For simplicity, I used the same colorField for both graphs, but feel free to adapt it to your needs.
var pre_month = "";
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"usePrefixes": true,
"legend": {
"useGraphSettings": true,
"position": "top"
},
"dataProvider": [{
"200": "3875",
"month": "JAN",
"205": "310"
},
{
"200": "3500",
"month": "FEB",
"205": "280"
},
{
"200": "3875",
"month": "MAR",
"205": "310"
},
{
"200": "3750",
"month": "APR",
"205": "300"
},
{
"200": "3875",
"month": "MAY",
"205": "310"
},
{
"200": "3750",
"month": "JUN",
"205": "300"
},
{
"200": "3875",
"month": "JUL",
"205": "310"
},
{
"200": "250",
"month": "AUG",
"205": "20"
},
{
"200": "0",
"month": "SEP",
"205": "0"
},
{
"200": "0",
"month": "OCT",
"205": "0"
},
{
"200": "0",
"month": "NOV",
"205": "0"
},
{
"200": "0",
"month": "DEC",
"205": "0"
}
],
"valueAxes": [{
"axisAlpha": 1,
"axisColor": "#cccccc",
"gridCount": 10,
"position": "left",
"title": "Place taken",
"dashLength": 5,
"axisThickness": 2,
"tickLength": 0
}],
"startDuration": 0.5,
"graphs": [{
"balloonText": "[[value]]",
"colorField": "selected",
"bullet": "round",
"title": "200",
"valueField": "200",
"fillAlphas": 0
}, {
"balloonText": "[[value]]",
"colorField": "selected",
"bullet": "round",
"title": "205",
"valueField": "205",
"fillAlphas": 0
}],
"chartCursor": {
"pan": false,
"valueLineEnabled": false,
"valueLineBalloonEnabled": false,
"cursorAlpha": 1,
"cursorColor": "#e2e2d9",
"color": "black",
"valueLineAlpha": 1,
"valueZoomable": true,
"fullWidth": true
},
"categoryField": "month",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 1,
"axisThickness": 2,
"axisColor": "#cccccc",
"fillAlpha": 0.01,
"fillColor": "#000000",
"gridAlpha": 0,
"position": "bottom",
"tickLength": 0
},
"export": {
"enabled": false
},
"listeners": [{
"event": "init",
"method": function(e) {
e.chart.zoomToIndexes(e.chart.dataProvider.length - 40, e.chart.dataProvider.length - 1);
/**
* Add click event on the plot area
*/
e.chart.chartDiv.addEventListener("click", function() {
// we track cursor's last known position by "changed" event
if (e.chart.lastCursorPosition !== undefined) {
// get date of the last known cursor position
var month = e.chart.dataProvider[e.chart.lastCursorPosition][e.chart.categoryField];
// create a new guide or update position of the previous one
if (pre_month === month) {
e.chart.categoryAxis.guides.pop();
e.chart.dataProvider[e.chart.lastCursorPosition].selected = undefined;
pre_month = undefined; //unset so that the user can re-select the current position after de-selecting.
} else {
pre_month = month;
var guide = new AmCharts.Guide();
e.chart.categoryAxis.guides.pop();
for (var i = 0; i < e.chart.dataProvider.length; ++i) {
if (e.chart.dataProvider[i].selected) {
e.chart.dataProvider[i].selected = undefined; //clear out previously selected line
break;
}
}
guide.category = month;
guide.toCategory = month;
guide.lineAlpha = 1;
guide.lineColor = "#b6f9ee";
guide.expand = true;
guide.inside = true;
guide.fillAlpha = 0.2;
guide.lineThickness = 0;
guide.fillColor = "#b6f9ee";
e.chart.categoryAxis.addGuide(guide);
e.chart.dataProvider[e.chart.lastCursorPosition].selected = "#880000";
}
e.chart.validateData();
}
})
//handle touch screens so that subsequent guides can
//be added. Requires that the user taps the next
//point twice. Needed in order to not break zoom/pan
e.chart.chartDiv.addEventListener("touchend", function() {
e.chart.tapped = false;
});
}
}, {
"event": "changed",
"method": function(e) {
/**
* Log cursor's last known position
*/
e.chart.lastCursorPosition = e.index;
}
}],
});
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

Related

Title in top column charts

I have a problem with using headings on the top of the columns using the bar chart.
In some moments shows the title, and other moment does not show ...
Here my Print!
chart = new Highcharts.Chart({
"chart": {
"renderTo": "container_adwords",
"type": "column",
"animation": false
},
"title": {
"text": "Formul\u00e1rio | Chatbot | Whatsapp)"
},
"colors": ["#1d6c3f", "#003f23", "#68a9dc", "#007b5a", "#e4452b", "#ba0d00", "#004b76", "#b6740c", "#1b964e", "#f79969", "#fdc076", "#24a1ae", "#e46a2b", "#ff7754", "#83ccb0", "#6ecbd6", "#ec9631", "#65c07f", "#147bb6", "#005a64"],
"series": [{
"name": "2018",
"data": [575, 360.818182, 194.285714, 410.1, 212, 161.92, 344.846154, 203.639, 824.268, 130.406333, 323.399231, 657.198889]
}, {
"name": "2019",
"data": [1236.88, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}],
"xAxis": {
"categories": ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
"labels": {
"style": {
"fontSize": "15px"
}
}
},
"yAxis": {
"min": 0,
"title": {
"text": "Quantidade"
}
},
"legend": {
"align": "center",
"verticalAlign": "bottom"
},
"tooltip": {
"formatter": function() {
return '' + this.x + ': R$ ' + this.y.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
}
},
"plotOptions": {
"column": {
"dataLabels": {
"enabled": true,
"crop": true,
"overflow": "none",
"style": {
"fontSize": "14px"
},
"formatter": function() {
return 'R$ ' + this.y.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
}
}
}
}
});
I looked in the Highcharts documentation, but I could not identify anything that could help me on this subject.
Change dataLabels.overflow to "justify".
"plotOptions": {
"column": {
"dataLabels": {
"color": "black",
"enabled": true,
"crop": false,
"overflow": "justify",
"style": {
"fontSize": "14px"
},
"formatter": function() {
return 'R$ ' + this.y.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
}
}
}
}
https://jsfiddle.net/vdLtw9as/
(I also changed the color, because I don't like it when is does the contrast thing)

On hover, multiple nested donut charts not showing balloon text- amcharts

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>

AmCharts serial chart date ordering issue

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>

How can I change color of StockEvent baloon's border [AmCharts v3]

Is is possible to change color of StockEvent balloon (hint) border? It's always red. I can't find any suitable option. Please see my current solution http://jsfiddle.net/a04j0hqv/4/
There is of course possibility to change AmBalloon border of value hint but it seems to be impossible to change it to StockEvent.
var amChartsData = [{"date":"2017-03-01","value":"126.510000"},{"date":"2017-03-02","value":"126.420000"},{"date":"2017-03-03","value":"126.480000"},{"date":"2017-03-06","value":"126.400000"},{"date":"2017-03-07","value":"126.650000"},{"date":"2017-03-08","value":"126.370000"},{"date":"2017-03-09","value":"126.480000"},{"date":"2017-03-10","value":"120.720000"},{"date":"2017-03-13","value":"121.420000"},{"date":"2017-03-14","value":"121.420000"},{"date":"2017-03-15","value":"121.700000"},{"date":"2017-03-16","value":"122.410000"},{"date":"2017-03-17","value":"122.530000"},{"date":"2017-03-20","value":"122.260000"},{"date":"2017-03-21","value":"121.540000"},{"date":"2017-03-22","value":"121.250000"},{"date":"2017-03-23","value":"121.690000"},{"date":"2017-03-24","value":"121.950000"},{"date":"2017-03-27","value":"121.390000"},{"date":"2017-03-28","value":"122.330000"},{"date":"2017-03-29","value":"122.840000"},{"date":"2017-03-30","value":"122.670000"},{"date":"2017-03-31","value":"122.840000"},{"date":"2017-04-03","value":"122.760000"},{"date":"2017-04-04","value":"123.070000"},{"date":"2017-04-05","value":"123.930000"},{"date":"2017-04-06","value":"124.130000"},{"date":"2017-04-07","value":"124.580000"},{"date":"2017-04-10","value":"124.310000"},{"date":"2017-04-11","value":"123.870000"},{"date":"2017-04-12","value":"123.530000"},{"date":"2017-04-13","value":"123.470000"},{"date":"2017-04-14","value":"123.470000"},{"date":"2017-04-18","value":"123.000000"},{"date":"2017-04-19","value":"122.660000"},{"date":"2017-04-20","value":"122.940000"},{"date":"2017-04-21","value":"122.610000"},{"date":"2017-04-24","value":"124.010000"},{"date":"2017-04-25","value":"124.280000"},{"date":"2017-04-26","value":"124.460000"}];
function parseDate(dateString) {
var dateArray = dateString.split("-");
if(dateArray.lenght < 2) { alert(dateString); }
var date = new Date(Number(dateArray[0]), Number(dateArray[1]) - 1, Number(dateArray[2]), 0, 0, 0);
return date;
}
for (var j in amChartsData) {
amChartsData[j].date = parseDate(amChartsData[j].date);
}
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"theme": "light",
"dataSets": [ {
"color": "#006EBE",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
} ],
"dataProvider": amChartsData,
"categoryField": "date",
// EVENTS
"stockEvents": [{
"date": new Date( 2017, 3, 6 ),
"type": "sign",
"rollOverColor": "#EF9463",
"borderColor": "#EF9463",
"backgroundColor": "#ffffff",
"graph": "g1",
"description": "Lorem Ipsum ...",
}]
} ],
"panels": [ {
"title": "Value",
"stockGraphs": [ {
"id": "g1",
"valueField": "value"
} ]
} ],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"pan": true,
"cursorColor": "#006EBE",
"valueBalloonsEnabled": true,
"valueLineAlpha": 0.5,
},
"balloon": {
"shadowAlpha": 0,
"borderThickness": 1,
"adjustBorderColor": true,
"cornerRadius": 5,
"fillColor": "#FFFFFF"
},
"periodSelector": {
"periods": [ {
"period": "DD",
"count": 10,
"date": "10 days"
}, {
"period": "MM",
"count": 1,
"date": "1 month"
}, {
"period": "YYYY",
"count": 1,
"date": "1 year"
}, {
"period": "YTD",
"date": "YTD"
}, {
"period": "MAX",
"date": "MAX"
} ]
},
"panelsSettings": {
"usePrefixes": true
}
} );
You can change all stock events' balloon color by setting the balloonColor property in stockEventsSettings:
"stockEventsSettings": {
"balloonColor": "#008800"
}
Unfortunately you can't individually set the border for each different event.
Here's an updated fiddle with the balloon set to green.

amCharts group by Date

I use amCharts but I need to group data results by Date:
Demo example
I have 5 visits by one day and chart need to group results.
My code:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled":true,
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth":true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis":false,
"offset":30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount":true,
"color":"#AAAAAA"
},
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["DD"]
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable":true
},
"valueScrollbar":{
"oppositeAxis":false,
"offset":50,
"scrollbarHeight":10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"dataProvider": [
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
]
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
By documentation I use grouping settings without success.
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["DD"]
},
Any Help?
According to the documentation, categoryAxesSettings only applies to stock type charts. You're using a serial here. An alternative option is to translate the data yourself:
function translateData(data){
var newData = [], dates = [];
data.map(function(item){
var index = dates.indexOf(item.date);
if(index > -1){
newData[index].value += item.value;
}else{
newData.push(item);
dates.push(item.date);
}
});
return newData;
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled":true,
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth":true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis":false,
"offset":30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount":true,
"color":"#AAAAAA"
},
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["DD"]
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable":true
},
"valueScrollbar":{
"oppositeAxis":false,
"offset":50,
"scrollbarHeight":10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"dataProvider": translateData([
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
},
{
"date": "2016-12-01",
"value": 1
}
])
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="height: 300px;"></div>

Categories