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>
<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
0 comments:
Post a Comment