您的位置：首页 > 其它

table to piechart and barchart... (Using highchart)

2015-10-22 04:15 483 查看
XXXXX

1/20152/2015
aa11　　33
bb5522
Here I only display each row data. js function already added in code behind for each <td> tag for data area.

For example, I have two data points:

x: 1/2015, 2/2015

y: 11, 33

------------------------------------------------------------------------------------------------------------------------------------------

<head runat="server">
<title></title>
<script src="javascript/jquery-1.11.3.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

----------------

javascript:

<script type="text/javascript">

$(function () {
var objdata = $("#dgReport tr").not(":first").first();
if (objdata.length) {
plotChart(objdata);
}
});

function dlIndexChange() {
var dd = document.getElementById('DropDownList2');
var a = dd.options[dd.selectedIndex].value;
var obj = $("#dgReport tr:nth-child(" + (parseInt(a) + 1) + ")");
var header = $("#dgReport tr:first").children().not(':first');
if (obj.length) {
plotChart(obj);
}
}

function getRowNumber(obj) {
return obj.parents("tr:first")[0].rowIndex;
}

function plotChart(obj) {
var header = $("#dgReport tr:first").children().not(':first');
plotBarChart(obj.closest('tr'), header);
plotPieChart(obj.closest('tr'), header);
}

function plotBarChart(obj, header) {
var names = obj.children("td:first").html();
var dataseries = getChartData(obj);
var label = getLabelData(header);

//var data = toObject(label, dataseries);

$('#barchart').highcharts({
chart: {
type: 'column'
},
title: {
text: names + ' Expense Trend'
},
xAxis: {
categories: label,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Expense ($)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b> ${point.y:.1f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: names,
data: dataseries

}]
});
}

function plotPieChart(obj, header) {
var names = obj.children("td:first").html();
var dataseries = getChartData(obj);
var label = getLabelData(header);

var data = toObject(label, dataseries);
//var titlepie = 'Tems Trend Pie chart';

// pie chart
$('#piechart').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: names + ' Expense Trend'
},
subtitle: {
text: ' by Percentage'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [
{
name: names,
colorByPoint: true,
data: data
}]
});

}

function getChartData(obj) {
var arrayObj = new Array();
obj.children("td").not(':first').each(function () {
var data = $(this).html().replace("$", "");

arrayObj.push(parseInt(data));
});
return arrayObj;
}

function getLabelData(obj) {
var arrayObj = new Array();
obj.each(function () {
var data = $(this).html();
arrayObj.push(data);
});
return arrayObj;
}

// to [[x],[y]]
function toObject(arr1, arr2) {
var rv = [];
for (var i = 0; i < arr1.length; i++) {
if (arr1[i] !== undefined) {
var obj = '{name: "' + arr1[i] + '", y: ' + arr2[i] + '}';
rv.push(eval("(" + obj + ")"));
}
}
return rv;
}
</script>


　　

.... not going to put html source code here...
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航