I have the following chart:
AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "light",
"colorField": "color",
"series": [{
"type": "PieSeries",
"alignLabels": false,
"ticks": {
"disabled": true
},
"labels": {
"radius": "-40%",
"fill": "white"
}
}],
"dataProvider": [{
"title": "Yes",
"value": 3,
"color": "#6bbdb9"
},
{
"title": "No",
"value": 2,
"color": "#2f2f2f"
}
],
"titleField": "title",
"valueField": "value",
"labelRadius": 5,
"radius": "42%",
"innerRadius": "60%",
"labelText": "[[title]]",
"export": {
"enabled": true
}
});
#chartdiv {
width: 100%;
height: 500px;
}
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/plugins/responsive/responsive.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<div id="chartdiv"></div>
I have two items I want to resolve:
I want the "Yes" and "No" labels to sit inside rather the slices, rather than be outside. From the V4 docs, I have tried this approach:
"series": [ {
"type": "PieSeries",
"alignLabels": false,
"ticks": {
"disabled": true
},
"labels": {
"text": "{value.percent.formatNumber('#.0')}%",
"radius": "-40%",
"fill": "white"
}
}]
But this approach doesn't work for me in V3 (does nothing).
When you click a slice, it animates the slice outwards, I want, on click, for it to do nothing. Can't find anything on the docs about this?
Any ideas?
A lot of what you're looking for is in the aptly named Version 3 documentation; I'm not sure why you were poking around in the version 4 documentation.
That said, to move the labels inside, you need to set a negative labelRadius as demonstrated here:
AmCharts.makeChart("...", {
// ...
labelRadius: -35, //adjust as needed
// ...
});
To disable the pull out on click, set pullOutRadius to 0.
AmCharts.makeChart("...", {
// ...
pullOutRadius: 0,
// ...
});
Demo below:
AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "light",
"colorField": "color",
"dataProvider": [{
"title": "Yes",
"value": 3,
"color": "#6bbdb9"
},
{
"title": "No",
"value": 2,
"color": "#2f2f2f"
}
],
"titleField": "title",
"valueField": "value",
"labelRadius": -35,
"radius": "42%",
"innerRadius": "60%",
"labelText": "[[title]]",
"color": "#ffffff",
"pullOutRadius": 0,
"export": {
"enabled": true
}
});
#chartdiv {
width: 100%;
height: 500px;
}
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/plugins/responsive/responsive.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<div id="chartdiv"></div>
Related
I have a Funnel chart from https://www.amcharts.com/demos/funnel-chart/?theme=none. It works fine.
I would like to set a fixed height for the segments, but I don't know how.
There isn't a way to set fixed height segments directly in the config, but you can fake it using your data by setting fake values for the area/height of the segments but display the real values in a separate property in your balloonText and labelText, for example:
"dataProvider": [ {
"title": "Website visits",
"areaValue": 30, //value used for segment height/area
"realValue": 300
}, {
"title": "Downloads",
"areaValue": 30,
"realValue": 123
}, // ...
],
// ...
"valueField": "areaValue", //use the area value for visual purposes
"balloonText": "[[title]]:<b>[[realValue]]</b>", //reference the actual value through the realValue
"labelText": "[[title]]: [[realValue]]",
Demo below with segments with identical height:
var chart = AmCharts.makeChart("chartdiv", {
"type": "funnel",
"theme": "none",
"dataProvider": [{
"title": "Website visits",
"areaValue": 30,
"realValue": 300
}, {
"title": "Downloads",
"areaValue": 30,
"realValue": 123
}, {
"title": "Requested prices",
"areaValue": 30,
"realValue": 98
}, {
"title": "Contacted",
"areaValue": 30,
"realValue": 72
}, {
"title": "Purchased",
"areaValue": 30,
"realValue": 35
}, {
"title": "Asked for support",
"areaValue": 30,
"realValue": 25
}, {
"title": "Purchased more",
"areaValue": 30,
"realValue": 18
}],
"titleField": "title",
"marginRight": 160,
"marginLeft": 15,
"labelPosition": "right",
"funnelAlpha": 0.9,
"valueField": "areaValue",
"balloonText": "[[title]]:<b>[[realValue]]</b>",
"labelText": "[[title]]: [[realValue]]",
"startX": 0,
"neckWidth": "40%",
"startAlpha": 0,
"outlineThickness": 1,
"neckHeight": "30%",
"export": {
"enabled": true
}
});
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/funnel.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/none.js"></script>
<div id="chartdiv"></div>
With these basic options, this chart is feeling cramped — the 'U.S. Average' plotline label is overlapping the first bar.
Is there a way to add padding to the top and bottom of the plot area, thereby giving a little breathing room for the plotline & its label?
JSFiddle of the problem
Plotline code:
Highcharts.setOptions({
chart: {
style: {
fontFamily: "Oswald, sans-serif",
textTransform: "uppercase"
}
}
});
var chart = new Highcharts.Chart({
"credits": {
"enabled": false
},
"chart": {
"renderTo": "container",
"type": "bar"
},
"title": {
"text": "Percent of Adults Who Binge Drank"
},
"subtitle": {
"text": "2013 | Percent of Adults Who Binge Drank"
},
"xAxis": {
"categories": ["Boston", "Denver", "Miami", "New York", "Phoenix", "San Antonio", "San Jose", "Seattle", "Washington"],
"labels": {
"useHTML": true,
"style": {
"width": "100px",
"min-width": "100px",
"text-align": "right"
}
}
},
"yAxis": {
"title": {
"text": null
},
"plotLines": [{
"color": "#9b9b9b",
"dashStyle": "shortdot",
"value": 26,
"width": 2,
"label": {
"text": "U.S. Average",
"align": "left",
"x": 5,
"rotation": 0,
"zIndex": 1000,
"useHTML": true,
"style": {
"font-size": "10px",
"background-color": "#fff"
}
}
}]
},
"series": [{
"data": [35, 26, 18, 18, 15, 21, 55, 19, 22],
"color": "#e12922"
}],
"exporting": {
"enabled": true,
"buttons": {
"contextButton": {
"menuItems": "buttons"
}
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height:400px;width:600px;margin:1.5em 1em;"></div>
I need something like in the picture attached.
Please follow this fiddle
As you can see, I've added two guide lines, but they are not visible, as its values are bigger than graph values.. Is there any way, I can make them visible? Maybe there is some way to zoom chart out or something.. See my code bellow or in jsfiddle.
Thanks,
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataDateFormat": "YYYY-MM-DD HH:NN",
"dataProvider": [{
"date": "2012-01-01",
"value": 8
}, {
"date": "2012-01-02",
"value": 10
}, {
"date": "2012-01-03",
"value": 12
}, {
"date": "2012-01-04",
"value": 14
}, {
"date": "2012-01-05",
"value": 11
}, {
"date": "2012-01-06",
"value": 6
}, {
"date": "2012-01-07",
"value": 7
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"tickLength": 0
}],
"graphs": [{
"bullet": "none",
"valueField": "value"
}],
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisAlpha": 0,
"gridAlpha": 0.1,
},
"guides": [{
"value": 25,
"toValue": 25,
"lineColor": "#CC0000",
"fillAlpha": 1,
"fillColor": "#CC0000",
"label": "critical"
}, {
"value": 20,
"toValue": 20,
"lineColor": "#CCF000",
"fillAlpha": 1,
"fillColor": "#CCF000",
"label": "normal"
}]
});
The answer is a value axis setting includeGuidesInMinMax. Just set it to true and it will recalculate value axis scale to include all present guides:
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"tickLength": 0,
"includeGuidesInMinMax": true
}]
Here's your updated fiddle.
I am working with a .ashx data handler that successfully calls and returns a valid JSON formatting (confirmed using http://www.freeformatter.com/json-validator.html).
I want to use that returned data in a amChart. My chart works correctly with hardcoded data. How do I make the chart accept the dynamic ashx JSON data?
<script type="text/javascript">
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"dataProvider": [{
"date": "11/04/2014",
"val1": 125,
"val2": 150
}, {
"date": "11/05/2014",
"val1": 100,
"val2": 130
},
// ETC
]
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Visitors By Date"
}],
"graphs": [{
"id": "val1",
"title": "val1bar",
"valueField": "val1",
"type": "column",
"balloonText": "VAL1<br>[[date]]<br>[[val1]]</div>"
}, {
"id": "val2",
"title": "val2bar",
"valueField": "val2",
"type": "column",
"balloonText": "VAL1<br>[[date]]<br>[[val1]]</div>"
}],
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.2
},
"categoryField": "date",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
});
</script>
Probably the easiest way for you to utilize JSON output from the ASHX is amChart's own Data Loader plugin.
Basically you would just need to include amcharts/plugins/dataloader/dataloader.min.js, then replace dataProvider with dataLoader info, like this:
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"dataLoader": {
"url": "mydata.ashx"
},
"valueAxes": [ {
"axisAlpha": 0,
"position": "left",
"title": "Visitors By Date"
} ],
"graphs": [ {
"id": "val1",
"title": "val1bar",
"valueField": "val1",
"type": "column",
"balloonText": "VAL1<br>[[date]]<br>[[val1]]</div>"
}, {
"id": "val2",
"title": "val2bar",
"valueField": "val2",
"type": "column",
"balloonText": "VAL1<br>[[date]]<br>[[val1]]</div>"
} ],
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.2
},
"categoryField": "date",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
} );
Data Loader expects JSON data by default, so you don't need to set any other options.
I am working on TreeMap where I am able to give borderColor on Hover of a particular datapoint. The same in this fiddle link --> http://jsfiddle.net/vgnshs/z8ncv2d5/.
But I am in need of requirement where I should get same kind of borderColor on click of a particular dataPoint (saying to user that the Point is selected) and borderColor should persist until I click on the same point again or somewhere outside plotArea. (I see this feature is available in Bubble chart, same needed in TreeMap). Also I should be able to select multiple points and all selected points should have the same borderColor.
Currently, TreeMap's select event fills the entire point with a different color which I don't want to. Only borderColor should be changed. How can I achieve this in TreeMap?
$(function () {
$('#container').highcharts({
"chart": {
"width": 640,
"height": 480
},
"colorAxis": {
"minColor": "#202020",
"maxColor": "#B0B0B0"
},
"title": {
"text": "Datalabel Sample"
},
"subtitle": {
"text": null
},
"credits": {
"enabled": false
},
"tooltip": {
"enabled": false
},
"plotOptions": {
"series": {
"states": {
"hover": {
"borderColor": "#0000FF",
"borderWidth": 1
}
}
}
},
"legend": {
"align": "right",
"layout": "vertical",
"verticalAlign": "middle",
"symbolHeight": 380,
"enabled": true
},
"series": [{
"type": "treemap",
"layoutAlgorithm": "squarified",
"allowDrillToNode": true,
"dataLabels": {
"enabled": false
},
"levels": [{
"level": 1,
"dataLabels": {
"enabled": true,
"color": "#FFFFFF",
"allowOverlap": false,
"align": "center",
"style": {
"fontWeight": "normal",
"fontSize": "24px",
"fontStyle": "normal",
"fontFamily": "'Open Sans', Arial, Helvetica, sans-serif",
"textShadow": null
},
"overflow": false
},
"borderWidth": 1
}],
"data": [ {
"id": "Apparel",
"name": "Apparel",
"value": 130.1,
"colorValue": 130.1,
"expanded": false,
"canexpand": false
}, {
"id": "Footwear",
"name": "Footwear",
"value": 90.7,
"colorValue": 90.7,
"expanded": false,
"canexpand": true
}, {
"id": "Accessories",
"name": "Accessories",
"value": 180.5,
"colorValue": 180.5,
"expanded": false,
"canexpand": true
}]
}]
});
});
#container {
min-width: 300px;
max-width: 600px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script src="http://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>
You can set select state and configure color as false. Next step is configure datalabels, by setting useHTML as true and zIndex as 30.
Example: http://jsfiddle.net/z8ncv2d5/3/