How to import data from Excel and use in ChartjsI want to draw a chart in chartjs with excel fileI use the below code but it doesnt work and I dont know where is my problemlt Page Language34vb34 AutoEventWireup34false34 CodeBehind34Chartjsaspxvb34 Inherits34ChartjsChartjs34 gtltDOCTYPE htmlgtltscript type34textjavascript34 src34Chartjs34gtltscriptgtltscript type34textjavascript34 src34xlsxfullminjs34gt

my problem Solvedthis is the final code ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta httpequiv34ContentType34 content34texthtml charsetutf834 gt lttitlegtchartjsplugindatasource samplelttitlegt ltlink rel34stylesheet34 href34httpscdnjscloudflarecomajaxlibstwitterbootstrap431cssbootstrapmincss34gt ltlink rel34stylesheet34 href34httpsfontsgoogleapiscomcssfamilyIndieFlower34gt ltstylegt canvas mozuserselect none webkituserselect none msuserselect none backgroundcolor aqua displayinlineblock chart margin auto width 75 th backgroundcolor eeeeee textalign center td width 333 ltstylegtltheadgtltbodygt ltscrip

Import data from Excel and draw Bar Chart using ChartJS in ASP.Net

dorsa

SOLVED CLOSED ACTIVE ANSWERED
User: dorsa
Posted: on Apr 26, 2020 08:24 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 10953

How to import data from Excel and use in Chart.js

I want to draw a chart in chartjs with excel file:

I use the below code but it doesn't work and I don't know where is my problem:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Chartjs.aspx.vb" Inherits="Chartjs.Chartjs" %>
<!DOCTYPE html>
<script type="text/javascript" src="Chart.js"></script>
<script type="text/javascript" src="xlsx.full.min.js"></script>
<script type="text/javascript" src="chartjs-plugin-datasource.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <canvas id="myChart"></canvas>
        <script>
            var ctx = document.getElementById('myChart').getContext('2d');

            var chart = new Chart(ctx, {
                type: 'bar',
                plugins: [ChartDataSource],
                options: {
                    daatasource: {
                        url: 'E:\sample-dataset.xlsx'
                    }
                }
            });
            data: {
                datasets: [{
                    type: 'line',
                    yAxisID: 'temperature',
                    backgroundColor: 'transparent',
                    borderColor: 'rgb(255, 99, 132)',
                    pointBackgroundColor: 'rgb(255, 99, 132)',
                    tension: 0,
                    fill: false
                }, {
                    yAxisID: 'precipitation',
                    backgroundColor: 'rgba(54, 162, 235, 0.5)',
                    borderColor: 'transparent'
                }]
            }
            options: {
                scales: {
                    yAxes: [{
                        id: 'temperature',
                        gridLines: {
                            drawOnChartArea: false
                        }
                    }, {
                        id: 'precipitation',
                        position: 'right',
                        gridLines: {
                            drawOnChartArea: false
                        }
                    }]
                }
                options: {
                    daatasource: {
                        url: 'sample-index.xlsx',
                            rowMapping: 'index'
                    }
                    options: {
                        daatasource: {
                            url: 'sample-datapoint.xlsx',
                                rowMapping: 'datapoint',
                                    datapointLabelMapping: {
                                _dataset: 'dataset',
                                    _index: 'month',
                                        x: 'month',
                                            y: 'value'
                            }
                        }
                        options: {
                            daatasource: {
                                url: 'sample-dataset.xlsx',
                                    datasetLabels: 'Sheet1!A2:A3',
                                        indexLabels: 'Sheet1!D1:G1',
                                            data: 'Sheet1!D2:G3'
                            }
        </script>
    </form>
</body>
</html>

Download FREE API for Word, Excel and PDF in ASP.Net

dorsa

0 3

Reply
ANSWER
User: dorsa
Replied: on Apr 27, 2020 03:24 AM
Report

my problem Solved.

this is the final code:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>chartjs-plugin-datasource sample</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Indie+Flower">    
    <style>
        canvas {            
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            background-color: aqua;
            display:inline-block;
        }

        .chart {    
            margin: auto;
            width: 75%;
        }

        th {
            background-color: #eeeeee;
            text-align: center;
        }

        td {
            width: 33.3%;
        }
  
    </style>
</head>
<body> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.14.3/dist/xlsx.full.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource"></script>
    <script src="MonthlyCost.js"></script>
    <div style="width:500px;height:500px">
        <div style="width:500px;height:500px">
        <canvas id="MonthlyCost" ></canvas>
        </div>
    </div>
</body>
</html>

var chartColors = {
    red: 'rgb(255, 99, 132)',
    blue: 'rgb(100, 162, 235)'
};

var color = Chart.helpers.color;
var config = {
    type: 'bar',
    data: {
        datasets: [{

            barPercentage: 0.5,

            backgroundColor: 'rgb(196, 230, 255)',
            borderColor: 'transparent',
            borderWidth: 1
        },
        ]

    },
    plugins: [ChartDataSource],
    options: {
        //maintainAspectRatio :false,
        legend: { display: true },
        title: {
            display: true,
            text: 'Monthly Cost'
        },

        scales: {
            xAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Month'
                }
            }],
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Value'
                }
            }]
        },
        plugins: {
            datasource: {
                type: 'sheet',
                url: './Results.xlsx',
                rowMapping: 'index',
                datasetLabels: 'Monthly Cost!B2',
                indexLabels: 'Monthly Cost!A3:A',
                data: 'Monthly Cost!B3:B'
            }
        }
    }
};

window.onload = function () {
    var ctx = document.getElementById('MonthlyCost').getContext('2d');
    window.MonthlyCost = new Chart(ctx, config);
};

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Import data from Excel and draw Bar Chart using ChartJS in ASP.Net

Company

Explore

Follow us

Contact Us