score:1

i'm doing this in asp.net/c# like this:

my data from the db looks like this:

size:'38 inch' minimum:80 standard:85 maximum:90

create a model

namespace yournamespace.models
{
    public class chart
    {
        public string[] labels { get; set; }
        public list<datasets> datasets { get; set; }
    }

    public class datasets
    {
        public string bordercolor { get; set; }
        public bool fill { get; set; }
        public string label { get; set; }
        public string backgroundcolor { get; set; }
        public string type { get; set; }
        public string borderwidth { get; set; }
        public int[] data { get; set; }
    }

    public class configurations
    {
        public string crops { get; set; }
        public int hp { get; set; }
        public string pump { get; set; }
        public string tractormanufacture { get; set; }
        public string tractormodel { get; set; }
    }
 }

get your data and load up your model from your controller. i've added a 3 series for the bar chart (min,standard,max) and a line - add the line first. the trick for loading the data is that it has to be an array of integers, for example: datamin.toarray().


list<string> labellist = new list<string>();
foreach(chartfromdb db in cdb)//chartfromdb holds the structure mentioned above
{
    labellist.add(db.size);
}

chart _chart = new chart();
_chart.labels = labellist.toarray();
_chart.datasets = new list<datasets>();
list<datasets> _dataset = new list<datasets>();

list<int> datalist = new list<int>();
list<int> datamin = new list<int>();
list<int> datastandard = new list<int>();
list<int> datamax = new list<int>();

//line goes first
for (int y = 0; y < cdb.count; y++)
{
    datalist.add(conf.hp);
}
_dataset.add(new datasets()
{
    type = "line",
    bordercolor = "#ff6347",
    fill = false,
    label = "your pto-hp",
    data = datalist.toarray(),
    backgroundcolor = "#ff6347",
    borderwidth = "2"
});

for (int i=0;i< cdb.count; i++)
{
    datamax.add(cdb[i].maximum);
    datastandard.add(cdb[i].standard);
    datamin.add(cdb[i].minimum);
}

_dataset.add(new datasets()
{
    type = "bar",
    fill = true,
    label = "base - minimum",
    data = datamin.toarray(),
    bordercolor = "#ffe07c",
    backgroundcolor = "#ffe07c",
    borderwidth = "1"
});

_dataset.add(new datasets()
{
    type = "bar",
    fill = true,
    label = "standard - minimum",
    data = datastandard.toarray(),
    bordercolor = "#e4a317",
    backgroundcolor = "#e4a317",
    borderwidth = "1"
});

_dataset.add(new datasets()
{
    type = "bar",
    fill = true,
    label = "high performance - minimum",
    data = datamax.toarray(),
    bordercolor = "#ad9754",
    backgroundcolor = "#ad9754",
    borderwidth = "1"
});

_chart.datasets = _dataset;
return json(_chart, jsonrequestbehavior.allowget);

on your client, make an ajax/api call to your controller and pass the return data to some function and load

function loadcharts(data) {

        //the hi/low will allow you to dynamically adjust the upper/lower bound of the grid
        var hi = somemethodtogettheupperboundforyourchart;
        var lo = somemethodtogetthelowerboundforyourchart;

        var ctx = document.getelementbyid('canvas').getcontext('2d');
        var mybarchart = new chart(ctx, {
            type: 'bar',
            data: data,
            options: {
                title: {
                    display: true,
                    text: 'some title for your graph'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                responsive: true,
                scales: {
                    xaxes: [{
                        stacked: false
                    }],
                    yaxes: [
                        {
                            ticks: {                  
                                max: hi ,
                                min: lo,
                                stepsize: 10,
                                callback: function (value, index, values) {
                                    return value + " some description for your value";
                                }
                            }
                        },
                        {
                        stacked: false                       
                        }, {
                            legend : {
                                display: false
                            }
                        }
                    ]
                },
                layout: {
                    padding: {
                        left: 10,
                        right: 10,
                        top: 0,
                        bottom: 0
                    }
                }
            }

        });
    }//loadcharts

you will get something that will look like this:

screenshot


Related Query

More Query from same tag