htmx Integration

Click chart elements to load dynamic content with htmx

Interactive Funnel with htmx

Click on any funnel stage to load content from loaded-content.html into the panel below:

Sales Conversion Pipeline

<dc-funnel-chart width="500" height="400">
  <dc-title>Sales Conversion Pipeline</dc-title>
  <dc-funnel-stage value="10000" label="Website Visitors"
                   hx-get="/examples/loaded-content.html"
                   hx-target="#stage-details"
                   hx-swap="innerHTML">
  </dc-funnel-stage>
  <dc-funnel-stage value="5000" label="Product Views"
                   hx-get="/examples/loaded-content.html"
                   hx-target="#stage-details"
                   hx-swap="innerHTML">
  </dc-funnel-stage>
  <dc-funnel-stage value="2000" label="Add to Cart"
                   hx-get="/examples/loaded-content.html"
                   hx-target="#stage-details"
                   hx-swap="innerHTML">
  </dc-funnel-stage>
  <dc-funnel-stage value="1000" label="Checkout"
                   hx-get="/examples/loaded-content.html"
                   hx-target="#stage-details"
                   hx-swap="innerHTML">
  </dc-funnel-stage>
  <dc-funnel-stage value="750" label="Purchases"
                   hx-get="/examples/loaded-content.html"
                   hx-target="#stage-details"
                   hx-swap="innerHTML">
  </dc-funnel-stage>
</dc-funnel-chart>

<div id="stage-details">
  Click a stage to see details
</div>
Sales Conversion Pipeline

Click a stage above to load content

Interactive Bar Chart with htmx

Click on any bar to load content from loaded-content.html into the panel below:

Monthly Revenue

<dc-chart width="500" height="350">
  <dc-title>Monthly Revenue</dc-title>
  <dc-bar value="45000" label="January" fill="#2196F3"
          hx-get="/examples/loaded-content.html"
          hx-target="#bar-details"
          hx-swap="innerHTML">
  </dc-bar>
  <dc-bar value="52000" label="February" fill="#4CAF50"
          hx-get="/examples/loaded-content.html"
          hx-target="#bar-details"
          hx-swap="innerHTML">
  </dc-bar>
  <dc-bar value="48000" label="March" fill="#FF9800"
          hx-get="/examples/loaded-content.html"
          hx-target="#bar-details"
          hx-swap="innerHTML">
  </dc-bar>
  <dc-bar value="61000" label="April" fill="#9C27B0"
          hx-get="/examples/loaded-content.html"
          hx-target="#bar-details"
          hx-swap="innerHTML">
  </dc-bar>
  <dc-bar value="58000" label="May" fill="#F44336"
          hx-get="/examples/loaded-content.html"
          hx-target="#bar-details"
          hx-swap="innerHTML">
  </dc-bar>
</dc-chart>
Monthly Revenue

Click a bar above to load content

Interactive Line Chart with htmx

Click on any line to load content from loaded-content.html into the panel below:

Product Performance

<dc-chart width="500" height="350">
  <dc-title>Product Performance</dc-title>
  <dc-line label="Product A" stroke="#2196F3"
           hx-get="/examples/loaded-content.html"
           hx-target="#line-details"
           hx-swap="innerHTML">
    <dc-point value="15" label="Q1"></dc-point>
    <dc-point value="22" label="Q2"></dc-point>
    <dc-point value="28" label="Q3"></dc-point>
    <dc-point value="32" label="Q4"></dc-point>
  </dc-line>
  <dc-line label="Product B" stroke="#4CAF50"
           hx-get="/examples/loaded-content.html"
           hx-target="#line-details"
           hx-swap="innerHTML">
    <dc-point value="12" label="Q1"></dc-point>
    <dc-point value="18" label="Q2"></dc-point>
    <dc-point value="25" label="Q3"></dc-point>
    <dc-point value="30" label="Q4"></dc-point>
  </dc-line>
  <dc-line label="Product C" stroke="#FF9800"
           hx-get="/examples/loaded-content.html"
           hx-target="#line-details"
           hx-swap="innerHTML">
    <dc-point value="8" label="Q1"></dc-point>
    <dc-point value="14" label="Q2"></dc-point>
    <dc-point value="20" label="Q3"></dc-point>
    <dc-point value="26" label="Q4"></dc-point>
  </dc-line>
</dc-chart>
Product Performance

Click a line above to load content

Interactive Pie Chart with htmx

Click on any slice to load content from loaded-content.html into the panel below:

Market Share

<dc-pie-chart width="500" height="350">
  <dc-title>Market Share</dc-title>
  <dc-pie-slice value="35" label="Product A" fill="#2196F3"
                hx-get="/examples/loaded-content.html"
                hx-target="#pie-details"
                hx-swap="innerHTML">
  </dc-pie-slice>
  <dc-pie-slice value="28" label="Product B" fill="#4CAF50"
                hx-get="/examples/loaded-content.html"
                hx-target="#pie-details"
                hx-swap="innerHTML">
  </dc-pie-slice>
  <dc-pie-slice value="22" label="Product C" fill="#FF9800"
                hx-get="/examples/loaded-content.html"
                hx-target="#pie-details"
                hx-swap="innerHTML">
  </dc-pie-slice>
  <dc-pie-slice value="15" label="Product D" fill="#9C27B0"
                hx-get="/examples/loaded-content.html"
                hx-target="#pie-details"
                hx-swap="innerHTML">
  </dc-pie-slice>
</dc-pie-chart>
Market Share

Click a slice above to load content