MaxInterview - asp net mvc chart js c 23 example

showing results for - "asp net mvc chart js c 23 example"
05 Feb 2017
1 1 <!DOCTYPE html>
2 2 <html>
3 3 <head>
4 4     <meta charset="utf-8" />
5 5     <title></title>
6 6     <!--<link href="../Content/bootstrap.min.css" rel="stylesheet" />-->
7 7     <script src="../Scripts/Chart.min.js"></script>
8 8 </head>
9 9 <body>
1010     <canvas id="myChart"></canvas>
1111 
1212     <script>
1313         var ctx = document.getElementById("myChart");
1414         var chart = new Chart(ctx, {
1515             type: "line",
1616             data: {
1717                 labels: ['1 month', '2 month', '3 month', '4 month', '5 month', '6 month'],
1818                 datasets: [{
1919                     label: "Taipei",
2020                     fill: false,
2121                     backgroundColor: 'rgba(255,165,0,0.3)',
2222                     borderColor: 'rgb(255,135,20)',
2323                     pointStyle: "circle",
2424                     pointBackgroundColor: 'rgb(0,222,0)',
2525                     pointRadius: 5,
2626                     pointHoverRadius: 10,
2727                     data: [13.1, 10.2, 13.5, 20.9, 25.2, 27.1, 31.8]
2828                 }, {
2929                     label: "Kaohsiung",
3030                     fill: false,
3131                     backgroundColor: 'rgba(0,255,255,0.3)',
3232                     borderColor: 'rgb(0,225,255)',
3333                     pointStyle: "triangle",
3434                     pointBackgroundColor: 'blue',
3535                     pointRadius: 5,
3636                     pointHoverRadius: 10,
3737                         data: [29.1, 28.3, 22.6, 25.4, 27.5, 23.4]
3838 
3939                 }, {
4040                     label: "Vietnam?",
4141                     fill: false,
4242                     backgroundColor: 'rgba(153,50,204,0.3)',
4343                     borderColor: 'rgb(123,55,190)',
4444                     pointStyle: "rect",
4545                     pointBackgroundColor: 'rgb(220,20,60)',
4646                     pointRadius: 5,
4747                     pointHoverRadius: 10,
4848                         data: [16.6, 17.3, 19.2, 23.8, 12.0, 17.6]
4949 
5050                 }]
5151             },
5252             options: {
5353                 responsive: true,
5454                 title: {
5555                     display: true,
5656                     fontSize: 26,
5757                     text: '2019 Annual Branch 1 - 6 Monthly turnover'
5858                 },
5959                 tooltips: {
6060                     mode: 'point',
6161                     intersect: true,
6262                 },
6363                 hover: {
6464                     mode: 'nearest',
6565                     intersect: true
6666                 },
6767                 scales: {
6868                     xAxes: [{
6969                         display: true,
7070                         scaleLabel: {
7171                             display: true,
7272                             labelString: 'Month',
7373                             fontSize: 15
7474                         },
7575                         ticks: {
7676                             fontSize: 15
7777                         }
7878                     }],
7979                     yAxes: [{
8080                         display: true,
8181                         scaleLabel: {
8282                             display: true,
8383                             labelString: 'Million(dollar)',
8484                             fontSize: 15
8585                         },
8686                         ticks: {
8787                             fontSize: 15
8888                         }
8989                     }]
9090                 },
9191                 animation: {
9292                     duration: 2000
9393                 }
9494             }
9595         });
9696     </script>
9797 </body>
9898 </html>
source