score:0
Accepted answer
you can use chart.js to generate a chart in your design.
var data = [
{
value: 20,
color:"#f7464a"
},
{
value: 13.3,
color: "#46bfbd"
},
{
value: 6.7,
color: "#fdb45c"
},
{
value: 6.7,
color: "#fdb45c"
},
{
value: 6.7,
color: "#fdb45c"
},
{
value: 46.6,
color: "#fdb45c"
}
]
var options =
{
animation: false,
tooltiptemplate: "<%= value %>%",
tooltipfillcolor: "rgba(0,0,0,0)",
tooltipfontcolor: "rgba(1,1,1,1)",
tooltipcaretsize: 0,
tooltipfontstyle: "bold",
tooltipevents: [],
onanimationcomplete: function() { this.showtooltip(this.segments, true); }
}
var ctx = document.getelementbyid("mychart").getcontext("2d");
var mypiechart = new chart(ctx).pie(data,options);
<script src="http://www.chartjs.org/assets/chart.min.js"></script>
<canvas id="mychart" width="400" height="400"></canvas>
however the placement of the labels is not optimal.
score:0
retrieving data from database using pi chats in chats.js and asp.net and c# here is the code it worked for me
<script src="scripts/chart.js"></script>
<script src="scripts/chart.min.js"></script>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script src="http://www.chartjs.org/assets/chart.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var dataarr = new array();
debugger;
$.ajax({
type: "post",
contenttype: "application/json; charset=utf-8",
url: "jscps.aspx/getdataonload",
data: {},
async: true,
cache: false,
datatype: "json",
success: onsuccess_,
error: onerrorcall_
})
function onerrorcall_(repo) {
//alert(repo);
}
function onsuccess_(response) {
debugger;
var adata = response.d;
var colorarray = ["#f9e559", "#218c8d", "#6ccecb", "#ef7126", "#8edc9d", " #473e3f"];
for (var i = 0; i < adata.length; i++) {
//alert(adata);
var obj = {};
obj.text = adata[i].accounts;
obj.value = adata[i].accountvalues;
obj.label = adata[i].accounts;
var color = colorarray[i];
obj.color = color;
dataarr.push(obj);
}
debugger;
//fix for ie 8
if ($.browser.msie && $.browser.version == "8.0") {
g_vmlcanvasmanager.initelement(el);
}
var helpers = chart.helpers;
var canvas = document.getelementbyid('bar');
var bar = new chart(canvas.getcontext('2d')).pie(dataarr, {
responsive: false,
maintainaspectratio: true,
animation: false
});
for (var i = 0; i < dataarr.length; i++) {
var legendholder = $("<div />");
legendholder.html("<span style = 'display:inline-block;height:10px;width:10px;background-color:" + dataarr[i].color + "'></span> " + dataarr[i].text)
legendholder.css("margin-top", "0px");
$("#legend").append(legendholder);
}
}
});
</script>
c# code
--------
[webmethod(enablesession = true)]
public static list<chatdata> getdataonload()
{
list<chatdata> datalist = new list<chatdata>();
string constring = system.configuration.configurationmanager.connectionstrings["connectionstring"].connectionstring.tostring();
using (sqlconnection con = new sqlconnection(constring))
{
string countryname = string.empty;
//string startdate = datetime.now.adddays(-180).tostring("yyyy-mm-dd");
string startdate = datetime.now.adddays(-60).tostring("yyyy-mm-dd");
string enddate = datetime.now.tostring("yyyy-mm-dd");
sqlcommand cmd = new sqlcommand("usp_sales_adcaps", con);
cmd.commandtimeout = 50;
cmd.commandtype = commandtype.storedprocedure;
cmd.parameters.addwithvalue("@country", countryname);
cmd.parameters.addwithvalue("@istartdate", startdate);
cmd.parameters.addwithvalue("@ienddate", enddate);
con.open();
sqldataadapter da = new sqldataadapter(cmd);
da.selectcommand = cmd;
datatable dt = new datatable();
da.fill(dt);
con.close();
foreach (datarow dtrow in dt.rows)
{
chatdata details = new chatdata();
details.accounts = dtrow[0].tostring();
details.accountvalues = convert.toint64(dtrow[1].tostring());
datalist.add(details);
}
return datalist;
}
}
public class chatdata
{
public string accounts { get; set; }
public int64 accountvalues { get; set; }
}
Source: stackoverflow.com
Related Query
- Chart.js - In Graph Data for Pie & Doughnut Charts
- Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset
- getting additional value fields from data source for dx.chartjs doughnut chart
- Chartjs random colors for each part of pie chart with data dynamically from database
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- Show "No Data" message for Pie chart with no data
- Chart js pie or doughnut charts 3 inside instead of 1
- Chartjs doughnut chart for conditional data
- How to mapping variable data for pie chart (react.js)
- Chart.js multiple doughnut charts above pie chart
- Chart Js Change Label orientation on x-Axis for Line Charts
- Chart JS show multiple data points for the same label
- Display Doughnut Pie Chart As Circle Progress Chart.js
- How to display data labels outside in pie chart with lines in ionic
- Chartjs - data format for bar chart with multi-level x-axes
- How to create single value Doughnut or Pie chart using Chart.js?
- Using Chart.js - Creating Legend for Doughnut Chart
- ChartJS bar chart fixed width for dynamic data sets
- Custom data in label on ChartJS pie chart
- Custom data position on the doughnut chart in chart.js
- Vue Chart 3 - Doughnut Charts with Text in the Middle (Trouble registering a plugin)
- Chart JS pass in custom data for points
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- Display data labels on a pie chart in angular-chart.js
- Doughnut Chart not displaying data with Chart Js and Backbone js
- create different labels for different data chart js
- Charts js and laravel: Render chart after passing in json data
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- Get Value for point clicked on Pie Chart in Chart.js 3
- charts js, doughnut chart not rendering tooptips correctly
More Query from same tag
- Chart.js ng2-charts colors in pie chart not showing
- How to make a 30days chart responsive on mobile using chart.js?
- Loading or Activating ChartJS on Load
- Chart js different background for y axis
- Plotting jqplot points to a chart.js chart
- React chartjs 2 - Type 'string' is not assignable to type '"timeseries"'
- The expected type comes from property 'XAxes' and 'yAxes' which is declared here on type '_DeepPartialObject<{ [key: string]:
- chart.js Hide empty Chart and keep previous data if no data? .net MVC
- Chart.js chart does not display when inside an ngIf.
- web page doesn't display chart or any error
- SQL format DATETIME to count months
- How to adding data in loop and display chart dynamically like in live (chart.js & typescript & angular)?
- Chart.js vertical line when hovering and shadow on line
- ChartJS and Radar Chart animation
- How to set ticks on axes dynamically with chart.js?
- chartjs mixed type display want to set display none for some bar
- Data not displaying in django admin - using chart.js (no errors)
- Mapping data (from getJSON response) in Chart.js
- Is it possible to set up 0 as a minimum number for bar chart? react-chart.js-2
- Razor chart.js labels/data not in sync
- Angular Chart.js, how to remove series?
- ChartJS dataset onclick deselect the rest
- How to convert (convas chart) to either (Chart , or system.drawing.image , or stream , or []byte ) where I can use it in c# to generate pdf
- ChartJS: Custom legend not showing Labels for Multi-Pie chart
- Issue with HTML2Canvas - Green overlay while exporting
- Dynamically create dataset objects for multi-line graphing, using pre-defined dataset object arrays (JavaScript / Chart.js)
- chart.js Legends issue (not showing)
- vue-chartjs remove top rectangle (datasets label)
- What can I do to ensure that my charts diagram reload every time I choose it from my dropdown?
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?