javascript - Initialize AMCharts on Button Click Event -
i using amcharts stock chart displaying details. have below code draw amchart.
amcharts.ready(function () { generatechartdata(); createstockchart(); }); var chartdata1 = []; var chartdata2 = []; var chartdata3 = []; var chartdata4 = []; function generatechartdata() { var firstdate = new date("2013-01-01"); alert('1 :' + firstdate); firstdate.setdate(firstdate.getdate() - 1500); alert(firstdate); firstdate.sethours(0, 0, 0, 0); (var = 0; < 5; i++) { var newdate = new date(firstdate); newdate.setdate(newdate.getdate() + i); var a1 = math.round(math.random() * (40 + i)) + 100 + i; var b1 = math.round(math.random() * (1000 + i)) + 500 + * 2; var a2 = math.round(math.random() * (100 + i)) + 200 + i; var b2 = math.round(math.random() * (1000 + i)) + 600 + * 2; var a3 = math.round(math.random() * (100 + i)) + 200; var b3 = math.round(math.random() * (1000 + i)) + 600 + * 2; var a4 = math.round(math.random() * (100 + i)) + 200 + i; var b4 = math.round(math.random() * (100 + i)) + 600 + i; chartdata1.push({ date: newdate, value: a1, volume: b1 }); chartdata2.push({ date: newdate, value: a2, volume: b2 }); chartdata3.push({ date: newdate, value: a3, volume: b3 }); chartdata4.push({ date: newdate, value: a4, volume: b4 }); } } function createstockchart() { var chart = new amcharts.amstockchart(); // datasets ////////////////////////////////////////// // create data sets first var dataset1 = new amcharts.dataset(); dataset1.title = "first data set"; dataset1.fieldmappings = [{ fromfield: "value", tofield: "value" } , { fromfield: "volume", tofield: "volume" } ]; dataset1.dataprovider = chartdata1; dataset1.categoryfield = "date"; var dataset2 = new amcharts.dataset(); dataset2.title = "second data set"; dataset2.fieldmappings = [{ fromfield: "value", tofield: "value" } , { fromfield: "volume", tofield: "volume" } ]; dataset2.dataprovider = chartdata2; dataset2.categoryfield = "date"; var dataset3 = new amcharts.dataset(); dataset3.title = "third data set"; dataset3.fieldmappings = [{ fromfield: "value", tofield: "value" } , { fromfield: "volume", tofield: "volume" } ]; dataset3.dataprovider = chartdata3; dataset3.categoryfield = "date"; var dataset4 = new amcharts.dataset(); dataset4.title = "fourth data set"; dataset4.fieldmappings = [{ fromfield: "value", tofield: "value" } , { fromfield: "volume", tofield: "volume" } ]; dataset4.dataprovider = chartdata4; dataset4.categoryfield = "date"; // set data sets chart chart.datasets = [dataset1, dataset2, dataset3, dataset4]; // panels /////////////////////////////////////////// // first stock panel var stockpanel1 = new amcharts.stockpanel(); stockpanel1.showcategoryaxis = false; stockpanel1.title = "value"; stockpanel1.percentheight = 70; // graph of first stock panel var graph1 = new amcharts.stockgraph(); graph1.valuefield = "value"; graph1.comparable = true; graph1.comparefield = "value"; graph1.bullet = "round"; graph1.bulletbordercolor = "#ffffff"; graph1.bulletborderalpha = 1; graph1.balloontext = "[[title]]:<b>[[value]]</b>"; graph1.comparegraphballoontext = "[[title]]:<b>[[value]]</b>"; graph1.comparegraphbullet = "round"; graph1.comparegraphbulletbordercolor = "#ffffff"; graph1.comparegraphbulletborderalpha = 1; stockpanel1.addstockgraph(graph1); // create stock legend var stocklegend1 = new amcharts.stocklegend(); stocklegend1.periodvaluetextcomparing = "[[percents.value.close]]%"; stocklegend1.periodvaluetextregular = "[[value.close]]"; stockpanel1.stocklegend = stocklegend1; // second stock panel var stockpanel2 = new amcharts.stockpanel(); stockpanel2.title = "volume"; stockpanel2.percentheight = 30; var graph2 = new amcharts.stockgraph(); graph2.valuefield = "volume"; graph2.type = "column"; graph2.showballoon = false; graph2.fillalphas = 1; stockpanel2.addstockgraph(graph2); stockpanel1.addstockgraph(graph1); var stocklegend2 = new amcharts.stocklegend(); stocklegend2.periodvaluetextregular = "[[value.close]]"; stockpanel2.stocklegend = stocklegend2; // set panels chart chart.panels = [stockpanel1, stockpanel2]; // other settings //////////////////////////////////// var sbsettings = new amcharts.chartscrollbarsettings(); sbsettings.graph = graph1; sbsettings.updateonreleaseonly = false; chart.chartscrollbarsettings = sbsettings; // cursor var cursorsettings = new amcharts.chartcursorsettings(); cursorsettings.valueballoonsenabled = true; chart.chartcursorsettings = cursorsettings; // period selector /////////////////////////////////// var periodselector = new amcharts.periodselector(); periodselector.position = "right"; periodselector.periods = [{ period: "dd", count: 10, label: "10 days" }, { period: "mm", selected: true, count: 1, label: "1 month" }, { period: "yyyy", count: 1, label: "1 year" }, { period: "ytd", label: "ytd" }, { period: "max", label: "max" }]; chart.periodselector = periodselector; // data set selector var datasetselector = new amcharts.datasetselector(); datasetselector.position = "left"; chart.datasetselector = datasetselector; chart.write('chartdiv'); } in page have 1 button , when user click on button amchart draw or loading details. how not possible.
from above code remove
amcharts.ready(function () {}); and remove "generatechartdata(); createstockchart();" function. simple button click function write below code.
<script> function callamchart() { var chartdata1 = []; var chartdata2 = []; var chartdata3 = []; var chartdata4 = []; var firstdate = new date(); firstdate.setdate(firstdate.getdate() - 1500); firstdate.sethours(0, 0, 0, 0); (var = 0; < 1500; i++) { var newdate = new date(firstdate); newdate.setdate(newdate.getdate() + i); var a1 = math.round(math.random() * (40 + i)) + 100 + i; var b1 = math.round(math.random() * (1000 + i)) + 500 + * 2; var a2 = math.round(math.random() * (100 + i)) + 200 + i; var b2 = math.round(math.random() * (1000 + i)) + 600 + * 2; var a3 = math.round(math.random() * (100 + i)) + 200; var b3 = math.round(math.random() * (1000 + i)) + 600 + * 2; var a4 = math.round(math.random() * (100 + i)) + 200 + i; var b4 = math.round(math.random() * (100 + i)) + 600 + i; chartdata1.push({ date: newdate, value: a1, volume: b1 }); chartdata2.push({ date: newdate, value: a2, volume: b2 }); chartdata3.push({ date: newdate, value: a3, volume: b3 }); chartdata4.push({ date: newdate, value: a4, volume: b4 }); } var chart = new amcharts.amstockchart(); // datasets ////////////////////////////////////////// // create data sets first var dataset1 = new amcharts.dataset(); dataset1.title = "first data set"; dataset1.fieldmappings = [{ fromfield: "value", tofield: "value" }, { fromfield: "volume", tofield: "volume" }]; dataset1.dataprovider = chartdata1; dataset1.categoryfield = "date"; var dataset2 = new amcharts.dataset(); dataset2.title = "second data set"; dataset2.fieldmappings = [{ fromfield: "value", tofield: "value" }, { fromfield: "volume", tofield: "volume" }]; dataset2.dataprovider = chartdata2; dataset2.categoryfield = "date"; var dataset3 = new amcharts.dataset(); dataset3.title = "third data set"; dataset3.fieldmappings = [{ fromfield: "value", tofield: "value" }, { fromfield: "volume", tofield: "volume" }]; dataset3.dataprovider = chartdata3; dataset3.categoryfield = "date"; var dataset4 = new amcharts.dataset(); dataset4.title = "fourth data set"; dataset4.fieldmappings = [{ fromfield: "value", tofield: "value" }, { fromfield: "volume", tofield: "volume" }]; dataset4.dataprovider = chartdata4; dataset4.categoryfield = "date"; // set data sets chart chart.datasets = [dataset1, dataset2, dataset3, dataset4]; // panels /////////////////////////////////////////// // first stock panel var stockpanel1 = new amcharts.stockpanel(); stockpanel1.showcategoryaxis = false; stockpanel1.title = "value"; stockpanel1.percentheight = 70; // graph of first stock panel var graph1 = new amcharts.stockgraph(); graph1.valuefield = "value"; graph1.comparable = true; graph1.comparefield = "value"; graph1.bullet = "round"; graph1.bulletbordercolor = "#ffffff"; graph1.bulletborderalpha = 1; graph1.balloontext = "[[title]]:<b>[[value]]</b>"; graph1.comparegraphballoontext = "[[title]]:<b>[[value]]</b>"; graph1.comparegraphbullet = "round"; graph1.comparegraphbulletbordercolor = "#ffffff"; graph1.comparegraphbulletborderalpha = 1; stockpanel1.addstockgraph(graph1); // create stock legend var stocklegend1 = new amcharts.stocklegend(); stocklegend1.periodvaluetextcomparing = "[[percents.value.close]]%"; stocklegend1.periodvaluetextregular = "[[value.close]]"; stockpanel1.stocklegend = stocklegend1; // second stock panel var stockpanel2 = new amcharts.stockpanel(); stockpanel2.title = "volume"; stockpanel2.percentheight = 30; var graph2 = new amcharts.stockgraph(); graph2.valuefield = "volume"; graph2.type = "column"; graph2.showballoon = false; graph2.fillalphas = 1; stockpanel2.addstockgraph(graph2); var stocklegend2 = new amcharts.stocklegend(); stocklegend2.periodvaluetextregular = "[[value.close]]"; stockpanel2.stocklegend = stocklegend2; // set panels chart chart.panels = [stockpanel1, stockpanel2]; // other settings //////////////////////////////////// var sbsettings = new amcharts.chartscrollbarsettings(); sbsettings.graph = graph1; sbsettings.updateonreleaseonly = false; chart.chartscrollbarsettings = sbsettings; // cursor var cursorsettings = new amcharts.chartcursorsettings(); cursorsettings.valueballoonsenabled = true; chart.chartcursorsettings = cursorsettings; // period selector /////////////////////////////////// var periodselector = new amcharts.periodselector(); periodselector.position = "left"; periodselector.periods = [{ period: "dd", count: 10, label: "10 days" }, { period: "mm", selected: true, count: 1, label: "1 month" }, { period: "yyyy", count: 1, label: "1 year" }, { period: "ytd", label: "ytd" }, { period: "max", label: "max" }]; chart.periodselector = periodselector; // data set selector //var datasetselector = new amcharts.datasetselector(); //datasetselector.position = "left"; //chart.datasetselector = datasetselector; chart.write('chartdiv'); } </script> :: html page ::
<input type="button" value="click" onclick="callamchart();" /> <div id="chartdiv" style="width: 100%; height: 600px; background: #fff;"></div>
Comments
Post a Comment