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?
when you draw the chart without --> google.charts.Bar.convertOptions
,
the chart ignores the options for --> vAxis.viewWindow.min
& max
,
so the chart draws fine...
google.charts.load('current', { packages:['bar'] }).then(function () { var data = google.visualization.arrayToDataTable([ ['Date', 'Reading', 'Writing', 'Reading & Writing', 'Math', 'Total'], ['07.08.2018', 220, 230, 450, 610, 1060] ]); var min = -1; var max = -1; 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)); });
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
when you draw the chart with --> google.charts.Bar.convertOptions
,
it uses the min
& max
options, but according to the picture,
min
& max
are both set to --> -1
,
there are no rows that meet this criteria,
so the chart is blank...
google.charts.load('current', { packages:['bar'] }).then(function () { var data = google.visualization.arrayToDataTable([ ['Date', 'Reading', 'Writing', 'Reading & Writing', 'Math', 'Total'], ['07.08.2018', 220, 230, 450, 610, 1060] ]); var min = -1; var max = -1; 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, google.charts.Bar.convertOptions(options)); });
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
note: there are several options that are not supported by Material charts.
see --> Tracking Issue for Material Chart Feature Parity
this includes --> vAxis.minValue
, vAxis.maxValue
, & vAxis.format
but vAxis.viewWindow.min
& max
work, and is the same as vAxis.minValue
& vAxis.maxValue
to format the y-axis, use --> vAxes
(with an e ) -- format each axis separately, here you only have one
vAxes: {
0: {
format: 'decimal'
}
}
see following working snippet...
google.charts.load('current', { packages:['bar'] }).then(function () { var data = google.visualization.arrayToDataTable([ ['Date', 'Reading', 'Writing', 'Reading & Writing', 'Math', 'Total'], ['07.08.2018', 220, 230, 450, 610, 1060] ]); var min = 0; var max = 1200; var options = { title: 'Min: ' + min +' Max: ' + max , bars:'vertical', bar: {groupWidth: "25%"}, height: 400, vAxis: { viewWindow: { max:max, min:min } }, vAxes: { 0: { format: 'decimal' } } }; var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data, google.charts.Bar.convertOptions(options)); });
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.