javascript - Stock chart amchart is not updating data dynamically -
i'm trying update value of dataset in stock chart of amcharts. problem, i'm facing when enter year shows year in legend not appearing in graph, after validating data. graph representing data different-different years same item. can see code here>
var chart; /** * function generates yearly data * takes year parameter */ function generatechartdata(year) { var data = []; var firstdate = new date(year, 0, 1); firstdate.sethours(0, 0, 0, 0); (var = 0; < 365; i++) { var newdate = new date(firstdate); newdate.setdate(newdate.getdate() + i); data.push({ date: newdate, value: math.round(math.random() * (40 + i)) + 100 + }); } return data; } /** prepare random data our trhee data sets: 2015, 2014 , 2013 */ var chartdata2015 = generatechartdata(2015); var chartdata2014 = generatechartdata(2014); var chartdata2013 = generatechartdata(2013); /** * now, let's implement "plugin" which, when chart loads * check it's data sets , "baseyear" properietary * setting, indicate year should dates * reset * --- * note: plugin assumes there date objects categories. * if dates specified timestamps or strings, plugin code * need updated. */ amcharts.addinithandler(function(chart) { for(var x = 0; x < chart.datasets.length; x++) { var ds = chart.datasets[x]; if (ds.baseyear !== undefined) { for(var = 0; < ds.dataprovider.length; i++) { var dp = ds.dataprovider[i]; dp[ds.categoryfield].setfullyear(ds.baseyear); } } } }, ["stock"]); /** * build chart */ chart = amcharts.makechart("chartdiv", { "type": "stock", "theme": "light", "datasets": [{ "title": "2015", "fieldmappings": [{ "fromfield": "value", "tofield": "value" }], "dataprovider": chartdata2015, "categoryfield": "date" }, { "title": "2014", "fieldmappings": [{ "fromfield": "value", "tofield": "value" }], "dataprovider": chartdata2014, "categoryfield": "date", "compared": true, "baseyear": 2015 }, { "title": "2013", "fieldmappings": [{ "fromfield": "value", "tofield": "value" }], "dataprovider": chartdata2013, "categoryfield": "date", "compared": true, "baseyear": 2015 }], "panels": [{ "title": "value", "categoryaxis": {}, "stockgraphs": [{ "id": "g1", "valuefield": "value", "linethickness": 2, "comparable": true, "comparefield": "value", "balloontext": "[[title]]:<b>[[value]]</b>", "comparegraphballoontext": "[[title]]:<b>[[value]]</b>", "comparegraph": { "dashlength": 5, "linethickness": 2 } }], "stocklegend": { "periodvaluetextcomparing": "[[percents.value.close]]%", "periodvaluetextregular": "[[value.close]]" } }], "panelssettings": { "recalculatetopercents": "never" }, "chartscrollbarsettings": { "graph": "g1" }, "chartcursorsettings": { "valueballoonsenabled": true, "fullwidth": true, "cursoralpha": 0.1, "valuelineballoonenabled": true, "valuelineenabled": true, "valuelinealpha": 0.5 }, "periodselector": { "position": "bottom", "periods": [{ "period": "mm", "selected": true, "count": 1, "label": "1 month" }, { "period": "yyyy", "count": 1, "label": "1 year" }, { "period": "ytd", "label": "ytd" }, { "period": "max", "label": "max" }] } }); $('document').ready(function(){ $('#submit').on('click',function(){ //alert(document.getelementbyid('year').value); add(document.getelementbyid('year').value); // make(); }); }); function add(yr){ chart.datasets.push( { "title": yr, "fieldmappings": [{ "fromfield": "value", "tofield": "value" }], "dataprovider": generatechartdata(yr), "categoryfield": "date", "compared": true, "baseyear": 2015 } ); chart.validatenow(); chart.validatedata(); }#chartdiv { width : 100%; height : 500px; font-family: verdana; font-size: 12px; } <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <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 type="text/javascript" src="https://www.amcharts.com/lib/3/amstock.js"></script> <input type="text" id="year"><input type="submit" id="submit"> <div id="chartdiv"></div> https://codepen.io/rbrohitbisht/pen/ymwmpz?editors=0010
-if enter year, 2000 , submit shows in legend without values. -if enter baseyear shows values.
i'm not able new dataset in stock amchart, i'm trying show same item values different years.
the base year plugin set in addinithandler runs once upon chart initialization (the init event). validatedata , validatenow don't re-trigger event, you'll have re-run base year plugin code manually.
one way creating function part of amcharts namespace can invoked outside of init context:
amcharts.addinithandler(function(chart) { amcharts.baseyearinitialize = function(chart) { (var x = 0; x < chart.datasets.length; x++) { var ds = chart.datasets[x]; if (ds.baseyear !== undefined) { (var = 0; < ds.dataprovider.length; i++) { var dp = ds.dataprovider[i]; dp[ds.categoryfield].setfullyear(ds.baseyear); } } } } amcharts.baseyearinitialize(chart); }, ["stock"]); this allows call in add method:
function add(yr) { chart.datasets.push({ "title": yr, "fieldmappings": [{ "fromfield": "value", "tofield": "value" }], "dataprovider": generatechartdata(yr), "categoryfield": "date", "compared": true, "baseyear": 2015 }); amcharts.baseyearinitialize(chart); // chart.validatenow(); chart.validatedata(); } note don't need call both validatenow , validatedata - validatedata sufficient in case.
demo below:
var chart; /** * function generates yearly data * takes year parameter */ function generatechartdata(year) { var data = []; var firstdate = new date(year, 0, 1); firstdate.sethours(0, 0, 0, 0); (var = 0; < 365; i++) { var newdate = new date(firstdate); newdate.setdate(newdate.getdate() + i); data.push({ date: newdate, value: math.round(math.random() * (40 + i)) + 100 + }); } return data; } /** prepare random data our trhee data sets: 2015, 2014 , 2013 */ var chartdata2015 = generatechartdata(2015); var chartdata2014 = generatechartdata(2014); var chartdata2013 = generatechartdata(2013); /** * now, let's implement "plugin" which, when chart loads * check it's data sets , "baseyear" properietary * setting, indicate year should dates * reset * --- * note: plugin assumes there date objects categories. * if dates specified timestamps or strings, plugin code * need updated. */ amcharts.addinithandler(function(chart) { amcharts.baseyearinitialize = function(chart) { (var x = 0; x < chart.datasets.length; x++) { var ds = chart.datasets[x]; if (ds.baseyear !== undefined) { (var = 0; < ds.dataprovider.length; i++) { var dp = ds.dataprovider[i]; dp[ds.categoryfield].setfullyear(ds.baseyear); } } } } amcharts.baseyearinitialize(chart); }, ["stock"]); /** * build chart */ chart = amcharts.makechart("chartdiv", { "type": "stock", "theme": "light", "datasets": [{ "title": "2015", "fieldmappings": [{ "fromfield": "value", "tofield": "value" }], "dataprovider": chartdata2015, "categoryfield": "date" }, { "title": "2014", "fieldmappings": [{ "fromfield": "value", "tofield": "value" }], "dataprovider": chartdata2014, "categoryfield": "date", "compared": true, "baseyear": 2015 }, { "title": "2013", "fieldmappings": [{ "fromfield": "value", "tofield": "value" }], "dataprovider": chartdata2013, "categoryfield": "date", "compared": true, "baseyear": 2015 }], "panels": [{ "title": "value", "categoryaxis": {}, "stockgraphs": [{ "id": "g1", "valuefield": "value", "linethickness": 2, "comparable": true, "comparefield": "value", "balloontext": "[[title]]:<b>[[value]]</b>", "comparegraphballoontext": "[[title]]:<b>[[value]]</b>", "comparegraph": { "dashlength": 5, "linethickness": 2 } }], "stocklegend": { "periodvaluetextcomparing": "[[percents.value.close]]%", "periodvaluetextregular": "[[value.close]]" } }], "panelssettings": { "recalculatetopercents": "never" }, "chartscrollbarsettings": { "graph": "g1" }, "chartcursorsettings": { "valueballoonsenabled": true, "fullwidth": true, "cursoralpha": 0.1, "valuelineballoonenabled": true, "valuelineenabled": true, "valuelinealpha": 0.5 }, "periodselector": { "position": "bottom", "periods": [{ "period": "mm", "selected": true, "count": 1, "label": "1 month" }, { "period": "yyyy", "count": 1, "label": "1 year" }, { "period": "ytd", "label": "ytd" }, { "period": "max", "label": "max" }] } }); $('document').ready(function() { $('#submit').on('click', function() { //alert(document.getelementbyid('year').value); add(document.getelementbyid('year').value); // make(); }); }); function add(yr) { chart.datasets.push({ "title": yr, "fieldmappings": [{ "fromfield": "value", "tofield": "value" }], "dataprovider": generatechartdata(yr), "categoryfield": "date", "compared": true, "baseyear": 2015 }); amcharts.baseyearinitialize(chart); // chart.validatenow(); chart.validatedata(); }#chartdiv { width: 100%; height: 500px; font-family: verdana; font-size: 12px; }<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <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 type="text/javascript" src="https://www.amcharts.com/lib/3/amstock.js"></script> <input type="text" id="year"><input type="submit" id="submit"> <div id="chartdiv"></div>
Comments
Post a Comment