CODEWITHSUNDEEP
asp.netvb.netjavascriptchart.js
Siddanna Agrwal
Siddanna Agrwal

Reputation: 63

Configuring ChartJS from VB.NET

I'm still trying to finish my charting with using ChartJS. It goes quite well but I met a problem which I can not resolve.

I'm trying to show a chart of my customer sales. It works, but he wants me to start graph from zero. Instead it automatically start from my minimum sales value, which is not appropriate in this case.

Second problem is, it shows no space between Saturday and Monday (his shop is closed on Sunday), but he wants to see a break there.

Could someone assist me please?

That is code I used (I removed SqlServer access code and replaced real sales values):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script type="text/javascript" src="http://cdn3.devexpress.com/jslib/13.1.4/js/dx.chartjs.js"></script>   



<script>
    $(document).ready(function () {


   <% 
    Dim SalesList As Dictionary(Of DateTime, Integer) = New Dictionary(Of Date, Integer)

    SalesList.Add(New DateTime(2013, 6, 3), 12)
    SalesList.Add(New DateTime(2013, 6, 4), 14)
    SalesList.Add(New DateTime(2013, 6, 5), 9)
    SalesList.Add(New DateTime(2013, 6, 6), 15)
    SalesList.Add(New DateTime(2013, 6, 7), 9)
    SalesList.Add(New DateTime(2013, 6, 8), 4)
    SalesList.Add(New DateTime(2013, 6, 10), 11)

    Response.Write("var dataSource = [")
    For Each sales In SalesList
        Response.Write("{ date: '" + sales.Key + "', sales: " + sales.Value.ToString() + "},")
    Next

    Response.Write("]")
    %>

        var chart = $("#chartContainer").dxChart({
            dataSource: dataSource,
            series: {
                    type: "area",
                    argumentField: "date",
                    valueField: "sales",
                    name: "Sales"
            },
            title: "Sales"
        });
    });
</script>


<div id="chartContainer" style="width:800px;height:400px;"/>

Upvotes: 1

Views: 2954

Answers (1)

Andrey Kuleshov
Andrey Kuleshov

Reputation: 687

You can set minimum value of chart using following code:

valueAxis: {
    min: 0
}

More info on ChartJS documentation

I'm not sure I understand your second problem; I think you want to show you argument axis as contionus axis of time; now you have a list of possible string values, not datetime. You can specify it like this:

argumentAxis: {
    argumentType: 'datetime'
}

It forces dxChart to convert string data to date time. More info here

Upvotes: 1

Related Questions