the code that is generated by your concatenation logic is like that
<script type='text/javascript'>var chart; var chartData = [{ 'year': 2005, 'income': 23.5,'expenses': 18.1},AmCharts.ready(function () {chart = new AmCharts.AmSerialChart(); chart.dataProvider = chartData; chart.categoryField = 'year'; chart.startDuration = 1; chart.plotAreaBorderColor = '#DADADA'; chart.plotAreaBorderAlpha = 1; // this single line makes the chart a bar chart chart.rotate = true;var categoryAxis = chart.categoryAxis; categoryAxis.gridPosition = 'start'; categoryAxis.gridAlpha = 0.1; categoryAxis.axisAlpha = 0; var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0;
valueAxis.gridAlpha = 0.1;
valueAxis.position = 'top';
chart.addValueAxis(valueAxis);var graph1 = new AmCharts.AmGraph(); graph1.type = 'column'; graph1.title = 'Income'; graph1.valueField = 'income'; graph1.balloonText = 'Income:[[value]]'; graph1.lineAlpha = 0; graph1.fillColors = '#ADD981';graph1.fillAlphas = 1; chart.addGraph(graph1); var graph2 = new AmCharts.AmGraph(); graph2.type = 'column'; graph2.title = 'Expenses'; graph2.valueField = 'expenses'; graph2.balloonText = 'Expenses:[[value]]'; graph2.lineAlpha = 0; graph2.fillColors = '#81acd9'; graph2.fillAlphas = 1; chart.addGraph(graph2);var legend = new AmCharts.AmLegend(); chart.addLegend(legend); chart.creditsPosition = 'top-right'; // WRITE chart.write('chartdiv'); }); </script>
as you see some part of your code is commented out, first need to fix that part and the thing is
chartData = [
starts with '[' but there is no ']'
also instead of
,AmCharts.ready
it must be
;AmCharts.ready
so basically you should change your code to the following one :
protected void Page_Load(object sender, EventArgs e)
{
string sb = "";
sb += (@" <script type='text/javascript'>");
sb += (@"var chart;");
sb += (@" var chartData = [");
sb += (@"{");
sb += (@" 'year': 2005,");
sb += (@" 'income': 23.5,");
sb += (@"'expenses': 18.1}];");
sb += (@"AmCharts.ready(function () {");
sb += (@"chart = new AmCharts.AmSerialChart(); chart.dataProvider = chartData; chart.categoryField = 'year'; chart.startDuration = 1; chart.plotAreaBorderColor = '#DADADA'; chart.plotAreaBorderAlpha = 1; chart.rotate = true;");
sb += (@"var categoryAxis = chart.categoryAxis; categoryAxis.gridPosition = 'start'; categoryAxis.gridAlpha = 0.1; categoryAxis.axisAlpha = 0;");
sb += (@" var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0;
valueAxis.gridAlpha = 0.1;
valueAxis.position = 'top';
chart.addValueAxis(valueAxis);");
sb += (@"var graph1 = new AmCharts.AmGraph(); graph1.type = 'column'; graph1.title = 'Income'; graph1.valueField = 'income'; graph1.balloonText = 'Income:[[value]]'; graph1.lineAlpha = 0; graph1.fillColors = '#ADD981';graph1.fillAlphas = 1; chart.addGraph(graph1);");
sb += (@" var graph2 = new AmCharts.AmGraph(); graph2.type = 'column'; graph2.title = 'Expenses'; graph2.valueField = 'expenses'; graph2.balloonText = 'Expenses:[[value]]'; graph2.lineAlpha = 0; graph2.fillColors = '#81acd9'; graph2.fillAlphas = 1; chart.addGraph(graph2);");
sb += (@"var legend = new AmCharts.AmLegend(); chart.addLegend(legend); chart.creditsPosition = 'top-right'; chart.write('chartdiv'); }); ");
sb += (@"</script>");
ScriptManager.RegisterStartupScript(Page, GetType(), "MyFun1", sb, false);
}
there is an example here for more information
<script type="text/javascript">
var chart;
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",
dataProvider: chartData,
categoryField: "country",
pathToImages:"../amcharts/images/",
depth3D: 20,
angle: 30,
categoryAxis: {
labelRotation: 90,
gridPosition: "start"
},
valueAxes: [{
title: "Visitors"
}],
graphs: [{
valueField: "visits",
colorField: "color",
type: "column",
lineAlpha: 0,
fillAlphas: 1
}],
chartCursor: {
cursorAlpha: 0,
zoomable: false,
categoryBalloonEnabled: false
},
amExport: {
top: 21,
right: 21,
buttonColor: '#EFEFEF',
buttonRollOverColor:'#DDDDDD',
exportPNG:true,
exportJPG:true,
exportPDF:true,
exportSVG:true
}
});
</script>