|
|
SheerPower Charts: Transform Data into Stunning Visuals
SheerPower includes a powerful charting facility to visualize data in various formats such as bar charts, line charts, scatter plots, Pie, and doughnut charts. This tutorial will guide you through creating charts using SheerPower's simple and intuitive charting statements.
Main Features of SheerPower Charts
- Multiple Chart Types: Choose from bar, line, pie, donut, and scatter charts.
- Dynamic Configuration: Customize colors, labels, axes, and point radii.
- Simple Syntax: Intuitive chart creation with minimal effort.
- Responsive Output: Charts are optimized for display across devices and include built-in interactive tooltips for all data points.
- Stacked bars: Use the stacked option to produce stacked bars.
- Data Mining: Any data point can be associated with a URL using the LINK option. The link becomes active when the user clicks on the corresponding data point.
Basic Structure
Creating charts involves the following simple steps:
- START CHART: Define the chart type, title, and output file.
- ADD CHART: Add data points with x-axis and y-axis values, labels, and styles.
- SET CHART: dynamicaly adjust colors, point radius, and others on a per-data point basis.
- END CHART: Finalize and render the chart.
Bar Chart with two Datasets
(Show/Hide Code)
dim freq1(20) // Array of frequency counts for dataset one
dim freq2(20) // Array of frequency counts for dataset two
! Generate random numbers and count their frequencies for datasets
for i = 1 to 50
random_number = rnd(20)
freq1(random_number) = freq1(random_number) + 1 // add to the frequency
next i
for i = 1 to 50
random_number = rnd(20)
freq2(random_number) = freq2(random_number) + 1 // add to the frequency
next i
outfile$ = filespec$("@bar_chart.html")
start chart: type "bar",
title "Random Number Distribution",
title_style "color:red; font-size: 20;",
output outfile$,
y_axis_label "Frequency"
! Add dataset one
for n = 1 to size(freq1)
if freq1(n) = 0 then freq1(n) = 1
add chart: x_axis str$(n),
y_axis str$(freq1(n)),
value str$(freq1(n)),
label "Blue one ",
background_Color "blue",
dataset "Dataset one"
next n
! Add dataset two
for n = 1 to size(freq2)
if freq2(n) = 0 then freq2(n) = 1
add chart: x_axis str$(n),
y_axis str$(freq2(n)),
value str$(freq2(n)),
label "Green two",
background_Color "green",
dataset "Dataset Two"
next n
end chart
Enhanced Bar Chart Example
In this example, we demonstrate how to create a colorful bar chart with SheerPower. The chart showcases monthly revenue data with custom styles for the canvas, title, axes, and tick labels.
(Show/Hide Code)
! Define the chart output
outfile$ = filespec$("@enhanced_bar_chart.html")
! Start chart with colorful settings
start chart: type "bar",
output outfile$,
canvas_style "background-color: lightgrey",
title "Monthly Revenue",
title_style "color:darkblue; font-size:24px; font-weight:bold;",
x_axis_label "Months of Sales",
y_axis_label "Revenue ($)",
x_style "color:green; font-size:16px; font-weight:bold;",
y_style "color:red; font-size:16px; font-weight:bold;",
x_tick_style "color:blue; font-size:14px;",
y_tick_style "color:purple; font-size:14px;"
! Add data points with labels and background colors
add chart: x_axis "January", y_axis "1200", label "January Revenue", background_Color "blue"
add chart: x_axis "February", y_axis "1500", label "February Revenue", background_Color "green"
add chart: x_axis "March", y_axis "1800", label "March Revenue", background_Color "orange"
! Finalize the chart
end chart
! Launch the chart in a browser
pass url: outfile$
print "Chart saved to " + outfile$
end
Line Chart with two Datasets
(Show/Hide Code)
dim months$[12] // Array to store month labels
dim sales1[12] // Array to store sales data for dataset 1
dim sales2[12] // Array to store sales data for dataset 2
! Populate month labels
months$[1] = "January"
months$[2] = "February"
months$[3] = "March"
months$[4] = "April"
months$[5] = "May"
months$[6] = "June"
months$[7] = "July"
months$[8] = "August"
months$[9] = "September"
months$[10] = "October"
months$[11] = "November"
months$[12] = "December"
! Generate random sales data for each month
for i = 1 to size(sales1)
sales1[i] = rnd(1000) + 100 ! Random sales data between 500 and 1500 for dataset 1
sales2[i] = rnd(800) + 300 ! Random sales data between 700 and 1500 for dataset 2
next i
outfile$ = filespec$("@line_chart.html")
! Start the line chart
start chart: type "line",
title "Monthly Sales Data Comparison",
output outfile$,
x_axis_label "Month",
y_axis_label "Sales ($)"
! Add data points for dataset 1
for i = 1 to size(sales1)
add chart: x_axis months$[i],
y_axis str$(sales1[i]),
value str$(sales1[i]),
label "Dataset 1 - " + months$[i],
background_Color "blue",
border_Color "blue",
dataset "Dataset 1"
next i
! Add data points for dataset 2
for i = 1 to size(sales2)
add chart: x_axis months$[i],
y_axis str$(sales2[i]),
value str$(sales2[i]),
label "Dataset 2 - " + months$[i],
background_Color "red",
border_Color "red",
dataset "Dataset 2"
if months$[i] = "July"
set chart: point_radius 8,
background_color 'green',
border_Color "green",
link "https://www.cnn.com"
end if
next i
end chart
Pie Chart
(Show/Hide Code)
dim numbers(5) // Array to store frequency counts
set seed 1718039297
! Generate 50 random numbers and count their occurrences
for i = 1 to 50
random_number = rnd(5)
numbers(random_number) = numbers(random_number) + 1
next i
outfile$ = filespec$("@pie_chart.html")
start chart: type "pie",
title "Random Number Distribution",
output outfile$,
size "600px",
legend_Position "right",
animation_Type "easeInOutBounce",
animation_Duration 2000
! Array of background colors for pie slices
dim colors$(5)
colors$(1) = "#FFD700" ! Gold
colors$(2) = "#FF4500" ! OrangeRed
colors$(3) = "#00CED1" ! DarkTurquoise
colors$(4) = "#ADFF2F" ! GreenYellow
colors$(5) = "#9370DB" ! MediumPurple
! Add data points to the chart
for n = 1 to size(numbers)
if numbers(n) = 0 then numbers(n) = 1 ! Ensure no zero values for the pie chart
add chart: x_axis str$(n),
y_axis str$(numbers(n)),
value str$(numbers(n)),
label "Number " + str$(n),
background_Color colors$(n)
next n
end chart
Donut Chart
(Show/Hide Code)
dim numbers(5) // Array to store frequency counts
set seed 1718039297
! Generate 50 random numbers and count their occurrences
for i = 1 to 50
random_number = rnd(5)
numbers(random_number) = numbers(random_number) + 1
next i
outfile$ = filespec$("@donut_chart.html")
start chart: type "pie",
title "Random Number Distribution",
output outfile$,
size "600px",
legend_Position "right",
animation_Type "easeInOutBounce",
animation_Duration 2000
! Array of background colors for pie slices
dim colors$(5)
colors$(1) = "#FFD700" ! Gold
colors$(2) = "#FF4500" ! OrangeRed
colors$(3) = "#00CED1" ! DarkTurquoise
colors$(4) = "#ADFF2F" ! GreenYellow
colors$(5) = "#9370DB" ! MediumPurple
! Add data points to the chart
for n = 1 to size(numbers)
if numbers(n) = 0 then numbers(n) = 1 ! Ensure no zero values for the pie chart
add chart: x_axis str$(n),
y_axis str$(numbers(n)),
value str$(numbers(n)),
label "Number " + str$(n),
background_Color colors$(n)
next n
end chart
Scatter Plot Chart
(Show/Hide Code)
dim numbers(20) // Array to store random numbers
set seed 1718039297
! Generate 20 random numbers between 1 and 100
for i = 1 to size(numbers)
numbers(i) = rnd(100)
next i
outfile$ = filespec$("@scatter_chart.html")
start chart: type "scatter",
title "Odd vs Even Numbers Scatter Plot",
output outfile$,
size "800px",
legend_Position "top",
animation_Type "linear",
animation_Duration 1500
! Define colors for odd and even numbers
odd_color$ = "green"
even_color$ = "blue"
! Add data points to the chart
for i = 1 to size(numbers)
if mod(numbers(i), 2) = 0 then
background_color$ = even_color$
else
background_color$ = odd_color$
end if
ynum = numbers(i)
add chart: dataset 'Middle',
x_axis str$(i), ! Use the index as the x-axis value
y_axis str$(numbers(i)), ! The random number as the y-axis value
value str$(numbers(i)),
label "Index " + str$(i),
background_Color background_color$,
border_Color background_color$,
point_radius 5
if ynum >= 80
set chart: dataset 'Big',
background_Color 'gold',
border_Color 'gold',
point_radius 8
end if
if ynum <=20
set chart: dataset 'Small',
background_Color 'red',
border_Color 'red',
point_radius 8
end if
next i
end chart
Objective
Create a line chart from a CSV file, using clusters .
Here is a sample program that uses two datasets to compare monthly daily average temperatures between Chicago and San Diego.(Show/Hide Code)
cluster mydata:month$, chicago, san_diego
cluster input name '@daily_temp_averages.csv', headers 1: mydata
outfile$ = filespec$('@temperature_line_chart.html')
start chart: type "line",
title "Monthly Average temperature Comparison",
output outfile$,
x_axis_label "Month",
y_axis_label "Daily Temperature"
collect cluster mydata
add chart: x_axis mydata->month$,
y_axis str$(mydata->chicago),
background_Color "red",
border_Color "red",
dataset "Chicago Temperatures",
label "Chicago"
end collect
mylink$ = "https://en.wikipedia.org/wiki/San_Diego"
collect cluster mydata
add chart: x_axis mydata->month$,
y_axis str$(mydata->san_diego),
background_Color "blue",
border_Color "blue",
dataset "San Diego Temperatures",
label "San Diego"
if mydata->month$ = "July"
set chart: background_color "green",
border_Color "green",
link mylink$
end if
end collect
end chart
pass nowait, url: outfile$
print 'Please close this window when done'
end
Here is the data for the program:
Month,Chicago,San Diego
January,26.4,57.4
February,30.6,58.1
March,39.4,59.4
April,50,61.5
May,60.4,63.6
June,70.1,67.5
July,75.9,71
August,74.6,72.4
September,67.8,71.6
October,55.7,68.6
November,43,62.8
December,30.9,57.8
Inserting Charts into Web Pages
This is how charts are typically inserted into webpages:
<center>
<iframe src="/html/temperature_bar_chart.html" width="700" height="450"></iframe>
</center>
This is how charts are typically inserted into webpages:
<center>
<iframe src="/html/temperature_bar_chart.html" width="700" height="450"></iframe>
</center>
Below are two interactive graphs. Hover over the plotted data for tooltips. The green data is clickable!
Change the chart type from
type "line" to type "bar" and we get this chart:
The most common mistake when coding charts is incorrect use of commas
between parameter pairs. This often includes either using too many or too few commas,
with one of the most frequent errors being the omission of a trailing comma at the end of a line.
Advanced Features
- Dynamic Point Radii: Adjust
point_radiusfor scatter or line charts.set chart: point_radius 10 - Custom Colors: Set
background_Colorandborder_Colorfor individual points.set chart: background_Color "gold", border_Color "black", tooltip "click for more', link "https://www.wikipedia.org/" - Tooltips and Interactivity: Tooltips are automatically provided. They interactively display labels and values on hover. You can add your own tooltips as well.
Working with Large Data Sets in SheerPower
When dealing with large data sets, generating charts directly from the entire data set might be impractical due to size or performance constraints. Instead, sampling or summarizing the data before creating a chart is often a more efficient approach.SheerPower excels in these tasks with its ability to process large data sets rapidly. Incorporating sampling and summarization directly into your chart generation code can significantly enhance performance and usability.
START CHART Parameter Reference
The START CHART statement initializes the chart and sets global properties.
The following table lists the supported parameters and their purposes:
(Show/Hide Table)
| Parameter | Description | Datatype |
|---|---|---|
| canvas_style | Specifies CSS styles for the entire canvas that contains the chart. | string |
| title | Specifies CSS styles for the chart title that displays above the chart. | string |
| title_style | Specifies the chart title using any CSS styles. | string |
| output | Defines the output file name for the generated chart HTML. | string |
| type | Specifies the type of chart (e.g., bar, line, scatter, pie, etc.). | string |
| size | Sets the chart size. | number |
| background_Color | Defines the overall background color of the chart. | string |
| font | Sets the default font for text in the chart. | string |
| legend_Position | Specifies the position of the legend (e.g., top, bottom). | string |
| stacked | Creates stacked bars for multi-dataset bar graphs. | boolean |
| default_Colors | Sets the default colors for datasets if not individually specified. | array |
| animation_Type | Defines the type of animation used when the chart is rendered. | string |
| animation_Duration | Specifies the duration of the animation in milliseconds. | number |
| x_Axis_Label | Sets the label for the X-axis. | string |
| y_Axis_Label | Sets the label for the Y-axis. | string |
| x_Axis_Label | Specifies the label for the X-axis. | string |
| y_Axis_Label | Specifies the label for the Y-axis. | string |
| x_style | Defines the CSS style for the X-axis label. Supported properties:
color:, font-style:, font-weight:,
font-family:, font-size:, line-height:.
|
string |
| y_style | Defines the CSS style for the Y-axis label. Supported properties:
color:, font-style:, font-weight:,
font-family:, font-size:, line-height:.
|
string |
| x_tick_style | Defines the CSS style for the X-axis ticks (interval markers). Supported properties:
color:, font-style:, font-weight:,
font-family:, font-size:, line-height:.
|
string |
| y_tick_style | Defines the CSS style for the Y-axis ticks (interval markers). Supported properties:
color:, font-style:, font-weight:,
font-family:, font-size:, line-height:.
|
string |
start chart: type "bar",
title "Monthly Revenue",
output "revenue_chart.html",
size "800x600",
x_axis_label "Month",
y_axis_label "Revenue"
ADD CHART and SET CHART Parameter Reference
The ADD CHART statement defines a new data point or dataset.
The SET CHART statement modifies properties of an existing dataset or
data point.
The following table lists the supported parameters and their purposes:
(Show/Hide Table)
| Parameter | Description | Datatype |
|---|---|---|
| dataset | Datasets are used to separate data points into groupings. | array |
| label | Specifies the label for the dataset or data point, often displayed in the legend or tooltips. | string |
| x_axis | Defines the X-axis value for the data point. | typically a number as a string |
| y_axis | Defines the Y-axis value for the data point. | typically aa number as a string |
| value | Specifies the value represented by the data point, often used for tooltips or labels. | Typically a number as a string |
| percentage | Defines the percentage value for pie charts or similar visualizations. | number |
| background_Color | Sets the background color of the dataset or data point. | string |
| border_Color | Sets the border color of the dataset or data point. | string |
| width | Defines the width of the dataset element, such as bars in a bar chart. | number |
| height | Defines the height of the dataset element, applicable to certain chart types. | number |
| text_Color | Sets the text color for labels or tooltips associated with the dataset. | string |
| tooltip | Customizes the tooltip content for the dataset or data point. | string |
| highlight | Specifies whether the data point or dataset should be highlighted during interactions. | boolean |
| point_radius | Sets the radius of points in scatter or line charts. | number |
| link | Makes the point clickable, linking to a URL. | string |
Example 1: Adding New Data Points with Custom Properties
add chart: x_axis = "January",
y_axis = "1200",
label = "Revenue",
background_Color = "blue",
border_Color = "darkblue",
point_radius = 5
Example 2: Updating Data point Properties with SET CHART
set chart: background_Color = "gold",
border_Color = "darkgoldenrod",
point_radius = 8
Summary
SheerPower charts are a simple yet powerful way to visualize data. The
start chart, add chart, set chart, and
end chart statements provide a clear and intuitive workflow for quickly creating
visually compelling charts. Supported types of charts include:
- Bar Chart: Displays data points expressed by vertical bars (
type 'bar'). The bars can also be stacked using theSTART CHARTstacked true option. - Line Chart: Displays data points connected by lines (
type 'line'). - Pie Chart: Circular chart divided into slices to show proportions (
type 'pie'). - Doughnut Chart: Similar to a pie chart but with a hole in the center (
type 'doughnut'). - Scatter Chart: Displays data points on an x-y Cartesian plane without
connecting lines (
type 'scatter'). You can also make Bubble Charts by varying the pointer_radius usingADD CHARTorSET CHART.
|
Hide Description
|
|
|
Enter or modify the code below, and then click on RUN |
|
Looking for the full power of Sheerpower?
Check out the Sheerpower website. Free to download. Free to use. |
