图表显示按月记录的数据

Question

I have a table where the records have date field column with values like

Date  (column 1)                

11/1/2019        
12/1/2012                
12/1/2012                
1/3/2013             
1/3/2013             
1/3/2013                
1/3/2013             
etc.

Orders  (column 2) 

project     
project    
project    
project

I want to display a number of records interred by month to chart. I don't know anything about this

Like this

Answer 1

1.First You need to download from nuget.

highcharts.js and
highchartexporting.js

2.Then Declare w where you want show the graph. like,,

<div id="MonthlyColLine" style="width: 700px; height: 250px; margin: 0 auto"></div>

3.Then add To render Graph like, //link your dowloaded higcharts.js and highchartexporting.js to those where you show the graph

<script language="javascript" type="text/javascript">


            Highcharts.setOptions({
                lang: {
                    decimalPoint: '.',
                    thousandsSep: ' '
                }
            });
            $("#MonthlySales").highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: 'Month Wise Sales',
                    style: {
                        color: '#44994a',
                        fontWeight: 'bold'
                    }
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    title: {
                        text: 'Amount in Crore.'
                    }
                },
                legend: {
                    enabled: true
                },
                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y:.1f}'
                        }
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
                },
                "series": [
                    {
                        "name": "Sales",
                        "colorByPoint": true,
                        "data": [
                            {
                                "name": "Jan",
                                "y": 18000,//Ypur data here

                            },
                            {
                                "name": "Feb",
                                "y": 20000,

                            },
                            {
                                "name": "March",
                                "y": 20000,

                            },
                            {
                                "name": "April",
                                "y": 2000,

                            },
                            {
                                "name": "May",
                                "y": 2000,

                            },
                            {
                                "name": "June",
                                "y": 2000,

                            },
                            {
                                "name": "July",
                                "y": 2000,

                            },
                            {
                                "name": "Aug",
                                "y":2000,

                            },
                            {
                                "name": "Sep",
                                "y": 2000,

                            },
                            {
                                "name": "Oct",
                                "y": 2000,

                            },
                            {
                                "name": "Nov",
                                "y": 2000,

                            },
                            {
                                "name": "Dec",
                                "y": 2000,

                            }


                        ]
                    }
                ]
            });


        }

    </script>