JSFiddle

Julio's public fiddles

  • 2f4n16ay

    No-Library (pure JS), HTML, CSS, JavaScript

  • aporcwe7

    No-Library (pure JS), HTML, CSS, JavaScript

  • Trocar conteúdo de uma div com Javascript

    Change content div with Javascript

  • Suporte Campos HTML5

    Trocar campos html5 por javascript com recursos correspondentes em navegadores que não dão suporte a campos html5

  • Foto com Créditos em CSS+JS

    Credit photos with CSS+JS

  • Marca d'água com CSS para documentos

    Watermarks with pure CSS for documents

  • Line Chart with Scroll and Zoom

    All our serial charts (and actually XY chart too) can be zoomed-in, scrolled and panned. All you have to do is add a scrollbar to the chart. This is one of the most important features of charts, especially when dealing with large data sets. <h2>Right approach to zooming</h2> When displaying a zoomed-in chart we do recalculate min/max of the selected period (although you can disable this if you want) and we draw a graph of only selected period. This feature allows you to understand the data of selected period easily, solves performance issues. A lot of charting libraries simply draw one big image and then the scrolling is done by simply moving this image. This is very wrong approach in most cases, as a) performance is poor b) imagine - you have daily data of let's say 5 years and your values increased a lot during this time. If min/max of zoomed-in period is not recalculated, when zoomed to early periods, you will only see some smooth line close to the axis and a lot of empty space above it. This graph won't tell a lot for your users. <h2>Intelligent date-placing algorithm</h2> Try to zoom out this chart - you will see that the grid lines are placed at the beginning of the months (they will always show the first day of the month), at the place where new year started, the date format is different - instead of the month name you can see the year number. You can modify date formats in any way you need and set a different date format for each period. Try to scroll the chart - you will see that the dates are always kept the same, they do not fluctuate and scrolling is done smoothly. Now, go to our competitors, find a date based chart (if they have one) and try to perform all these tricks. We bet you will notice the difference. <h2><span style="line-height: 1.42857143;">Zooming or scrolling chart with mouse wheel</span></h2> You can zoom in and out the chart with mouse wheel. If you press shift while rotating it, the chart will be scrolled. You can make it opposite - zoom if shift is pressed and scroll if it isn't. <strong>mouseWheelZoomEnabled</strong> and <strong>mouseWheelScrollEnabled</strong> properties are responsible for this.

  • Graph with Pure CSS3

    Graphs generated with pure css3 ready to be energized with PHP or similar server-side language