Amcharts does not show 2d Y axis (Json data) - json

Question

I have the following Json data (extract) that I use to graph a dual Y axis chart with amchart:
[{"Day":"24-05 10H","Production":"0.82431267","USD":"482.02837415988"},{"Day":"24-05 11H","Production":"0.83045272","USD":"485.61885435808"},{"Day":"24-05 12H","Production":"0.83441691","USD":"487.93696995924"},{"Day":"24-05 01H","Production":"0.84323421","USD":"493.09300957644"},{"Day":"24-05 02H","Production":"0.85096095","USD":"497.61132896580006"},{"Day":"24-05 03H","Production":"0.85694953","USD":"501.11323496092"},{"Day":"24-05 04H","Production":"0.868104","USD":"507.635967456"},{"Day":"24-05 06H","Production":"0.8802085","USD":"519.796567173"},{"Day":"24-05 07H","Production":"0.8913847","USD":"532.3438566870001"},{"Day":"24-05 08H","Production":"0.89426695","USD":"530.7322322868499"},{"Day":"24-05 09H","Production":"0.89904346","USD":"531.08385173466"},{"Day":"24-05 10H","Production":"0.90740126","USD":"535.88759172324"},{"Day":"24-05 11H","Production":"0.91944257","USD":"554.8872687652799"},{"Day":"25-05 12H","Production":"0.92783829","USD":"554.54203862259"},{"Day":"25-05 02H","Production":"0.94182047","USD":"565.81654194143"},{"Day":"25-05 03H","Production":"0.94743531","USD":"574.52571941931"},{"Day":"25-05 04H","Production":"0.95331299","USD":"579.83927978564"},{"Day":"25-05 05H","Production":"0.9563386","USD":"580.4497132700001"},{"Day":"25-05 06H","Production":"0.96906754","USD":"594.5520078162"},{"Day":"25-05 07H","Production":"0.97823946","USD":"580.6878346533"},{"Day":"25-05 08H","Production":"0.97823946","USD":"580.6878346533"},{"Day":"25-05 09H","Production":"0.99806768","USD":"595.88932187024"},{"Day":"25-05 10H","Production":"0.00706363","USD":"4.21520001161"},{"Day":"25-05 11H","Production":"0.01715723","USD":"10.19647316008"},{"Day":"25-05 12H","Production":"0.02629501","USD":"15.77321951856"},{"Day":"25-05 01H","Production":"0.04011605","USD":"24.3299831645"}
And the following code used to graph:
<script>
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataLoader": {
"url": "http://x.x.x.x/json.php", "format": "json"
},
"valueAxes": [{
"id": "v1",
"startDuration": 1,
"axisColor": "#FF6600",
"axisThickness": 5,
"gridAlpha": 0.1,
"axisAlpha": 1
}, {
"id": "v2",
"axisColor": "#FCD202",
"axisThickness": 5,
"gridAlpha": 0,
"axisAlpha": 1,
"position": "right",
"synchronizeWith": "v1",
"synchronizationMultiplier": 5
}],
"graphs": [{
"valueAxis": "v1",
"type": "column",
"fillColorsField": "#B0DE09",
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"title": "Production Crypto",
"valueField": "Production"
}, {
"valueAxis": "v2",
"type": "smoothedLine",
"lineColor": "#364cf2",
"lineThickness": 3,
"bulletBorderThickness": 1,
"hideBulletsCount": 30,
"title": "Production USD",
"valueField": "USD",
"fillAlphas": 0
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "Day",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20
}
});
</script>
This is the screenshot of the graph I get:
Where the blue line for the USD series clearly does not render properly.
I have been able to get a dual Y axis graph showing properly (http://jsfiddle.net/spjem6b8/) with random generated data, so I guess this is the json part that generates this issue.
What am I doing wrong here?
Thanks

Answer 1

Your synchronizationMultiplier isn't high enough to make the second Y axis large enough to encapsulate your USD values in your dataset. In your current setup, your second Y axis values range from 0-6, but your USD values range from 4-600. Increase your syncrhonizationMultiplier to 600 in this case and it will work.
"valueAxes": [{
"id": "v1",
"startDuration": 1,
"axisColor": "#FF6600",
"axisThickness": 5,
"gridAlpha": 0.1,
"axisAlpha": 1
}, {
"id": "v2",
"axisColor": "#FCD202",
"axisThickness": 5,
"gridAlpha": 0,
"axisAlpha": 1,
"position": "right",
"synchronizeWith": "v1",
"synchronizationMultiplier": 600
}],
There's also an unsupported beta property called synchronizeGrid that can sometimes do this for your automatically, but it's not guaranteed to work with all value axis setting combinations so your mileage may vary. This is set at the top of the chart config:
AmCharts.makeChart("chartdiv", {
// ...
synchronizeGrid: true, //no need for synchronizeWith/Multiplier in the value axis
// ...
});
Here's an updated fiddle with the updated multiplier: http://jsfiddle.net/spjem6b8/1/