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