2 graphs sharing same x-axis

Question

I have recently started to use amchart for one of my project. Seeking help on a issue from anyone with experience from AMchart.

I have a dataset supposing to show two series on a smooth line graph by amchart. I managed to get it to show 2 series, but this two series are not sharing the same x-axis.

So any idea how can I make it to share the same x-axes. I have attached the code below. In the picture, there is a line of json which is returned by the function load_dashboard_leads() in my code.

 <script>
        var chart;
        var graph;
        var leadsGrowthData = <?PHP echo load_dashboard_leads();?>

            AmCharts.ready(function () {
                // SERIAL CHART
                chart = new AmCharts.AmSerialChart();

                chart.dataProvider = leadsGrowthData;
                chart.marginLeft = 10;
                chart.categoryField = "month";
                chart.dataDateFormat = "MMMM";

                // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
                chart.addListener("dataUpdated", zoomChart);

                // AXES
                // category
                var categoryAxis = chart.categoryAxis;
                categoryAxis.parseDates = false; // as our data is date-based, we set parseDates to true
                categoryAxis.minPeriod = "MM"; // our data is yearly, so we set minPeriod to YYYY
                categoryAxis.dashLength = 3;
                categoryAxis.minorGridEnabled = true;
                categoryAxis.minorGridAlpha = 0.1;

                // value
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.axisAlpha = 0;
                valueAxis.inside = true;
                valueAxis.dashLength = 3;
                chart.addValueAxis(valueAxis);

                // GRAPH
                graph = new AmCharts.AmGraph();
                graph.type = "smoothedLine"; // this line makes the graph smoothed line.
                graph.lineColor = "#d1655d";
                graph.negativeLineColor = "#637bb6"; // this line makes the graph to change color when it drops below 0
                graph.bullet = "round";
                graph.bulletSize = 8;
                graph.bulletBorderColor = "#FFFFFF";
                graph.bulletBorderAlpha = 1;
                graph.bulletBorderThickness = 2;
                graph.lineThickness = 2;
                graph.valueField = "lead";
                graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>";
                chart.addGraph(graph);
                
                // Customer GRAPH
                graph2 = new AmCharts.AmGraph();
                graph2.type = "smoothedLine"; // this line makes the graph smoothed line.
                graph2.lineColor = "#225F6A";
                graph2.negativeLineColor = "#637bb6"; // this line makes the graph to change color when it drops below 0
                graph2.bullet = "round";
                graph2.bulletSize = 8;
                graph2.bulletBorderColor = "#FFFFFF";
                graph2.bulletBorderAlpha = 1;
                graph2.bulletBorderThickness = 2;
                graph2.lineThickness = 2;
                graph2.valueField = "customer";
                graph2.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>";
                chart.addGraph(graph2);

                // CURSOR
                var chartCursor = new AmCharts.ChartCursor();
                chartCursor.cursorAlpha = 0;
                chartCursor.cursorPosition = "mouse";
//                chartCursor.categoryBalloonDateFormat = "YYYY";
                chart.addChartCursor(chartCursor);

                // SCROLLBAR
                var chartScrollbar = new AmCharts.ChartScrollbar();
                chart.addChartScrollbar(chartScrollbar);

                chart.creditsPosition = "bottom-right";

                // WRITE
                chart.write("leadsgrowth");
            });

            // this method is called when chart is first inited as we listen for "dataUpdated" event
            function zoomChart() {
                var monthNames = ["January", "February", "March", "April", "May", "June",
                    "July", "August", "September", "October", "November", "December"
                  ];

                  var d = new Date();
                // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
                chart.zoomToCategoryValues(monthNames[d.getMonth()], monthNames[d.getMonth()-12]);
            }
    </script><?PHP echo load_dashboard_leads();?>
 <div id="leadsgrowth" style="width:100%; height:400px;"></div>

Answer 1

strongly suggest that you start you project from package in AmCharts website and download samples that prepare to work offline mode...

when you define title and id the diffrent name its worked

        var durationGraph1 = new AmCharts.AmGraph();
        durationGraph1.id = "g1";
        durationGraph1.title = "g1";
        durationGraph1.valueField = "value1";
        chart.addGraph(durationGraph1);

        var durationGraph2 = new AmCharts.AmGraph();
        durationGraph2.id = "g2";
            durationGraph2.title = "g2";
            durationGraph2.valueField = "value2";
            chart.addGraph(durationGraph2);

then use:

 chartData.push( {
                          date: d3,                       
                          date2: strdate ,
                          value1: distance,
                          value2: distance2
                        } );

in your function that generate numbers

if you want to have animation on it you must set:

.amcharts-graph-g2 {
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 500%;
  stroke-dasharray: 0 \0/;    /* fixes IE prob */
  stroke-dashoffset: 0 \0/;   /* fixes IE prob */
  -webkit-animation: am-draw 40s;
  animation: am-draw 40s;
}
            .amcharts-graph-g22 {
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 500%;
  stroke-dasharray: 0 \0/;    /* fixes IE prob */
  stroke-dashoffset: 0 \0/;   /* fixes IE prob */
  -webkit-animation: am-draw 40s;
  animation: am-draw 40s;
}

Answer 2

one way to solve this problem is : upgrade to last version of AMCharts ver 3

like

https://www.amcharts.com/demos/duration-on-value-axis/?theme=black