Related
Updated
Can you possible graphs value dynamic.
Below code pass a static value but i get dynamic code graphs.
Example: resultx get 3-4 subcategory i every time define graphs value.
var processedChartData = resultx.map(function(rawDataElement) {
var newDataElement = { "category": rawDataElement.category };
rawDataElement.data.forEach(function(nestedElement, index) {
newDataElement["value" + index] = nestedElement.value;
newDataElement["subcategory" + index] = nestedElement.subcategory
});
return newDataElement;
});
AmCharts.makeChart(id, {
"type": "serial",
"theme": "light",
"categoryField": "category",
"rotate": false,
"startDuration": 0,
"categoryAxis": {
"gridPosition": "start",
"position": "left"
},
"graphs": [{
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"title": "2004",
"type": "column",
"balloonText": "[[subcategory0]]: [[value]]",
"valueField": "value0"
}, {
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"title": "2005",
"type": "column",
"balloonText": "[[subcategory1]]: [[value]]",
"valueField": "value1"
},
{
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"title": "2005",
"type": "column",
"balloonText": "[[subcategory2]]: [[value]]",
"valueField": "value2",
}],
"guides": [],
"allLabels": [],
"balloon": {},
"titles": [],
"dataProvider": processedChartData,
"export": {
"enabled":false
}
});
Original question:
Clustered bar charts Array inside key how to display multiple bar charts.
My json below:
[
{
"0":
{
"package_sold":"88",
"vSectorName":"Meat"
},
"country":"France"
},
{
"0":
{
"package_sold":"68",
"vSectorName":"Meat"
},
"1":
{
"package_sold":"151",
"vSectorName":"Poultry"
},
"country":"United Kingdom"
}
]
How to show in graph dataProvider
AmCharts doesn't support nested JSON. You'll need to flatten your JSON into a single object so that your valueFields are distinct in each element of your array.
For example, this:
{
"0":
{
"package_sold":"68",
"vSectorName":"Meat"
},
"1":
{
"package_sold":"151",
"vSectorName":"Poultry"
},
"country":"United Kingdom"
}
can be turned into this:
{
"Meat_package_sold": 68,
"Poultry_package_sold": 151,
"country": "United Kingdom"
}
From there you can set your graph valueField to "Meat_package_sold" and "Poultry_package_sold". I'm assuming your categoryField is "country".
You'll either need to change your backend or write some some JS to remap your data to a format that AmCharts can recognize.
Edit: Here's a basic example that remaps your JSON data using JS:
var rawData = [{
"0": {
"package_sold": "88",
"vSectorName": "Meat"
},
"country": "France"
},
{
"0": {
"package_sold": "68",
"vSectorName": "Meat"
},
"1": {
"package_sold": "151",
"vSectorName": "Poultry"
},
"country": "United Kingdom"
}
]
var newData = [];
rawData.forEach(function(dataItem) {
var newDataItem = {};
Object.keys(dataItem).forEach(function(key) {
if (typeof dataItem[key] === "object") {
newDataItem[dataItem[key]["vSectorName"] + "_package_sold"] = dataItem[key]["package_sold"];
} else {
newDataItem[key] = dataItem[key];
}
});
newData.push(newDataItem);
});
console.log(JSON.stringify(newData));
Demo of your chart using the correct JSON format:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"categoryField": "country",
"graphs": [{
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "Meat_package_sold"
},
{
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "Poultry_package_sold"
}
],
"dataProvider": [{
"Meat_package_sold": 88,
"country": "France",
}, {
"Meat_package_sold": 68,
"Poultry_package_sold": 151,
"country": "United Kingdom"
}, {
"Meat_package_sold": 120,
"Poultry_package_sold": 110,
"country": "Germany"
}]
});
html,
body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
This is dynamic json data, but to show how to use and build I defined it so.
In actual, i use ajax to get json data and then building it dynamically.
Here I had Generate Graph,GLName against its opening for each month comparatively. hope it will helpful for all
var resp=[
{
"MONTH_": "01",
"MONTH_NAME": "JAN",
"YEAR_": "2018",
"GL_NAME": "CASH,FACTORY, SITE,OFFICE ",
"GL_ID": "79,81,522,89",
"OPENING": "606294,0,24851,170392",
"RECEIPT": "1641300,40000,210850,82300",
"PAYMENT": "2074921,103209,168893,40000",
"CLOSING": "172673,149483,66808,0"
},
{
"MONTH_": "02",
"MONTH_NAME": "FEB",
"YEAR_": "2018",
"GL_NAME": " SITE,CASH,OFFICE ,FACTORY",
"GL_ID": "81,79,522,89",
"OPENING": "66808,172673,0,149483",
"RECEIPT": "102650,40000,3479000,200000",
"PAYMENT": "239379,168339,40000,3388527",
"CLOSING": "-69921,0,181144,263146"
},
{
"MONTH_": "03",
"MONTH_NAME": "MAR",
"YEAR_": "2018",
"GL_NAME": "FACTORY,CASH,OFFICE , SITE",
"GL_ID": "89,81,79,522",
"OPENING": "181144,-69921,0,263146",
"RECEIPT": "30000,40000,1943500,200000",
"PAYMENT": "69242,1806551,18177",
"CLOSING": "141902,400095,40000,111902"
}
]
var newChartDataArr = [];
var colNameArr = [];
var GLID = [];
var amtArr = [];
var newBarGraph = [];
myJsonString1 = JSON.stringify(resp);
var obj = JSON.parse(myJsonString1);
var obj1 = resp[0];
//spliting of GLName
if (obj1.GL_NAME.toString().indexOf(',') != -1) {
colNameArr = obj1.GL_NAME.split(',');
GLID =obj1.GL_ID.split(',');
} else {
colNameArr.push(obj1.GL_NAME);
GLID =obj1.GL_ID.split(',');
}
//Getting Month and Opening of GL
$.each(resp, function (i, value) {
var newObj = {};
newObj['MONTH_NAME'] = value.MONTH_NAME+"-"+value.YEAR_;
$.each(value, function (k, v) {
if (k == 'OPENING') {
for (var i = 0; i < colNameArr.length; i++) {
if (v.toString().indexOf(',') != -1) {
newObj[colNameArr[i]] = parseFloat(v.split(',')[i]);
} else {
newObj[colNameArr[i]] = parseFloat(v);
}
}
}
});
newChartDataArr.push(newObj); //GL with Opening
});
for (var i = 0; i < colNameArr.length; i++) {
let graph = {};
graph["id"] = "v-"+GLID[i];
graph["balloonText"] = colNameArr[i] + " [[category]] Amount:[[value]]",
graph["title"] = colNameArr[i];
graph["valueField"] = colNameArr[i];
graph["fillAlphas"] = 0.8;
graph["lineAlpha"] = 0.2;
graph["type"] = "column";
newBarGraph.push(graph);
}
chart = AmCharts.makeChart("Monthdiv", {
"type": "serial",
"theme": "light",
"categoryField": "MONTH_NAME",
"startDuration": 1,
"trendLines": [],
"legend": {
"position": "bottom",
"maxColumns": 2,
"useGraphSettings": true
},
"depth3D": 10,
"angle": 60,
"graphs": newBarGraph,
"guides": [],
"valueAxes": [
{
"position": "left",
"title": "Opening"
}
],
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 90,
"title": "Months"
},
"allLabels": [],
"balloon": {},
"titles": [{
"text":"Monthly Sale"
}],
"dataProvider": newChartDataArr,
"export": {
"enabled": true
},
"listeners": [{
"event": "clickGraphItem",
"method": function (event) {
var gl_ID=(event.item.graph.id).slice(2);
var month = (event.item.category).slice(0, 3);
var calender = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
var monthVal = calender.indexOf(month) + 1;
var year = (event.item.category).slice(4, 8);
$("#fromDate").val("01/" + monthVal + "/" + year);
$("#toDate").val("30/" + monthVal + "/" + year);
Daliy(gl_ID,event.item.category);
showSummary();
}
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div class="col-sm-12" id="Monthdiv" style="height: 370px;">
First question ever on the stack. Trying to get zoomToDates to work in amCharts I'm developing. I've tried the other solutions I could find to others' questions and nothing worked. So without further ado ...
Resources:
//www.amcharts.com/lib/3/amcharts.js
//www.amcharts.com/lib/3/serial.js
//www.amcharts.com/lib/3/amstock.js
//www.amcharts.com/lib/3/themes/black.js
//www.amcharts.com/lib/3/plugins/export/export.min.js
//www.amcharts.com/lib/3/plugins/export/export.css
//www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js
HTML:
<div id="$CHART$" style="width: 100%; height: 450px;"></div>
JS:
AmCharts.makeChart( "$CHART$", {
"type": "stock",
"theme": "black",
"categoryAxesSettings.equalSpacing": true,
"dataDateFormat":"YYYY-MM-DD",
"valueAxes": [ {
"position": "left",
} ],
"dataSets": [ {
"title": "Bond",
"fieldMappings": [ {
"fromField": "open",
"toField": "open"
}, {
"fromField": "high",
"toField": "high"
}, {
"fromField": "low",
"toField": "low"
}, {
"fromField": "close",
"toField": "close"
} ],
"dataLoader": {
"url": "removed for stackoverflow post"
},
"categoryField": "date"
},
],
panels: [ {
title: "Security",
percentHeight: 100,
stockGraphs: [ {
"valueField": "security",
"type": "candlestick",
"showBalloon": true,
"proCandlesticks": true,
"balloonText": "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>",
"closeField": "close",
"fillColors": "#7f8da9",
"highField": "high",
"lineColor": "#7f8da9",
"lineAlpha": 1,
"lowField": "low",
"fillAlphas": 0.9,
"negativeFillColors": "#db4c3c",
"negativeLineColor": "#db4c3c",
"openField": "open",
} ],
stockLegend: {
periodValueTextRegular: "[[security.close]]"
}
}
],
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true
},
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
event.chart.zoomToDates(new Date(2017, 10, 22), new Date(2017, 10, 25));
}
});
Any help would be really appreciated. I've been working on this for too long to admit. Thanks.
It looks like you're using the AmCharts Wordpress plugin going by the $CHART idenfitier. The main issue is the syntax of your AmCharts.makeChart call - your addListener code is inside the config when it should be outside of the call entirely. You're also not referring to the actual chart instance, nor are you using the event argument correctly, for example:
var $CHART$ = AmCharts.makeChart("$CHART$", {
// ...
});
$CHART$.addListener("rendered", zoomChart);
function zoomChart(event) {
event.chart.zoom(new Date(2017, 10, 22), new Date(2017, 10, 25));
};
You also have to use zoom for stock charts as zoomToDates won't work.
Ideally, you should use the listeners array instead of addListener as you can sometimes run into timing issues where events like rendered can fire before you can call addListener:
AmCharts.makeChart("$CHART$", {
// all of your other config and data omitted
"listeners": [{
"event": "rendered",
"method": function(event) {
event.chart.zoom(new Date(2017, 10, 22), new Date(2017, 10, 25));
}
}]
});
How to export amChart with transparent background?
Here, is my code:
var chartData = [{
"country": "USA",
"visits": 4025,
"color": "#FF0F00"
}, {
"country": "China",
"visits": 1882,
"color": "#FF6600"
}, {
"country": "Japan",
"visits": 1809,
"color": "#FF9E01"
}, {
"country": "Germany",
"visits": 1322,
"color": "#FCD202"
}, {
"country": "UK",
"visits": 1122,
"color": "#F8FF01"
}, {
"country": "France",
"visits": 1114,
"color": "#B0DE09"
}, {
"country": "India",
"visits": 984,
"color": "#04D215"
}, {
"country": "Spain",
"visits": 711,
"color": "#0D8ECF"
}, {
"country": "Netherlands",
"visits": 665,
"color": "#0D52D1"
}, {
"country": "Russia",
"visits": 580,
"color": "#2A0CD0"
}, {
"country": "South Korea",
"visits": 443,
"color": "#8A0CCF"
}, {
"country": "Canada",
"visits": 441,
"color": "#CD0D74"
}, {
"country": "Brazil",
"visits": 395,
"color": "#754DEB"
}, {
"country": "Italy",
"visits": 386,
"color": "#DDDDDD"
}, {
"country": "Australia",
"visits": 384,
"color": "#999999"
}, {
"country": "Taiwan",
"visits": 338,
"color": "#333333"
}, {
"country": "Poland",
"visits": 328,
"color": "#000000"
}];
var chart = AmCharts.makeChart("chartdiv", {
type: "serial",
theme: "light",
dataProvider: [{
"year": 2005,
"income": 23.5,
"expenses": 18.1
}, {
"year": 2006,
"income": 26.2,
"expenses": 22.8
}, {
"year": 2007,
"income": 30.1,
"expenses": 23.9
}, {
"year": 2008,
"income": 29.5,
"expenses": 25.1
}, {
"year": 2009,
"income": 24.6,
"expenses": 25
}],
categoryField: "year",
startDuration: 1,
rotate: true,
categoryAxis: {
gridPosition: "start"
},
valueAxes: [{
position: "top",
title: "Million USD",
minorGridEnabled: true
}],
graphs: [{
type: "column",
title: "Income",
valueField: "income",
fillAlphas: 1,
balloonText: "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>"
}, {
type: "line",
title: "Expenses",
valueField: "expenses",
lineThickness: 2,
bullet: "round",
balloonText: "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b></span>"
}],
legend: {
useGraphSettings: true
}
});
var image = new Image();
var btn = document.getElementById('export');
btn.onclick = function () {
var tmp = new AmCharts.AmExport(chart);
tmp.init();
tmp.output({
output: 'datastring',
format: 'jpg', "backgroundColor": "gray",
"backgroundAlpha": 0.3,
}, function (blob) {
image.src = blob;
console.log(image.src);
document.body.appendChild(image);
// var doc = new jsPDF('landscape');
// doc.addImage(image, 'JPEG', 10, 10 );
// doc.save('testingPDF.pdf');
printGraph1();
});
function printGraph1() {
var source = "../../Content/images/print-background.png";
var html = "<html style=' margin:0;height:100%;overflow:hidden;'><head><script>function step1(){\n" +
"setTimeout('step2()', 10);}\n" +
"function step2(){window.print();window.close()}\n" +
"</scri" + "pt><link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'><style type='text/css' media='print'></style></head><body style=' margin:0;height:100%;overflow:hidden;' onload='step1()' style='background-image: url(' " + source + "')'>\n" +
"<img src='" + source + "' style=' min-height:100%; min-width:100%;height:auto;width:auto;position:absolute; margin:auto;z-index:-1; '/>";
//$(".chartdata").height(700);
//$(".chartdata").width(300);
// $("#chart").css({'position': 'absolute', 'margin': 'auto', 'top': '0', 'right': '0','bottom': '0' ,'left': '0'});
// var divContent = $(".chartdata").html();
//var image1 = new Image();
//image1.src = image.src;
console.log(image.src);
var divCon = "<div style='width:100% position: absolute; margin: auto; top: 30%; right: 0;bottom: 0; left: 0; '>";
var divConEnd = "</div>";
//var imgDiv = "<div id='imge'></div>";
//$("#imge").appendChild(image);
//var img = "<img src='" + image.src + "/>";
Pagelink = "about:blank";
var pwa = window.open(Pagelink, "_new");
pwa.document.open();
pwa.document.write(html);
//pwa.document.write(divCon);
pwa.document.write("<div style=' position: absolute; margin: auto; top: 30%; '>");
pwa.document.write("<img style=' background-color:blue; 'src='" + image.src + "'/>");
//pwa.document.body.appendChild(image);
pwa.document.write("</div>");
// pwa.document.write(divConEnd);
pwa.document.write("<button type='submit' class='btn btn-primary'>Submit</button>");
pwa.document.write('</body ></html>');
pwa.document.close();
}
enter image description here
Use "transaprent" as backgroundColor:
tmp.output( {
"output": "datastring",
"format": "png",
"backgroundColor": "transparent",
"backgroundAlpha": 0.3
}, ...
Please note that you will need to use an image format that supports transparency, like PNG. JPEG does not support it.
In amCharts 4, you can define the backgroundColor which will use for exporting the chart as follows:
chart.exporting.backgroundColor = am4core.color("#f00", 0);
chart.exporting.getImage("png") // return a promise
In this way, amCharts will not use the background color from the parent.
Is there a way to toggle trendline (hide/show with a click) in Amcharts by using legend or any other button.
Please help if anybody encountered this situation.
Thanks in advance.
This is an old post but the previous answer is misleading so could confuse anyone new looking at this.
In Amcharts you can add a trend line as another graph - it just needs to be supplied with data as your other graphs. This will appear in the legend so you can toggle it on/off.
There is no method to hide/show trend lines. So the only way to do this would be remove the trend line from array, validate data and then add it again when needed.
Passing Data to AM-charts in Line Charts using database in Asp.net and C#.
Here is the code it worked for me
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="JSfiles/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var chartDataResults = new Array();
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'sampleLine.aspx/GetDataonload',
data: {},
success:
function (response) {
drawVisualization(response.d);
}
});
function drawVisualization(dataValues) {
for (var i = 0; i < dataValues.length; i++) {
var dataitem = dataValues[i];
var date = dataitem.date;
var cpa = dataitem.cpacount;
//alert(cpa);
var cpi = dataitem.cpicount;
var cpm = dataitem.cpmcount;
chartDataResults.push({
date: date,
cpacount: cpa,
cpicount: cpi,
cpmcount: cpm
});
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 30,
"legend": {
"equalWidths": false,
"periodValueText": "total: [[value.sum]]",
"position": "top",
"valueAlign": "left",
"valueWidth": 100
},
"dataProvider":chartDataResults,
//"dataProvider": [{
// "year": 1994,
// "cars": 1587,
// "motorcycles": 650,
// "bicycles": 121
//}],
"valueAxes": [{
"stackType": "regular",
"gridAlpha": 0.07,
"position": "left",
"title": "Traffic incidents"
}],
"graphs": [{
"balloonText": "<img src='images/icons-02.jpg' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
"fillAlphas": 0.6,
"hidden": true,
"lineAlpha": 0.4,
"title": "CPA Count",
"valueField": "cpacount"
}, {
"balloonText": "<img src='images/icons-03.jpg' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
"fillAlphas": 0.6,
"lineAlpha": 0.4,
"title": "CPI Count",
"valueField": "cpicount"
}, {
"balloonText": "<img src='images/icons-04.jpg' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
"fillAlphas": 0.6,
"lineAlpha": 0.4,
"title": "CPM Count",
"valueField": "cpmcount"
}],
"plotAreaBorderAlpha": 0,
"marginTop": 10,
"marginLeft": 0,
"marginBottom": 0,
"chartScrollbar": {},
"chartCursor": {
"cursorAlpha": 0
},
"categoryField": "date",
"categoryAxis": {
"startOnAxis": true,
"axisColor": "#DADADA",
"gridAlpha": 0.07,
"title": "Year",
"guides": [{
category: "2001",
toCategory: "2016",
lineColor: "#CC0000",
lineAlpha: 1,
fillAlpha: 0.2,
fillColor: "#CC0000",
dashLength: 2,
inside: true,
labelRotation: 90,
label: "Increased Count"
}, {
category: "2016",
lineColor: "#CC0000",
lineAlpha: 1,
dashLength: 2,
inside: true,
labelRotation: 90,
label: "Count"
}]
},
"export": {
"enabled": true
}
});
}
}
});
</script>
C# Code
public static List<ChartDetails> GetDataonload()
{
string Constring = System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString.ToString();
using (SqlConnection con = new SqlConnection(Constring))
{
List<ChartDetails> dataList = new List<ChartDetails>();
SqlCommand cmd = new SqlCommand("Usp_TotalcountCPA_new_usingfunction", con);
cmd.CommandTimeout = 50;
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("#iAdvertiserid", "1000120");
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)
{
ChartDetails details = new ChartDetails();
string date = dtrow[4].ToString();
details.date = date.Substring(3, 7);
details.cpacount = dtrow[7].ToString();
details.cpicount = dtrow[10].ToString();
details.cpmcount = dtrow[14].ToString();
details.cvpcount = dtrow[16].ToString();
dataList.Add(details);
}
return dataList;
}
}
public class ChartDetails
{
public string date { get; set; }
public string cpacount { get; set; }
public string cpicount { get; set; }
public string cpmcount { get; set; }
public string cvpcount { get; set; }
// public string CountryCode { get; set; }
}[![enter image description here][1]][1]
[1]: http://i.stack.imgur.com/CvInC.png
I want to set interval to 1 on my chart (using System.Web.Helpers) in mvc3 .net c#.
i cant find chart property to set the interval so that the x/yValues show all the labels.
Here the code:
Chart key = new Chart(width: 600, height: 400)
.AddSeries(
chartType: "bar",
legend: "Rainfall",
xValue: xVal, //new[] { "Jan", "Feb", "Mar", "Apr", "May" },
yValues: yVal
) //new[] { "20", "20", "40", "30", "10" })
.AddTitle("Chart Success Rate")
.Write("png");
Any help would be much appreciate.
Thanks.
You can do it with "theme" string. I have tested OK with it.
Just add a Interval=""1"" to the theme xml.
See this post: http://forums.asp.net/t/1807781.aspx/1 see the 6th floor reply (May 27, 2012 11:23 AM)
my test code:
public ActionResult GetChartCategoryCountList1()
{
string temp = #"<Chart>
<ChartAreas>
<ChartArea Name=""Default"" _Template_=""All"">
<AxisY>
<LabelStyle Font=""Verdana, 12px"" />
</AxisY>
<AxisX LineColor=""64, 64, 64, 64"" Interval=""1"">
<LabelStyle Font=""Verdana, 12px"" />
</AxisX>
</ChartArea>
</ChartAreas>
</Chart>";
using (var context = new EdiBlogEntities())
{
var catCountList = context.GetCategoryCountList().ToList();
var bytes = new Chart(width: 850, height: 400, theme: temp)
.AddSeries(
xValue: catCountList.Select(p => p.DisplayName).ToArray(),
yValues: catCountList.Select(p => p.PostCount).ToArray()
)
.GetBytes("png");
return File(bytes, "image/png");
}
}