javascript - how to give dynamic values to chart from controller to view in code igniter -
the following code having.in code giving values statically. need need dynamic values , chart has displayed.here items variable have values in same way controller , chart has displayed.thanks.
<!doctype html> <html> <head> <script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script> </head> <body> <div id="chartdiv" style="width: 100%; height: 355px;"></div> <script type="text/javascript" language="javascript"> var chart; var chartdata = [{ year: "fy 2011-12", visits: 3025 }, { year: "fy 2011-12", visits: 1882 }, { year: "fy 2011-12", visits: 1809 }, { year: "fy 2011-12", visits: 1322 } }]; amcharts.ready(function() { // serial chart chart = new amcharts.amserialchart(); chart.automarginoffset = 0; chart.dataprovider = chartdata; chart.categoryfield = "year"; chart.startduration = 1; chart.depth3d = 20; chart.angle = 30; // axes // category var categoryaxis = chart.categoryaxis; categoryaxis.labelrotation = 45; // line makes category values rotated categoryaxis.gridalpha = 0; categoryaxis.fillalpha = 1; categoryaxis.fillcolor = "#fafafa"; categoryaxis.gridposition = "start"; // value var valueaxis = new amcharts.valueaxis(); valueaxis.dashlength = 5; valueaxis.title = "visitors country"; valueaxis.axisalpha = 0; chart.addvalueaxis(valueaxis); // graph var graph = new amcharts.amgraph(); graph.valuefield = "visits"; graph.colorfield = "color"; graph.balloontext = "[[category]]: [[value]]"; graph.type = "column"; graph.linealpha = 0; graph.fillalphas = 1; chart.addgraph(graph); // write chart.write("chartdiv"); }); </script> </body> </html>
you can collect value in array on controller after on view page can call :-
<!doctype html> <html> <head> <script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script> </head> <body> <div id="chartdiv" style="width: 100%; height: 355px;"></div> <script type="text/javascript" language="javascript"> var chart; var chartdata = [{ year: "<?php echo $date1;?>", visits: "<?php echo $date1visitval;?>" }, { year: "<?php echo $date2;?>", visits: "<?php echo $date2visitval;?>" }, { year: "<?php echo $date4;?>", visits: "<?php echo $date3visitval;?>" }, { year: "<?php echo $date4;?>", visits: "<?php echo $date4visitval;?>" } }]; amcharts.ready(function() { // serial chart chart = new amcharts.amserialchart(); chart.automarginoffset = 0; chart.dataprovider = chartdata; chart.categoryfield = "year"; chart.startduration = 1; chart.depth3d = 20; chart.angle = 30; // axes // category var categoryaxis = chart.categoryaxis; categoryaxis.labelrotation = 45; // line makes category values rotated categoryaxis.gridalpha = 0; categoryaxis.fillalpha = 1; categoryaxis.fillcolor = "#fafafa"; categoryaxis.gridposition = "start"; // value var valueaxis = new amcharts.valueaxis(); valueaxis.dashlength = 5; valueaxis.title = "visitors country"; valueaxis.axisalpha = 0; chart.addvalueaxis(valueaxis); // graph var graph = new amcharts.amgraph(); graph.valuefield = "visits"; graph.colorfield = "color"; graph.balloontext = "[[category]]: [[value]]"; graph.type = "column"; graph.linealpha = 0; graph.fillalphas = 1; chart.addgraph(graph); // write chart.write("chartdiv"); }); </script> </body> </html>
Comments
Post a Comment