javascript - AmCharts default axis values -
i building demographic chart, age ranges, getting age ranges json, problem when values empty chart displays nothing, or when there's 1 or 2 values blocks huge , doesn't show other ages want show empty still visible....
my chart now:
as can see it's displaying fine, want show other age ranges don't have values, possible option in amcharts?
my json
[{"age":"45 - 64","male":-100,"female":50},{"age":"31 - 45","female":50}] my amcharts javascript
$.getjson('<?php echo site_url; ?>analytic/jobs_demographic_json', function(chartdata) { amcharts.makechart("container2", { "type": "serial", "theme": "light", "rotate": true, "marginbottom": 50, "dataprovider": chartdata, "startduration": 1, "graphs": [{ "fillalphas": 0.8, "linealpha": 0.2, "type": "column", "valuefield": "male", "title": "male", "labeltext": "[[value]]", "clustered": false, "labelfunction": function(item) { return math.abs(item.values.value); }, "balloonfunction": function(item) { return item.category + ": " + math.abs(item.values.value) + "%"; } }, { "fillalphas": 0.8, "linealpha": 0.2, "type": "column", "valuefield": "female", "title": "female", "labeltext": "[[value]]", "clustered": false, "labelfunction": function(item) { return math.abs(item.values.value); }, "balloonfunction": function(item) { return item.category + ": " + math.abs(item.values.value) + "%"; } }], "categoryfield": "age", "categoryaxis": { "gridposition": "start", "gridalpha": 0.2, "axisalpha": 0 }, "valueaxes": [{ "gridalpha": 0, "ignoreaxiswidth": true, "labelfunction": function(value) { return math.abs(value) + '%'; }, "guides": [{ "value": 0, "linealpha": 0.2 }] }], "balloon": { "fixedposition": true }, "chartcursor": { "valueballoonsenabled": false, "cursoralpha": 0.05, "fullwidth": true }, "alllabels": [{ "text": "male", "x": "28%", "y": "97%", "bold": true, "align": "middle" }, { "text": "female", "x": "75%", "y": "97%", "bold": true, "align": "middle" }], "export": { "enabled": true } }); }); so question, can predefine vertical axis age ranges , values check if age range matches , append values
you can use amcharts.addinithandler() method pre-process data (for populating missing categories) before chart built.
below working example of how can solve particular task.
/** * custom pre-processor data * kick in **before** chart built * we'll manipulate data add "missing" categories * category list should added array in `categories` setting */ amcharts.addinithandler( function( chart ) { // `categories` set? if ( typeof chart.categories === "undefined" ) return; // build new data set var data = []; ( var = 0; < chart.categories.length; i++ ) { data.push( getdatapointbycategory( chart.categories[ ] ) ); } function getdatapointbycategory( category ) { // if find category in data, we'll use data point ( var = 0; < chart.dataprovider.length; i++ ) { if ( chart.dataprovider[ ][ chart.categoryfield ] == category ) return chart.dataprovider[ ]; } // otherwise, initialize new empty datapoint var dp = {}; dp[ chart.categoryfield ] = category; return dp; } // assign new data chart.dataprovider = data; }, [ "serial" ] ); /** * sample partial data */ var chartdata = [{ "age": "45 - 64", "male": -100, "female": 50 }, { "age": "31 - 45", "female": 50 }]; /** * chart */ amcharts.makechart("container2", { "type": "serial", "theme": "light", "rotate": true, "marginbottom": 50, "dataprovider": chartdata, "startduration": 1, "graphs": [{ "fillalphas": 0.8, "linealpha": 0.2, "type": "column", "valuefield": "male", "title": "male", "labeltext": "[[value]]", "clustered": false, "labelfunction": function(item) { return math.abs(item.values.value); }, "balloonfunction": function(item) { return item.category + ": " + math.abs(item.values.value) + "%"; } }, { "fillalphas": 0.8, "linealpha": 0.2, "type": "column", "valuefield": "female", "title": "female", "labeltext": "[[value]]", "clustered": false, "labelfunction": function(item) { return math.abs(item.values.value); }, "balloonfunction": function(item) { return item.category + ": " + math.abs(item.values.value) + "%"; } }], "categories": [ "84+", "64 - 84", "45 - 64", "31 - 45", "20 - 31", "20 , younger" ], "categoryfield": "age", "categoryaxis": { "gridposition": "start", "gridalpha": 0.2, "axisalpha": 0 }, "valueaxes": [{ "gridalpha": 0, "ignoreaxiswidth": true, "labelfunction": function(value) { return math.abs(value) + '%'; }, "guides": [{ "value": 0, "linealpha": 0.2 }] }], "balloon": { "fixedposition": true }, "chartcursor": { "valueballoonsenabled": false, "cursoralpha": 0.05, "fullwidth": true }, "alllabels": [{ "text": "male", "x": "28%", "y": "97%", "bold": true, "align": "middle" }, { "text": "female", "x": "75%", "y": "97%", "bold": true, "align": "middle" }], "export": { "enabled": true } });<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="container2" style="width: 100%; height: 250px;"></div>