Dynamic Datasets with Amcharts
<p>I'm trying to get Amcharts to render my charts dynamically.</p>

<p>You can see the main custom bar chart at this address:</p>

<p><a href="https://karmacover.com/app/template-dashboard.php" rel="nofollow noreferrer">https://karmacover.com/app/template-dashboard.php</a></p>

<p>I have a var where I store my url callback:</p>

<pre><code>var jsonSelected = 'https://www.karmacover.com/app/jsonp.php?callback=?';
</code></pre>

<p>On the front end side I have a dropdown where I want to select the chart dataset type and render dynamically:</p>

<pre><code>            &lt;span id="abc123" class="ic dropdownArrowWhite"&gt;&lt;/span&gt;

            &lt;div class="defaultDropdown" id="defaultDropdownGraph"&gt;
                &lt;div class="submenu"&gt;
                    &lt;div class="edit chartType"&gt;
                        &lt;a id="topUpCycle" class="active"&gt;Top-up Cycle &lt;span id="topUpCycleSpan" class="ic tickGreen"&gt;&lt;/span&gt;&lt;/a&gt;
                        &lt;a id="calendarMonth"&gt;Calendar Month &lt;span id="calendarMonthSpan" class="ic tickGreen"&gt;&lt;/a&gt;
                        &lt;a id="calendarYear"&gt;Calendar Year &lt;span id="calendarYearSpan" class="ic tickGreen"&gt;&lt;/a&gt;
                        &lt;a id="financialYear"&gt;Financial Year &lt;span id="financialYearSpan" class="ic tickGreen"&gt;&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt; 
</code></pre>

<p>and the selected option changes the value of the url and call the draw function:</p>

<pre><code>$('#topUpCycle').click(function(){
    var jsonSelected = 'https://www.karmacover.com/app/jsonp.php?callback=?';
    drawgraphs();
});
</code></pre>

<p>I can see the triggers are working and trigger draw function with the changed url, but nothing happens:</p>

<p><a href="https://i.stack.imgur.com/9hXsW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9hXsW.png" alt="enter image description here"></a></p>

<p>I hope you guys can really help me on that. Thanks a lot in advance! :)</p>

<p>Here is the full js file if you want to have a look (warning, a lot of custom code):</p>

<pre><code>    var jsonSelected = 'https://www.karmacover.com/app/jsonp.php?callback=?';

$(document).ready(function() {
    drawgraphs();

    $("#calendarMonthSpan").hide();
    $("#calendarYearSpan").hide();
    $("#financialYearSpan").hide();                         

$('#topUpCycle').click(function(){

    console.log('clicked Top-Up Cycle');


    //Not very beautifully coded 
    //remove active class on others
    $("#calendarMonth").removeClass("active");
    $("#calendarYear").removeClass("active");
    $("#financialYear").removeClass("active");

    // Hide the other spans
    $("#calendarMonthSpan").hide();
    $("#calendarYearSpan").hide();
    $("#financialYearSpan").hide();

    //add active class for this option
    $("#topUpCycle").addClass("active");
    $("#topUpCycleSpan").show();

    var jsonSelected = 'https://www.karmacover.com/app/jsonp.php?callback=?';
    console.log(jsonSelected);
    drawgraphs();
});


$('#calendarMonth').click(function(){

   console.log('clicked Calendar Month');

   //Not very beautifully coded 
   //remove active class on others  
   $("#topUpCycle").removeClass("active");
   $("#calendarYear").removeClass("active");
   $("#financialYear").removeClass("active");

    // Hide the other spans
    $("#topUpCycleSpan").hide();
    $("#calendarYearSpan").hide();
    $("#financialYearSpan").hide();

   //add active class for this option
   $("#calendarMonth").addClass("active");
   $("#calendarMonthSpan").show();

    var jsonSelected = 'https://www.karmacover.com/app/jsonp-monthly.php?callback=?';
    console.log(jsonSelected);
    drawgraphs();
});


$('#calendarYear').click(function(){

   console.log('clicked calendar year');

   //Not very beautifully 
   //remove active class on others  
   $("#topUpCycle").removeClass("active");
   $("#calendarMonth").removeClass("active");
   $("#financialYear").removeClass("active"); 

    // Hide the other spans
    $("#topUpCycleSpan").hide();
    $("#calendarMonthSpan").hide();
    $("#financialYearSpan").hide();

    //add active class for this option
   $("#calendarYear").addClass("active");
   $("#calendarYearSpan").show();

    var jsonSelected = 'https://www.karmacover.com/app/jsonp-yearly.php?callback=?';
    console.log(jsonSelected);
    drawgraphs();
});


$('#financialYear').click(function(){

   console.log('clicked Financial Year');

   //Not very beautifully coded
   //remove active class on others  
   $("#topUpCycle").removeClass("active");
   $("#calendarMonth").removeClass("active");
   $("#calendarYear").removeClass("active");

    // Hide the other spans
    $("#topUpCycleSpan").hide();
    $("#calendarMonthSpan").hide();
    $("#calendarYearSpan").hide();

    //add active class for this option
   $("#financialYear").addClass("active");
   $("#financialYearSpan").show();

    var jsonSelected = 'https://www.karmacover.com/app/jsonp-financial-year.php?callback=?';
    console.log(jsonSelected);
    drawgraphs();
});

});    

function drawgraphs() {

  console.log('Function is called');

   $.getJSON(jsonSelected, function(data) {


            var chartData = data[0];
            var chartData2 = data[1];
            var chartDataRight = data[2];

            var chart,chart1,chart2;
            chart2= new AmCharts.AmSerialChart();
            chart1 = new AmCharts.AmSerialChart();
            var chart2_start =0;
            var chart1_start = 6;
            var current_start=0,current_diff=11;
            var flag=false;
            var position,scroll_width;
            var column_width;
            var col_space;
            var monthly;
            var monthly_str;
            var month_array = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug",
                                "Sep","Oct","Nov","Dec"];
            var today_date = new Date();
            for( i =0; i&lt;chartDataRight.length; i++)
            {
                chartDataRight[i].baseOffset = 0;
                var month =chartDataRight[i].date.split("\n");
                month = month[1];
                if(chartDataRight[i].year == today_date.getFullYear() &amp;&amp; month ==month_array[today_date.getMonth()])
                {
                    current_start=i;
                }
                chartDataRight[i].color = ["#FFFFFF","#cccccc"];
            }
            for( i =0; i&lt;current_start; i++)
            {
                chartDataRight[i].color = ["#178539","#1faf4b"];
            }

            function drawHeader(startIndex,diff){

                var str=chartDataRight[startIndex].year;

                var c = document.getElementById("mycanvas");
                var c1 = document.getElementById("mycanvas1");
                var c2 = document.getElementById("mycanvas2");
                c.width = document.getElementById("chartdiv").offsetWidth - 30;
                c1.width = document.getElementById("chartdiv").offsetWidth - 30;
                c2.width = document.getElementById("chartdiv").offsetWidth - 30;
                var ctx = c.getContext("2d");
                var ctx1 = c1.getContext("2d");
                var ctx2 = c2.getContext("2d");
                var canvas_width = c.width;
                col_space = chart2.columnSpacing;
                column_width = (parseInt(canvas_width) - parseInt(col_space))/(current_diff+1);

                var str_width = ctx.measureText(str).width;
                var font_size = 12;
                var offset = (column_width-col_space-str_width) /2;
                ctx.clearRect(0,0,800,50);
                ctx.font = font_size+"px Times New Roman";
                ctx.fillStyle="#b6b6b6";
                ctx.strokeStyle="#6d6d6d";
                ctx.fillText(str, offset, 25);

                if(chartDataRight[startIndex].monthly == 1)
                {
                    monthly = 1;
                    monthly_str = "Monthly"
                }else{
                    monthly = 0;
                    monthly_str = "Fortnightly";
                }
                ctx2.clearRect(0,0,800,50);
                ctx2.font = font_size+"px Times New Roman";
                ctx2.fillStyle="#b6b6b6";
                ctx2.strokeStyle="#6d6d6d";
                str_width1 = ctx2.measureText(monthly_str).width;

                var offset1 = (column_width-col_space-str_width1) /2;

                var mf_start =0;
                for(var i=startIndex; i&lt;startIndex+current_diff; i++)
                {

                    if((chartDataRight[i].year !=str ) &amp;&amp; (i-startIndex &gt;= 0))
                    {
                        ctx.beginPath();
                        ctx.moveTo(column_width-col_space,19);
                        var base_gap;
                        if(chartDataRight[i].monthly == 1)
                        {
                            base_gap = 0;
                        }
                        else
                        {
                            base_gap = 8;
                        }
                        ctx.lineTo((column_width)*(i-startIndex+1)-chartDataRight[i].baseOffset-base_gap,19);
                        ctx.closePath();
                        ctx.stroke();
                        ctx.beginPath();
                        ctx.moveTo((column_width)*(i-startIndex+1)-chartDataRight[i].baseOffset-base_gap,13);
                        ctx.lineTo((column_width)*(i-startIndex+1)-chartDataRight[i].baseOffset-base_gap,25);
                        ctx.closePath();
                        ctx.stroke();
                        ctx.fillText(chartDataRight[i].year,(column_width)*(i-startIndex+1)-chartDataRight[i].baseOffset+col_space,25);
                        str = chartDataRight[i].year;
                        ctx.beginPath();
                        ctx.moveTo((column_width)*(i-startIndex+2)-chartDataRight[i].baseOffset-base_gap,19);
                        ctx.lineTo((column_width)*(current_diff+1)-2,19);
                        ctx.closePath();
                        ctx.stroke();
                        ctx.beginPath();
                        ctx.moveTo((column_width)*(current_diff+1)-2,13);
                        ctx.lineTo((column_width)*(current_diff+1)-2,25);
                        ctx.closePath();
                        ctx.stroke();
                    }
                    if((chartDataRight[i].monthly != monthly ) &amp;&amp; (i-startIndex &gt;= 0))
                    {
                        drawFortnightLabel(ctx2,column_width,offset1,startIndex,i,mf_start);
                        if(current_diff==1)
                        {
                            ctx2.fillText(monthly_str, 0, 25);
                            ctx2.moveTo(column_width*(1)-offset1+15,19);
                        }
                        mf_start = i-startIndex;
                        //drawFortnightLabel(ctx2,column_width,offset1,startIndex,i,mf_start);
                    }
                    if(i==startIndex+current_diff-1)
                    {
                        drawFortnightLabel(ctx2,column_width,offset1,startIndex,startIndex+current_diff+1,mf_start);
                    }
                    // Styling of the columns
                    ctx1.fillStyle="#b6b6b6";
                    ctx1.strokeStyle="#6d6d6d";
                    ctx1.clearRect(0,0,800,50);
                    ctx1.font = font_size+"px Times New Roman";
                    ctx1.fillText("Previous",0,30);
                    ctx1.fillText("Upcoming",(column_width)*(current_diff+1)-ctx1.measureText("Upcoming").width,30);
                    ctx1.beginPath();
                    ctx1.moveTo(0,15);
                    ctx1.lineTo(0+(column_width)*(current_diff+1),15);
                    ctx1.closePath();
                    ctx1.stroke();
                    var step = (c1.width -col_space*2) / (chartDataRight.length - diff);
                    position = step * startIndex;
                    ctx1.beginPath();
                    ctx1.clearRect(position-4, 10,column_width-col_space*2+8,10)
                    roundRect(ctx1,position,10,column_width-col_space*2,10);
                    scroll_width = column_width-col_space*2;
                    ctx1.closePath();

                    var d = document.getElementById('left-border');
                    d.style.position = "absolute";
                    d.style.display = "none";
                    var chart_div = document.getElementById("chartdiv");
                    d.style.top = chart_div.offsetTop+50+'px';
                    d.style.height = chart_div.offsetHeight - 100 + "px";  
                    d.style.left = parseInt(chart_div.offsetLeft)+parseInt(c1.width/2 + col_space+20)+'px';

                }

            }

            function drawFortnightLabel(ctx2,column_width,offset1,startIndex,i,mf_start){

                // if(mf_start ==0)
                {
                    ctx2.beginPath();
                    if(mf_start ==0)
                    {
                        ctx2.fillText(monthly_str, 0, 25);
                        ctx2.moveTo(column_width*(mf_start+1)-offset1+15,19);
                    }else if(monthly_str=="Fortnightly")
                    {
                        ctx2.fillText(monthly_str, column_width*mf_start+offset1 + col_space, 25);
                        ctx2.moveTo(column_width*(mf_start+1)-offset1+15,19);
                    }
                    else{
                        ctx2.fillText(monthly_str, column_width*mf_start+offset1 + 6 + col_space, 25);
                        ctx2.moveTo(column_width*(mf_start+1)-offset1+chartDataRight[mf_start].baseOffset,19);

                    }
                    if((column_width)*(i-startIndex) &gt; column_width*(mf_start+1)-offset1+11)
                    {

                        if((column_width)*(i-startIndex)+offset1+chartDataRight[mf_start].baseOffset&lt;column_width*(current_diff+1))
                        {
                            ctx2.lineTo((column_width)*(i-startIndex)+offset1+chartDataRight[mf_start].baseOffset,19);
                            ctx2.closePath();
                            ctx2.stroke(); 
                            ctx2.beginPath();
                            ctx2.moveTo((column_width)*(i-startIndex)+offset1+chartDataRight[mf_start].baseOffset,13);
                            ctx2.lineTo((column_width)*(i-startIndex)+offset1+chartDataRight[mf_start].baseOffset,25);
                        }
                        else
                        {
                            ctx2.lineTo((column_width)*(current_diff+1),19);
                            ctx2.closePath();
                            ctx2.stroke(); 
                            ctx2.beginPath();
                            ctx2.moveTo((column_width)*(current_diff+1),13);
                            ctx2.lineTo((column_width)*(current_diff+1),25);
                        }
                    }
                    ctx2.closePath();
                    ctx2.stroke();
                }

                if(i&lt;chartDataRight.length){
                    if(chartDataRight[i].monthly==1)
                    {
                        monthly_str = "Monthly";
                    }
                    else
                    {
                        monthly_str = "Fortnightly";
                    }


                    monthly = chartDataRight[i].monthly;
                }
            }
            // Rounding columns angles
            function roundRect(ctx, x, y, width, height) {
                var radius =5;
                ctx.beginPath();
                ctx.moveTo(x + radius, y);
                ctx.lineTo(x + width - radius, y);
                ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
                ctx.lineTo(x + width, y + height - radius);
                ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
                ctx.lineTo(x + radius, y + height);
                ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
                ctx.lineTo(x, y + radius);
                ctx.quadraticCurveTo(x, y, x + radius, y);
                ctx.closePath();
                ctx.fill();
            }
            function drawChart() {

                // The Doughnut chart
                if(current_start+current_diff &gt;= chartDataRight.length)
                 {
                     chart2.zoomToIndexes(chartDataRight.length -current_diff-1, chartDataRight.length);
                 }
                // else
                 {
                     chart2.zoomToIndexes(current_start, current_start+current_diff);
                 }
            }

           AmCharts.ready(function () {

                // The 30 days Doughnut chart
                chart = new AmCharts.AmPieChart();
                chart.dataProvider = chartData;    
                chart.labelText="";                       
                chart.valueField = "slice_value";
                chart.titleField = "category"
                chart.sequencedAnimation = true;
                chart.colorField ="color";
                chart.innerRadius = "60%";
                chart.labelRadius = 15;
                chart.addListener('rendered', function(event) {

                // populate custom legend when chart renders
                chart.customLegend = document.getElementById('legend');
                legend.innerHTML = "";
                for (var i in chart.chartData) {
                    var row = chart.chartData[i];
                    var color = chart.dataProvider[i].color;

                    legend.innerHTML += '&lt;div class="legend-item" id="legend-item-' + i + '" onclick="toggleSlice(' + i + ');" style="color: ' + "#777777" + ';"&gt;&lt;div class="legend-marker" style="background: ' + color + '"&gt;&lt;/div&gt;' + row.title+'&lt;/div&gt;';
                }
                });

                // In case we need to style the modals
                // chart.balloonText = "[[title]]&lt;br&gt;&lt;span style='font-size:14px'&gt;&lt;b&gt;[[value]]&lt;/b&gt; ([[percents]]%)&lt;/span&gt;";

                chart.angle = 0;

                // WRITE
                chart.write("mychartdiv");


                 // The last 12 months Doughnut chart
                chart3 = new AmCharts.AmPieChart();
                chart3.dataProvider = chartData2;    
                chart3.labelText="";                       
                chart3.valueField = "slice_value";
                chart3.titleField = "category"
                chart3.sequencedAnimation = true;
                chart3.colorField ="color";
                chart3.innerRadius = "60%";
                chart3.labelRadius = 15;
                chart3.outlineThickness = 3;
                chart3.addListener('rendered', function(event) {

                // populate custom legend when chart renders
                chart3.customLegend = document.getElementById('legend3');
                legend3.innerHTML = "";
                for (var i in chart.chartData) {
                    var row = chart.chartData[i];
                    var color = chart.dataProvider[i].color;

                    legend3.innerHTML += '&lt;div class="legend-item" id="legend-item-' + i + '" onclick="toggleSlice(' + i + ');" style="color: ' + "#777777" + ';"&gt;&lt;div class="legend-marker" style="background: ' + color + '"&gt;&lt;/div&gt;' + row.title+'&lt;/div&gt;';
                }
                });

                // In case we need to style the modals
                // chart.balloonText = "[[title]]&lt;br&gt;&lt;span style='font-size:14px'&gt;&lt;b&gt;[[value]]&lt;/b&gt; ([[percents]]%)&lt;/span&gt;";

                chart3.angle = 0;

                // WRITE
                chart3.write("mychartdiv3");

                chart2.dataProvider = chartDataRight;
                chart2.categoryField = "date";
                chart2.zoomOutButtonImageSize = 0;
                chart2.zoomOutText = "";
                chart2.columWidth=0.4;
                chart2.mouseWheelScrollEnabled=true;
                chart2.panEventsEnabled = true;
                var categoryAxis = chart2.categoryAxis;
                categoryAxis.gridAlpha = 0;
                categoryAxis.axisAlpha = 0;
                categoryAxis.color="#b6b6b6";
                categoryAxis.gridPosition = "start";
                categoryAxis.labelFunction = function(valueText, date, categoryAxis) {

                    return (valueText.slice(4,valueText.length));
                }

                // X Axis
                var valueAxis = new AmCharts.ValueAxis();
                valueAxis.gridAlpha = 0;
                valueAxis.axisAlpha = 0;
                valueAxis.fillColor = "#000000";
                valueAxis.inside = true;
                valueAxis.labelsEnabled  = false;
                chart2.addValueAxis(valueAxis);

                // column graph
                var graph1 = new AmCharts.AmGraph();
                graph1.type = "column";
                graph1.title = "bill_amount";

                graph1.valueField = "bill_amount";
                graph1.labelColorField = "strColor";
                graph1.fontSize=11;               
                graph1.labelText="$[[value]]";
                graph1.labelOffset=15;
                graph1.labelPosition='inside';
                graph1.labelRotation=-90;
                graph1.fillColorsField="color";
                graph1.cornerRadiusTop = 3;
                graph1.lineAlpha = 0;
                graph1.fillAlphas = 1;

                chart2.addGraph(graph1);


                // Step graph           
                graph = new AmCharts.AmGraph();

                graph.type = "step"; 
                graph.valueField = "step_amount";
                graph.lineColor = "#ffb400";
                graph.lineThickness =5;
                chart2.addGraph(graph);

                var chartCursor = new AmCharts.ChartCursor();
                chartCursor.cursorAlpha = 0;
                chartCursor.cursorPosition = "mouse";
                chartCursor.categoryBalloonDateFormat = "YYYY";
                chartCursor.categoryBalloonEnabled = false;
                chartCursor.zoomable=false;
                chartCursor.pan=true;
                chart2.addChartCursor(chartCursor);

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

                chartScrollbar.autoGridCount=true;
                chartScrollbar.graph = "g1";
                chartScrollbar.scrollbarHeight =40;

                chart2.creditsPosition = "bottom-right";

                // WRITE            
                chart2.write("chartdiv");

                // ZOOM
                chart2.addListener("zoomed", handleZoom);

                chart2.zoomToIndexes(current_start-Math.ceil(current_diff/2), current_start+Math.floor(current_diff/2));
                });

                function getxoffset(path_array){
                    var resultx=[], resulty=[];
                    var result=[];
                    var temp;
                    for(var i=0; i&lt;path_array.length; i++)
                    {
                        temp = (path_array[i].split(","));
                        resultx[i]=temp[0];
                        resulty[i]=temp[1];
                        // console.log(i + "," + resultx[i]);
                    }
                    result.x = resultx;
                    result.y = resulty;
                    return result;
                }
                // And more I couldn't paste...
    });

};
</code></pre>

<p>You can find the full js file here: <a href="https://karmacover.com/app/js/columns-chart.js" rel="nofollow noreferrer">https://karmacover.com/app/js/columns-chart.js</a></p>

<p>Again, I appreciate any help you can provide !</p>