Amcharts - Add a graph with axis dynamically

Leave a Comment

Add a graph with axis dynamically with am-charts


In this article i will explain how to insert graphs to chart dynamically.We are going to use Jquery and amcharts(JavaScript Charts & Maps)



Description



All new html file named "Chart.html"
and add below code in that



<
html xmlns="http://www.w3.org/1999/xhtml"><!
DOCTYPE html>
<head>
    <script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
    <script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
    <script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/light.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="app.js"></script>
    <title></title>
    <style>
        #chartdiv {
            width: 100%;
            height: 500px;
            font-size: 11px;
        }

        body {
            margin: 20px;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="chartdiv"></div>
    <h3>Defined sets</h3>
    <div id="holder"></div>
    <h3>New set</h3>
    <div class="form form-inline form-template">
        <input class="form-control titleField" type="text" placeholder="Graph" value="red line">
        <input class="form-control colorField" type="color" placeholder="Color (#HEX)" style="width: 50px;" value="#67b7dc">
        <input class="form-control maxField" type="number" placeholder="Max value">
        <button class="btn btn-primary" onclick="addGraphPlusAxis();">Add Item</button>
        <button class="btn btn-danger hidden">Remove Item</button>
    </div>
</body>
</html>


Add "app.js" file and add following code in it




var chartData = generateChartData();

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "pathToImages": "http://www.amcharts.com/lib/3/images/",
    "legend": {
        "useGraphSettings": true
    },
    "dataProvider": chartData,
    "valueAxes": [],
    "graphs": [],
    "chartScrollbar": {},
    "chartCursor": {
        "cursorPosition": "mouse"
    },
    "categoryField": "date",
    "categoryAxis": {
        "parseDates": true,
        "axisColor": "#DADADA",
        "minorGridEnabled": true
    },
    "export": {
        "enabled": true,
        "position": "bottom-right",
        "libs": {
            "path": "http://www.amcharts.com/lib/3/plugins/export/libs/"
        }
    }
});
chart.addListener("init", function() {
    setTimeout(function() {
        addGraphPlusAxis();
    }, AmCharts.updateRate);
});
chart.addListener("dataUpdated", zoomChart);
zoomChart();

// generate some random data, quite different range
function generateChartData() {
    var chartData = [];
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 100);

    for (var i = 0; i < 100; i++) {
        // we create date objects here. In your data, you can have date strings
        // and then set format of your dates using chart.dataDateFormat property,
        // however when possible, use date objects, as this will speed up chart rendering.
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);

        chartData.push({
            date: newDate
        });
    }
    return chartData;
}

function zoomChart() {
    chart.zoomToIndexes(chart.dataProvider.length - 20, chart.dataProvider.length - 1);
}

function addGraphPlusAxis() {
    var i1, gID = String(chart.graphs.length);
    var offsets = {
        left: -75,
        right: 0
    }
    var position = Math.random() * 10 > 5 ? "left" : "right";
    var color = jQuery(".form-template .colorField").val();
    var title = jQuery(".form-template .titleField").val();
    var max = jQuery(".form-template .maxField").val() || 100;

    // Pick from default color set
    color = color ? color : chart.colors[chart.graphs.length];

    // Validate maximum
    max = isNaN(max) ? 100 : Number(max);
    // Gather axis offset
    for (i1 = 0; i1 < chart.valueAxes.length; i1++) {
        offsets[chart.valueAxes[i1].position] += 75;
    }

    // Extend dataprovider
    for (i1 = 0; i1 < chart.dataProvider.length; i1++) {
        chart.dataProvider[i1]["v" + gID] = Math.random() * max;
    }

    // Add value axis
    var a = new AmCharts.ValueAxis();
    a.id = "v" + gID;
    a.axisColor = color;
    a.axisThickness = 2;
    a.gridAlpha = 0;
    a.axisAlpha = 1;
    a.minimum = 0;
    a.maximum = isNaN(max) ? undefined : max;
    a.position = position;
    a.offset = offsets[position];
    chart.addValueAxis(a);

    // Add graph attached to the axis
    var g = new AmCharts.AmGraph();
    g.precision = 2;
    g.valueAxis = a;
    g.lineColor = color;
    g.bullet = "round";
    g.bulletBorderThickness = 1;
    g.hideBulletsCount = 30;
    g.title = title;
    g.valueField = "v" + gID;
    g.fillAlphas = 0;
    chart.addGraph(g);

    // CLONE TEMPLATE OBSERVE FIELDS
    var copy = jQuery(".form-template").clone().removeClass("form-template").appendTo("#holder");
    jQuery(copy).find(".colorField").on("change", function () {
        a.axisColor = this.value;
        g.lineColor = this.value;
        chart.validateNow();
    });
    jQuery(copy).find(".titleField").on("keyup", function () {
        g.title = this.value;
        chart.validateNow();
    });
    jQuery(copy).find(".maxField").on("keyup", function () {
        a.maximum = this.value;
        chart.validateNow();
    });

    jQuery(copy).find(".btn-danger").on("click", function () {
        var i1, gotit = false;

        // Walkthrough axes
        for (i1 = 0; i1 < chart.valueAxes.length; i1++) {
            // Found it
            if (a.id == chart.valueAxes[i1].id) {
                gotit = true;
            }

            // Just decrease offset for those behind the current
            if (gotit && a.position == chart.valueAxes[i1].position) {
                chart.valueAxes[i1].offset -= 75;
            }
        }

        chart.removeGraph(a);
        chart.removeValueAxis(a);
        jQuery(this).parent().remove();

    }).removeClass("hidden");
    jQuery(copy).find(".btn-primary").addClass("hidden");

    // RESET FORM
    jQuery(".form-template .colorField").val("");
    jQuery(".form-template .titleField").val("");
    jQuery(".form-template .maxField").val("");

}



Demo:


Here is the demo for how you can draw am-chart :


Do share and keep coding :) :) All the best Charts & Maps

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment