<html>
<body>
<!--- Chart Data --->
<div style="width: 100%; float: left;text-align:center; margin-top:15px; background:#ffbc49 !important; color:#4e5257 !important; font-size:25px; font-weight: 800; margin-bottom:0px; line-height:70px;">sdjskdj</div>
<div class="add_more_chart240 chart_list" id="add_more_chart240" style="margin: 10px 10px; width:calc(100% - 20px); float: left; border: 1px solid #757575;">
<div class="forlegend col-md-12" style="display:none">
<input type="text" class="form-control lenendname" placeholder="Legend Name" value="sdsjdsk">
<input type="text" class="form-control lenendname" placeholder="Legend Name" value="L2">
</div>
<input type="hidden" class="form-control y_series_col" min="2" max="4" placeholder="2" value="2" id="y_series_col" />
<input type="hidden" class="form-control x_series_col" min="2" max="10" placeholder="2" value="5" id="x_series_col" />
<!--Graph start-->
<div id="curve_chart240" class="curve_chart" style="width:95%; height: 430px; margin:0 auto;"></div>
</div>
<!--Graph end-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
$.each($('.chart_list'), function() {
var class_name = this.id ;
var y_col = 2;
var x_col = 5;
var data = new google.visualization.DataTable();
var legend_label = [];
$("#"+class_name).find('.forlegend :input').each(function(e){
legend_label.push(this.value);
});
data.addColumn('number', '');
for(var i = 1;i<=y_col;i++)
{
data.addColumn('number', legend_label[i-1]);
data.addColumn({type:'number', role:'annotation'});
}
data.addRows([[1,50.1,50.1,83.4,83.4],[2,49.3,49.3,50,50],[3,80,80,90,90],[4,17.5,17.5,23.3,23.3],[5,91,91,13.3,13.3]]);
var options = {
isStacked: true,
annotations: {
textStyle: {
fontSize: 15
},
stem: {
length: 16
},
},
title: 'sdjskdjk',
//displayAnnotations: true,
legend: { position: 'bottom', alignment: 'middle' },
pointSize: 5,
vAxis: {
title:"% score",
viewWindow: {
max:100,
min:0
}
},
hAxis : {
textStyle : {
fontSize: 20 // or the number you want
}
},
colors:['#52B183','#53D2F8','#B573AF','#D7E542'],
};
var dynamic_id = class_name.replace('add_more_chart','');
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'+dynamic_id));
chart.draw(data, options);
});
}
</script>
</body>
</html>