[Chartjs]-How to draw a chart with Chart.JS?

4πŸ‘

βœ…

I changed your data structure. With this new β€œdata”, the code works. I think that you used a specific data structure for line chart.

<html>
  <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
  </head>

  <body>
    <canvas id="myChart" width="400" height="400"></canvas>


    <script>
      // Get the context of the canvas element we want to select

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    },
    {
        value: 40,
        color: "#949FB1",
        highlight: "#A8B3C5",
        label: "Grey"
    },
    {
        value: 120,
        color: "#4D5360",
        highlight: "#616774",
        label: "Dark Grey"
    }

];

var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);

    </script>
  </body>

</html>

1πŸ‘

enter image description here Retrieving Data from the database using Chat.js
Here is the code it worked for me.

<link href="JSfiles/ui.jqgrid.css" rel="stylesheet" />
    <link href="JSfiles/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
    <script src="JSfiles/jquery-1.7.1.min.js"></script>
    <script src="JSfiles/grid.locale-en.js"></script>
    <script src="JSfiles/jquery.jqGrid.min.js"></script>
    <script src="JSfiles/jquery-ui-1.9.2.custom.js"></script>
     <script type="text/javascript">

         $(function () {
             var lastsel2;
             debugger;
             $("#dataGrid").jqGrid({
                 url: 'offers.aspx/LoadGrid',
                 datatype: 'json',
                 mtype: 'POST',
                 height: 200,
                 width: 500,
                 //localReader: { CampaignID: 'CampaignID' },
                 editurl: 'clientArray',
                 onSelectRow: function (date) {
                     if (txAmount && txAmount !== lastsel2) {
                         jQuery('#dataGrid').restoreRow(lastsel2);
                         jQuery('#dataGrid').editRow(date, true);
                         lastsel2 = date;
                     }
                 },
                 serializeGridData: function (postData) {
                     //alert(postData);
                     return JSON.stringify(postData);

                 },

                 ajaxGridOptions: { contentType: "application/json" },
                 loadonce: true,
                 colNames: ['China', 'Indonesia', 'Cambodia', 'Malayasia', 'Thailand', 'Vietnam', 'Date', ],
                 colModel: [
                                { name: 'CN', index: 'CN', width: 10, height: 30, editable: false, sortable: true },
                                { name: 'ID', index: 'ID', width: 10, height: 30, editable: false, sortable: true },
                                { name: 'KH', index: 'KH', width: 10, height: 30, editable: false, sortable: true },
                                { name: 'MY', index: 'MY', width: 10, height: 30, editable: false, sortable: true },
                                { name: 'TH', index: 'TH', width: 10, height: 30, editable: false, sortable: true },
                                { name: 'VN', index: 'VN', width: 10, height: 30, editable: false, sortable: true },
                                { name: 'date', index: 'date', width: 10, sortable: true, sorttype: "number", formatter: 'date', formatoptions: { srcformat: "Y-m-d", newformat: 'd/m/y', datefmt: 'd/m/y' } }

                 ],
                 pager: '#pagingGrid',
                 rowNum: 10,
                 rowList: [10, 20, 30],
                 viewrecords: true,
                 gridview: true,
                 jsonReader: {
                     page: function (obj) { return 1; },
                     total: function (obj) { return 1; },
                     records: function (obj) { return obj.d.length; },
                     root: function (obj) { return obj.d; },
                     repeatitems: false,
                     id: "date"
                 },
                 sortname: 'date',
                 sortorder: "desc",
                 sortable: true,
                 loadComplete: function () {
                     var $self = $(this);
                     if ($self.jqGrid("getGridParam", "datatype") === "json") {
                         setTimeout(function () {
                             $self.trigger("reloadGrid"); // Call to fix client-side sorting
                         }, 50);
                     }
                 },
                 caption: 'Incomming Offers Report '
             });
             jQuery("#dataGrid").jqGrid('navGrid', '#pagingGrid',
                 { search: true, edit: false, add: false, del: false, refresh: true }, {}, {}, {},
                 { recreateFilter: true, overlay: true, multipleSearch: true, multipleGroup: true });

         });

    </script>
C# file
--------
[WebMethod]
        public static List<object> Chartload()
        {

            DataTable dt = new DataTable();
            string StartDate = DateTime.Now.AddDays(-180).ToString("yyyy-MM-dd");
            string EndDate = DateTime.Now.ToString("yyyy-MM-dd");

            List<ChartDetails> dataList = new List<ChartDetails>();
            string country = string.Empty;


            List<object> iData = new List<object>();



            Dataclass objoffers = new Dataclass();
            dt = objoffers.Getoffers("", StartDate, EndDate, "");

            string[] columnNames = dt.Columns.Cast<DataColumn>().Select(x => x.ColumnName).ToArray();

            foreach (string dc in columnNames)
            {

                List<string> labels = new List<string>();
                List<double> lst_dataItem_1 = new List<double>();


                for (int j = 0; j < dt.Rows.Count; j++)
                {
                    if (dc == "date")
                    {
                        labels.Add(dt.Rows[j]["date"].ToString());
                        //iData.Add(labels);
                    }
                    else
                    {
                        lst_dataItem_1.Add(Convert.ToDouble(dt.Rows[j][dc].ToString()));
                    }


                }
                if (dc == "date")
                    iData.Add(labels);
                else
                    iData.Add(lst_dataItem_1);
                //}

            }

            return iData;

        }

Leave a comment