asp.net - Muti-bar column Chart with Legend from Datatable -
i trying plot mutibar column chart legend. code. code seems working not adding legend in appropriate format. i'm adding screenshots of data table , output coming code. legend should showing different types of priorities showing "legend text" everywhere.
//plotting matrix chart chartmatrix.visible = true; loadchartdata(dthourvsprioritymatrix); chartmatrix.series["priority"].charttype = seriescharttype.column; chartmatrix.series["priority"]["drawingstyle"] = "emboss"; //chartmatrix.chartareas["chartarea1"].area3dstyle.enable3d = true; chartmatrix.series["priority"].isvalueshownaslabel = true; // create new legend called "legend". chartmatrix.legends.add(new legend("legend")); // set docking of legend chart default chart area. chartmatrix.legends["legend"].dockedtochartarea = "chartareaf"; // assign legend series=priority. chartmatrix.series["priority"].legend = "legend"; chartmatrix.series["priority"].isvisibleinlegend = true; legendcellcolumn lcc = new legendcellcolumn("priority", legendcellcolumntype.text, "legendtext"); lcc.headerfont = new system.drawing.font("trebuchet ms", 12f, system.drawing.fontstyle.bold); chartmatrix.legends["legend"].cellcolumns.add(lcc); private void loadchartdata(datatable initialdatasource) { (int = 1; < initialdatasource.columns.count; i++) { series series = new series(); foreach (datarow dr in initialdatasource.rows) { int y = (int)dr[i]; series.points.addxy(dr["hour"].tostring(), y); } chartmatrix.series.add(series); } }
try use canvasjs chart.
use web service binding data
<script type="text/javascript"> $(document).ready(function () { var district = $('#contentplaceholder1_hiddistrict').val(); var assembly = $('#contentplaceholder1_hidassembly').val(); $.ajax({ type: "post", contenttype: "application/json; charset=utf-8", datatype: "json", url: "../webmyvoterservice.asmx/genderwise", data: '{"districtid":"' + district + '","assembly" :"' + assembly + '" }', processdata: false, success: onsuccess, failure: function (response) { alert(response); }, error: function (response) { alert(response); } }); function onsuccess(response) { var dpmale = []; var dpfemale = []; (var = 0; < response.d.length; i++) { var obj = response.d[i]; var datamale = { y: parseint(obj.male), label: obj.boothno, }; var datafemale = { y: parseint(obj.female), label: obj.boothno, }; dpmale.push(datamale); dpfemale.push(datafemale); } var chart = new canvasjs.chart("chartcontainerbar", { animationenabled: true, axisx: { interval: 1, labelfontsize: 10, linethickness: 0, }, axisy2: { valueformatstring: "0", linethickness: 0, labelfontsize: 10, }, tooltip: { shared: true }, legend: { verticalalign: "top", horizontalalign: "center", fontsize: 10, }, data: [{ type: "stackedbar", showinlegend: true, name: "male", axisytype: "secondary", color: "#f8d347", datapoints: dpmale }, { type: "stackedbar", showinlegend: true, name: "female", axisytype: "secondary", color: "#6ccac9", datapoints: dpfemale } ] }); chart.render(); } }); </script>
url : http://canvasjs.com/
Comments
Post a Comment