Google Combo Charts?

Question

I have 4 entities and I show them for 4 days. But first and last days I cant s

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'
                          }
                    };