классика asp с диаграммой javascript

Question

Рассмотрим следующую диаграмму JS (взята из бесплатного шаблона начальной загрузки)

   // Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';

// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["Mar 1", "Mar 2", "Mar 3", "Mar 4", "Mar 5", "Mar 6", "Mar 7", "Mar 8", "Mar 9", "Mar 10", "Mar 11", "Mar 12", "Mar 13"],
    datasets: [{
      label: "Sessions",
      lineTension: 0.3,
      backgroundColor: "rgba(2,117,216,0.2)",
      borderColor: "rgba(2,117,216,1)",
      pointRadius: 5,
      pointBackgroundColor: "rgba(2,117,216,1)",
      pointBorderColor: "rgba(255,255,255,0.8)",
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "rgba(2,117,216,1)",
      pointHitRadius: 50,
      pointBorderWidth: 2,
      data: [10000, 30162, 26263, 18394, 18287, 28682, 31274, 33259, 25849, 24159, 32651, 31984, 38451],
    }],
  },
  options: {
    scales: {
      xAxes: [{
        time: {
          unit: 'date'
        },
        gridLines: {
          display: false
        },
        ticks: {
          maxTicksLimit: 7
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 40000,
          maxTicksLimit: 5
        },
        gridLines: {
          color: "rgba(0, 0, 0, .125)",
        }
      }],
    },
    legend: {
      display: false
    }
  }
});

То, что я пытаюсь сделать, это передать переменную asp в эту диаграмму, я наивно думал, что смогу установить соединение с sql-сервером следующим образом:

<%
'--------------------------------------------------------------------------------------------
'  Declare variables
'--------------------------------------------------------------------------------------------
Dim gobjConn
Dim gsConnect
Dim gsSQL

'--------------------------------------------------------------------------------------------
'  Open database connection
'--------------------------------------------------------------------------------------------
gsConnect = "Driver={SQL Server};Server ;Database=mydB;Uid=UserName;Pwd=myPW;"
Set gobjConn = Server.CreateObject("ADODB.Connection")

gobjConn.Open gsConnect

gsSQL = "SELECT Sales, Week from Sales" 

%>

и я мог бы передать Store & sales на вышеуказанные метки данных (оси x и y соответственно), но добавление любого asp в мой файл JS приводит к тому, что страница не загружает диаграмму.

любой совет был бы великолепен.

рад пойти по другому пути, это больше для обучения (ограничено asp-classic у меня на работе)

Answer 1

Выполнение ASP-кода в файле JS невозможно, если вы не добавите собственный обработчик для сопоставления файлов .js, чтобы они вели себя как файлы .asp. Вместо этого вы можете сгенерировать данные на родительской странице asp и назначить значения в качестве глобальных переменных javascript, которые могут быть прочитаны вашим JS-файлом внешних диаграмм.

Не проверено, но как-то так:

<%

    '--------------------------------------------------------------------------------------------
    ' Declare variables
    '--------------------------------------------------------------------------------------------
    Dim gobjConn
    Dim gobjRS
    Dim gsConnect
    Dim gsSQL
    Dim gsData
    Dim gsLoop
    Dim chartLabels
    Dim chartSales

    '--------------------------------------------------------------------------------------------
    ' Open database connection
    '--------------------------------------------------------------------------------------------
    gsConnect = "Driver={SQL Server};Server ;Database=mydB;Uid=hal03df;Pwd=myPW;"
    Set gobjConn = Server.CreateObject("ADODB.Connection")
    Set gobjRS = Server.CreateObject("ADODB.Recordset")

    gobjConn.Open(gsConnect)
    gobjRS.open "SELECT Sales, Week FROM Sales ORDER BY Week ASC",gobjConn

    ' check the recordset contains data

    if NOT gobjRS.EOF then

        ' convert the recordset to a 2d array

        gsData = gobjRS.getRows()

        ' loop through the recordset array

        for gsLoop = 0 to uBound(gsData,2)

            ' convert the week value to a date variable

            gsData(1,gsLoop) = cDate(gsData(1,gsLoop))

            ' build the chart labels

            chartLabels = chartLabels & """" &_ 
            MonthName(Month(gsData(1,gsLoop)),True) & " " & Day(gsData(1,gsLoop)) & """"

            ' build the sales labels

            chartSales = chartSales & gsData(0,gsLoop)

            ' add a trailing comma?

            if NOT gsLoop = uBound(gsData,2) then
                chartLabels = chartLabels & ", "
                chartSales = chartSales & ", "
            end if

        next

    else

        ' No sales data

    end if

    gobjRS.close
    gobjConn.close

    set gobjRS = nothing
    set gobjConn = nothing

%><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>

<body>


<script language="javascript">

    // assign the asp chartLabels/chartSales variables as global javascript arrays

    var chartLabels = [<%=chartLabels%>];
    var chartSales = [<%=chartSales%>];

</script>
<script language="javascript" src="path/to/charts/js/file"></script>
</body>
</html>

Небольшой альтернативой будет выполнение группового конкатата в вашем SQL, что избавит от необходимости циклически проходить через набор записей. Хотя мои знания SQL Server невелики, я не знаю, как это сделать.

В вашем графике файл JS:

<script language="javascript">

// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';

// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: chartLabels,
    datasets: [{
      label: "Sessions",
      lineTension: 0.3,
      backgroundColor: "rgba(2,117,216,0.2)",
      borderColor: "rgba(2,117,216,1)",
      pointRadius: 5,
      pointBackgroundColor: "rgba(2,117,216,1)",
      pointBorderColor: "rgba(255,255,255,0.8)",
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "rgba(2,117,216,1)",
      pointHitRadius: 50,
      pointBorderWidth: 2,
      data: chartSales
    }],
  },
  options: {
    scales: {
      xAxes: [{
        time: {
          unit: 'date'
        },
        gridLines: {
          display: false
        },
        ticks: {
          maxTicksLimit: 7
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 40000,
          maxTicksLimit: 5
        },
        gridLines: {
          color: "rgba(0, 0, 0, .125)",
        }
      }],
    },
    legend: {
      display: false
    }
  }
});
</script>