I am trying to use Material Bar Chart, because i want to change K format for thousands at the Vaxis data. I want to show as 1000 not like 1k. When I use the following code for the chart, it seems okey, but i cannot customize Vaxis;
<script>
Array.prototype.insert = function ( index, item ) {
this.splice( index, 0, item );
};
function all(arr2,test){
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
if(arrGrp[0].length == 2)
{
arr2.push([' ', null]);
}
var data = google.visualization.arrayToDataTable(arr2);
console.log("ARR: " + arr2);
var options = {
title: 'Min: ' + min +' Max: ' + max ,
bars:'vertical',
bar: {groupWidth: "25%"},
height: 400,
vAxis: {
format: 'decimal',
minValue: min,
maxValue: max,
viewWindowMode : 'explicit',
viewWindow: {
max:max,
min:min
},}};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
var arrGrp=[];
</script>
And I populate my data as follows;
@{
var grpHeader2 = Model.GroupBy(r => new { r.GradeId, r.Grade }).ToList();
<script>
var arr = [];
var rowIndex=0;
arr.insert(rowIndex,'Date');
rowIndex++;
@foreach (var grpHeaderItem in grpHeader2)
{
<text>
arr.insert(rowIndex,'@(Html.Raw(grpHeaderItem.Key.Grade))');
rowIndex++;
</text>
}
arrGrp.push(arr);
max='@(Model.Max(r=>r.MaxScore).HasValue ? Model.Max(r => r.MaxScore) : -1 )';
min='@(Model.Min(r=>r.MinScore).HasValue ? Model.Min(r => r.MinScore) : -1 )';
</script>
}
@foreach (var item in Model.GroupBy(r => new { r.PlannedDate }))
{
<script>
var arr = [];
var rowIndex=0;
@*arr.insert(rowIndex,new Date(@item.Key.PlannedDate.Year,@item.Key.PlannedDate.Month,@item.Key.PlannedDate.Day));*@
arr.insert(rowIndex,'@item.Key.PlannedDate.ToString("dd.MM.yyyy")');
rowIndex++;
@foreach (var grpHeaderItem in grpHeader2)
{
<text>
arr.insert(rowIndex,@(Model.Where(r=>r.PlannedDate == item.Key.PlannedDate && grpHeaderItem.Key.GradeId == r.GradeId).Select(r=>r.GradeMin).FirstOrDefault()));
rowIndex++;
</text>
}
arrGrp.push(arr);
</script>
}
@{
<script>
all(arrGrp,'@(Html.Raw(ViewBag.Exam))');
</script>
Screen shot is [1]: https://imgyukle.com/i/1.xElyj "before - working but no customization" But when change code
chart.draw(data, options);
to
chart.draw(data, google.charts.Bar.convertOptions(options));
It looks like; [2]: https://imgyukle.com/i/2.xE348 "nothing working"
Can someone please help me what is wrong with that?