I am trying to create a local webpage with pie charts to display on a tv in our building. I'm using plotly to display multiple pie's on page and automate the process so it will automatically pull the data from the last 30 days and update the charts. The problem I am having is that all the pies are stacked on each other and wont display independently. I'm trying to display 6 total, 3 across and 2 down. Any help would be appreciated.
I'm also using this as a reference: https://plotly.com/javascript/subplots/#multiple-subplots
Thanks!
<!doctype html>
<html lang="en">
<head>
<!--#include file="scripts/asp/AllDataOpen.asp"-->
<!--#include file="scripts/asp/SqlCheckInclude.asp"-->
<script src='https://cdn.plot.ly/plotly-2.0.0.min.js'></script>
</head>
<body>
<div id='PiCharts'></div>
</body>
<script type="text/javascript">
<%
Set reasonRS = oConn.Execute("SELECT TOP (6) reason, reason_code,sum(qty) AS qty FROM [DCC].[dbo].vDCC_Remakes_Print WHERE create_date >= DATEADD(day,-30,GETDATE()) GROUP BY reason,reason_code ORDER BY sum(qty) DESC")
if not reasonRS.EOF then
i = 1
do until reasonRS.EOF
Response.write (VbCrLf & VbCrLf)
Response.write ("charttitle" & i & " = """& reasonRS("reason") & """")
Response.write (VbCrLf)
Response.write ("chartdata" & i & " = [")
Set bomitemRS = oConn.Execute("SELECT TOP (8) bomitem, sum(qty) AS qty FROM [DCC].[dbo].DCC_Remakes WHERE datestamp >= DATEADD(day,-30,GETDATE()) AND reason="&reasonRS("reason_code")&" GROUP BY bomitem ORDER BY sum(qty) DESC")
if not bomitemRS.EOF then
x = ""
y = ""
do until bomitemRS.EOF
x = x & bomitemRS("qty") & ","
y = y & """" & bomitemRS("bomitem") & """" & ","
bomitemRS.MoveNext
loop
end if
' subtract the last comma here '
x = left(x,len(x)-1)
y = left(y,len(y)-1)
Response.write(x)
Response.write("]" & VbCrLf)
Response.write("chartlabel" & i & " = [ " & y & " ]")
reasonRS.MoveNext
i = i + 1
loop
end if
%>
var data1 = [{
values: chartdata1,
labels: chartlabel1,
type: 'pie'
}];
var data2 = {
values: chartdata2,
labels: chartlabel2,
type: 'pie'
};
var data3 = {
values: chartdata3,
labels: chartlabel3,
type: 'pie'
};
var data4 = {
values: chartdata4,
labels: chartlabel4,
type: 'pie'
};
var data5 = {
values: chartdata5,
labels: chartlabel5,
type: 'pie'
};
var data6 = {
values: chartdata6,
labels: chartlabel6,
type: 'pie'
};
var data = [data1, data2, data3, data4, data5, data6];
var layout = {
grid: {rows: 3, columns: 2, pattern: 'independent'},
};
Plotly.newPlot('PiCharts', data, layout);
</script>
<!--#include file="scripts/asp/AllDataClose.asp"-->
</html>