Google Combo Charts?

Question

I have 4 entities and I show them for 4 days. But first and last days I cant see other 2 entities.In 3 August I cant see T0,T1. In 6 August I cant 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 return json as google examples custom data.

evalledData output:

Is there any option about this problem?

Thanks.

Answer 1

I recently had to build a chart like this. Please consider 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 this in your view; changing 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 issue of the bars being cut off, 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'
                          }
                    };