Google Combo Charts?

Question

I have 4 objects and I show them for 4 days. But in the first and last days I can not see the other 2 entities. On August 3, I can not see T0, T1. On August 6, I do not see T2, T3.

Codes

var evalledData = eval("(" + result.chartData + ")"); var ac = new google.visualization.ComboChart($("#chart_div_ay").get(0)); ac.draw(new google.visualization.DataTable(evalledData, 0.5), { //title: 'Son 7 günlük sayaç okumalarının toplamı.', width: '100%', height: 300, vAxis: { title: "kW" }, hAxis: { title: "Gün" }, seriesType: "bars", series: { 5: { type: "line"} } }); 

Controller:

 public ActionResult MusteriSayaclariOkumalariChartDataTable(DateTime startDate, DateTime endDate, int? musteri_id) { IEnumerable<TblSayacOkumalari> sayac_okumalari = entity.TblSayacOkumalari; var sonuc = from s in sayac_okumalari where s.TblSayaclar.musteri_id == musteri_id && s.okuma_tarihi.Value >= startDate && s.okuma_tarihi.Value <= endDate group s by new { date = new DateTime(((DateTime)s.okuma_tarihi).Year, ((DateTime)s.okuma_tarihi).Month, ((DateTime)s.okuma_tarihi).Day) } into g select new { okuma_tarihi = g.Key, T1 = g.Sum(x => x.kullanim_T1) / 1000, T2 = g.Sum(x => x.kullanim_T2) / 1000, T3 = g.Sum(x => x.kullanim_T3) / 1000, T4 = g.Sum(x => x.kullanim_T0) / 1000 }; //Get your data table from DB or other source DataTable chartTable = new DataTable(); chartTable.Columns.Add("Tarih").DataType = System.Type.GetType("System.DateTime"); chartTable.Columns.Add("T1").DataType = System.Type.GetType("System.Double"); chartTable.Columns.Add("T2").DataType = System.Type.GetType("System.Double"); chartTable.Columns.Add("T3").DataType = System.Type.GetType("System.Double"); chartTable.Columns.Add("Toplam").DataType = System.Type.GetType("System.Double"); foreach (var item in sonuc) { chartTable.Rows.Add(item.okuma_tarihi.date, item.T1.Value, item.T2.Value, item.T3.Value, item.T4.Value); } //convert datetime value to google datetype, if your first column is date Bortosky .Google .Visualization .GoogleDataTable .SetGoogleDateType(chartTable.Columns["Tarih"], Bortosky.Google.Visualization.GoogleDateType.Date); //convert DataTable to GoogleDataTable var googleDataTable = new Bortosky.Google.Visualization.GoogleDataTable(chartTable); //Pass the google datatable to UI as json string return new JsonResult { Data = new { success = true, chartData = googleDataTable.GetJson() }, JsonRequestBehavior = JsonRequestBehavior.AllowGet }; } 

This action returns json as user data for google examples.

evalledData output:

Are there any options for this problem?

Thanks.

Answer 1

I recently had to build such a chart. Please review my code for your solution:

Put this in your controller:

 <EmployeeAuthorize()> Function WeightAreaChartData() As JsonResult Dim myData = db.Tbl_Weights.Where(Function(x) x.Weight_Employee_ID).OrderBy(Function(x) x.Weight_Create_Date) Dim data = New List(Of Object) data.Add(New Object() {"Date", "Your Weight"}) For Each i As Tbl_Weight In myData data.Add(New Object() {DateTime.Parse(i.Weight_Create_Date).Day, i.Weight_Amount}) Next Return Json(data, JsonRequestBehavior.AllowGet) End Function 

Put it in your opinion; change the .post () URL accordingly:

 <script type="text/javascript"> google.load("visualization", "1", { packages: ["corechart"] }); google.setOnLoadCallback(drawChart); function drawChart() { $.post('/Weight/WeightAreaChartData', {}, function (data) { var tdata = new google.visualization.arrayToDataTable(data); var options = { title: 'Weight Lost & Gained This Month', hAxis: { title: 'Day of Month', titleTextStyle: { color: '#1E4A08'} }, vAxis: { title: 'Lbs.', titleTextStyle: { color: '#1E4A08'} }, chartArea: { left: 50, top: 30, width: "75%" }, colors: ['#FF8100'] }; var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(tdata, options); }); } </script> <div id="chart_div" style="width: 580px; height: 200px;"></div> 

To fix your specific bar clipping problem, I believe you can use this in your options:

 hAxis: { viewWindowMode: 'pretty' } 

Like this:

 var options = { title: 'Weight Lost & Gained This Month', hAxis: { title: 'Day of Month', titleTextStyle: { color: '#1E4A08'} }, vAxis: { title: 'Lbs.', titleTextStyle: { color: '#1E4A08' } }, chartArea: { left: 50, top: 30, width: "75%" }, colors: ['#FF8100', 'blue'], hAxis: { viewWindowMode: 'pretty' } };