<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="158263" data-post-id="158263">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="elcritch" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/elcritch/120/15758_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  elcritch
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thanks to <a class="mention" href="/u/tangui" rel="nofollow">@tangui</a> Plotex v0.3.0 is out that uses SVG Markers for line points. It speed up rendering almost 2x for ~80,000 points! <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="158263" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/charts-for-live-view/25419/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-158263" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="158263"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="158264" data-post-id="158264">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="elcritch" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/elcritch/120/15758_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  elcritch
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Those look great! If you have your code up, I’d like to look into the code.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="158264" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/charts-for-live-view/25419/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-158264" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="158264"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="158520" data-post-id="158520">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="neilberkman" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  neilberkman
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<blockquote>
<p>If anyone is keen to take an early look, I can make time over the next 24hrs to break it out into a new, public github repo.</p>
</blockquote>
<p>I’d love to take a look at it.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="158520" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/charts-for-live-view/25419/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-158520" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="158520"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="158656" data-post-id="158656">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="fklement" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/fklement/120/24995_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  fklement
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Did you already tried it out with live-view?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="158656" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/charts-for-live-view/25419/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-158656" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="158656"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #14"></div>
  </section>
</div>
    <div class="postbit" id="162275" data-post-id="162275">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="alvises" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/alvises/120/2247_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  alvises
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="mindok" data-post="9" data-topic="25419">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mindok/48/13538_2.png" class="avatar"> mindok:</div>
<blockquote>
<p>If anyone is keen to take an early look, I can make time over the next 24hrs to break it out into a new, public github repo.</p>
</blockquote>
</aside>
<p>yes please!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="162275" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/charts-for-live-view/25419/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-162275" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="162275"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #15"></div>
  </section>
</div>
    <div class="postbit" id="162285" data-post-id="162285">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="mindok" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mindok/120/13538_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  mindok
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="alvises" data-post="16" data-topic="25419">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/alvises/48/2247_2.png" class="avatar"> alvises:</div>
<blockquote>
<p>yes please!</p>
</blockquote>
</aside>
<p>Done…</p>
<aside class="quote quote-modified" data-post="1" data-topic="28582">
  <div class="title">
    <div class="quote-controls"></div>
    <img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mindok/48/13538_2.png" class="avatar">
    <div class="quote-title__text-content">
      <a href="https://forum.elixirforum.com/t/contex-a-pure-elixir-server-side-charting-library-generating-svg-output/28582" rel="nofollow">Contex - a pure Elixir server-side charting library generating SVG output</a> <a class="badge-category__wrapper " href="/c/news/announcing/159" rel="nofollow"><span data-category-id="159" style="--category-badge-color: #d2407f; --category-badge-text-color: #FFFFFF; --parent-category-badge-color: #d2407f;" data-parent-category-id="158" data-drop-close="true" class="badge-category --style-square --has-parent"><span class="badge-category__name">Announcing</span></span></a>
    </div>
  </div>
  <blockquote>
    <a name="p-160483-what-is-contex-1" class="anchor" href="#p-160483-what-is-contex-1" aria-label="Heading link" rel="nofollow"></a>What is ContEx?
A pure Elixir server-side data plotting/charting library outputting SVG. 
It has nice barcharts in particular and works great with LiveView. 
Project is here: <a href="https://github.com/mindok/contex" class="inline-onebox-loading" rel="noopener nofollow ugc">https://github.com/mindok/contex</a>. 
There’s a v0.1.0 package up on hex, but probably to link to github for another week or two. 
<a name="p-160483-samples-2" class="anchor" href="#p-160483-samples-2" aria-label="Heading link" rel="nofollow"></a>Samples
The web-site <a href="https://contex-charts.org/" rel="noopener nofollow ugc">https://contex-charts.org/</a> has some interactive samples so you can take a look, but there are some screenshots below so you don’t even have to follow a link <img width="20" height="20" src="https://forum.elixirforum.com/images/emoji/apple/wink.png?v=15" title="wink" alt="wink" class="emoji"> 
The code fo…
  </blockquote>
</aside>
 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="162285" data-batch-url="/posts/batch_likers">
                        6
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/charts-for-live-view/25419/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-162285" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="162285"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #16"></div>
  </section>
</div>
    <div class="postbit" id="166848" data-post-id="166848">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="ondrej-tucek" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/ondrej-tucek/120/11566_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  ondrej-tucek
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Sorry for late answer. I overlooked your question. I haven’t tried yet <img src="https://forum.elixirforum.com/images/emoji/apple/frowning.png?v=15" title=":frowning:" class="emoji" alt=":frowning:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="166848" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/charts-for-live-view/25419/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-166848" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="166848"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #17"></div>
  </section>
</div>
    <div class="postbit" id="213964" data-post-id="213964">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="sb8244" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sb8244/120/18642_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  sb8244
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Author of Real-Time Phoenix</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Sorry to revive an old thread, but I think this may be useful for others. I was looking at doing charts in LiveView this past week. I really wanted charts to be rendered with JS rather than SVG, due to the interactive element.</p>
<p>I found the Chartkick library, but it didn’t work with LiveView (at least for me) due to how it expects script tags to run. I was able to pretty quickly modify chartkick.ex to work with LiveView though.</p>
<aside class="onebox githubgist" data-onebox-src="https://gist.github.com/sb8244/28ef0c216677b4e76523af94bdd2c613">
  <header class="source">

      <a href="https://gist.github.com/sb8244/28ef0c216677b4e76523af94bdd2c613" target="_blank" rel="noopener nofollow ugc">gist.github.com</a>
  </header>

  <article class="onebox-body">
    <h4><a href="https://gist.github.com/sb8244/28ef0c216677b4e76523af94bdd2c613" target="_blank" rel="noopener nofollow ugc">https://gist.github.com/sb8244/28ef0c216677b4e76523af94bdd2c613</a></h4>



  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>I was unsure how to get rid of the <code>raw</code> requirement with Chartkick.ex, but tbh I didn’t spend more than a few minutes thinking about that.</p>
<p>These charts will update if the data source updates, but does so by destroying and re-allocating the chart. That probably isn’t the most efficient thing, but my use case is static 30-day charts.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="213964" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/charts-for-live-view/25419/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-213964" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="213964"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #18"></div>
  </section>
</div>
    <div class="postbit" id="254183" data-post-id="254183">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="axelson" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/axelson/120/26351_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  axelson
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Scenic Core Team</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="mindok" data-post="4" data-topic="25419">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mindok/48/13538_2.png" class="avatar"> mindok:</div>
<blockquote>
<p>Finally, if you are happy to homebrew SVG you could take a look at some D3.js samples - I’ve been porting bits and pieces of the scale and axis libraries over to elixir (not too embarrassing but not ready to release yet)</p>
</blockquote>
</aside>
<p>Hey, did you ever finish porting/releasing this? As a fan of D3.js it would be a very helpful lib to have in Elixir! And it would save me from having to do some annoying mathematical calculations (this is the real reason I’m asking <img src="https://forum.elixirforum.com/images/emoji/apple/joy.png?v=15" title=":joy:" class="emoji" alt=":joy:" loading="lazy" width="20" height="20">)</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="254183" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/charts-for-live-view/25419/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-254183" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="254183"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #19"></div>
  </section>
</div>
    <div class="postbit" id="254187" data-post-id="254187">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="mindok" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mindok/120/13538_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  mindok
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Indeed - Contex has scale &amp; axis - this page shows a few examples: <a href="https://contex-charts.org/scales" class="inline-onebox" rel="noopener nofollow ugc">ContEx Charts</a>.</p>
<p>One thing that’s missing is the ability to override the calculated domain - the “nice” algorithm gets applied by default.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="254187" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/charts-for-live-view/25419/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-254187" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="254187"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #20"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/25419/load_more?page=3">Load more posts (1 remaining)</a>
</div></template></turbo-stream>