JSFiddle

Arun's public fiddles

  • 1bojjo92

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

  • ytdorzrj

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

  • An Example of a Google Bar Chart

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

  • 6wh1awmp

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

  • sj3tvbet

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

  • 21wm5hf5

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

  • qLkjs25L

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

  • u12jf006

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

  • 4oyLhsup

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

  • knLxpbfw

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

  • Simple Pie Chart

    Our pie chart uses intelligent way to arrange it's labels so that they would not overlap. You can try adding even more labels by pressing EDIT button and adding more items to the data provider - the labels will be arranged so that they wouldn't overlap. Of course, at some big number of labels they can start overlapping, but in most cases you don't have this number of slices in pie chart. <h2>Grouping of small slices</h2> Our pie chart can group small slices into the "Others" slice automatically. Try add <code>groupPercent: 5</code> to the charts config - you will see that the smallest slices are grouped into one now. This will also help to avoid overlapping labels, if you have really a lot of them.

  • Lft6hmyf

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

  • 49qbdrst

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

  • L77p7jn5

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

  • Simple Column Chart

    If you take a close look at this chart, you will notice that grid lines are above the columns - equally dividing them into segments. This is an optional feature, of course. It allows you creating the charts close to the ones described by famous data visualization guru, <a href="http://www.edwardtufte.com/">Edward Tufte</a>, in his book "The Visual Display of Quantitative Information". <h2>From columns to bars - one simple step</h2> Click EDIT button on top of the chart, and add this text to the source (anywhere within curly brackets): <strong>"rotate":true,</strong>. Run the script and... The columns should became bars, category axis should be vertical now and value axis - horizontal! This is the only property you change to make this trick. All our Serial charts can be rotated in the same way.

  • arun chart

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