Skip to content

Commit bc7d35d

Browse files
committed
Initial commit.
0 parents  commit bc7d35d

File tree

7 files changed

+688
-0
lines changed

7 files changed

+688
-0
lines changed

Example.m

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
function Example()
2+
% Example: Create sparklines using different data and styles. The following
3+
% code is meant to demo some features and use cases for sparklines.
4+
5+
% Copyright 2021 The MathWorks, Inc.
6+
7+
% Create a sparklines table for Danish stock returns, bond yields, 1922–1999.
8+
% This particular example requires the MATLAB Econometrics Toolbox to access the data.
9+
tableData = load('Data_Danish').DataTable;
10+
11+
% Read table data and call createUIobjects
12+
createUISparklinesGrid(tableData);
13+
14+
% Generate a matrix of normal data.
15+
normalDist = makedist('Normal', 'mu', 0, 'sigma', 1);
16+
Data = random(normalDist, 5, 10);
17+
18+
% Create a column of solid sparklines for normally distrbuted data.
19+
% These sparklines are for the rows of the matrix, which is how sparklines
20+
% are created by default.
21+
createSolidSparklinesColumn(Data);
22+
23+
% Create a row of solid sparklines for normally distributed data
24+
createSolidSparklinesRow(Data);
25+
26+
% Created dashed sparklines with a gradient color style
27+
createDashedGradientSparklines(Data);
28+
29+
% Create bar graph style sparklines with a gradient color style
30+
createBarGradientSparklines(Data);
31+
32+
% Create solid blue dotted sparklines
33+
createSolidBlueDottedSparklines(Data);
34+
end
35+
36+
% Create nested ui objects to demo how sparklines can be used to visualize
37+
% data
38+
function createUISparklinesGrid(tableData)
39+
numVariables = size(tableData, 2);
40+
41+
% Create ui figure to contain ui objects which contain sparklinesComponents.
42+
% Adjust width and height of the uifigure.
43+
f = uifigure;
44+
f.Position(3:4) = [1200 330];
45+
46+
% Create and populate grid for two side-by-side panels
47+
panelGrid = uigridlayout(f, [1 2]);
48+
panelGrid.ColumnWidth = {'fit', '1x'};
49+
leftPanel = uipanel(panelGrid);
50+
rightPanel = uipanel(panelGrid);
51+
52+
% In the leftpanel, create a uigridlayout for the variable names,
53+
% sparklines, and plot buttons
54+
leftGridLayout = uigridlayout(leftPanel, [numVariables, 3]);
55+
leftGridLayout.ColumnWidth = {'fit','fit','fit'};
56+
leftGridLayout.RowHeight = repmat({'fit'},[numVariables, 1]);
57+
58+
% In the right panel, create axes for plotting full-size graphs
59+
% corresponding to sparklines
60+
ax = uiaxes(rightPanel);
61+
ax.Position(3) = 800;
62+
63+
% In the left panel, create sparklineComponents
64+
for colIdx = 1:numVariables
65+
% Create a column of variable names in the leftmost column
66+
varName = tableData.Properties.VariableNames{colIdx};
67+
uilabel(leftGridLayout,'Text', varName);
68+
69+
% Create a column of sparklineComponents in the center column
70+
varData = tableData{:, colIdx};
71+
sparklinesComponent(leftGridLayout, 'Data', varData, ...
72+
'SparklinesLayout', 'row', ...
73+
'DataOrientation', 'column', ...
74+
'ColorStyle', 'gradient');
75+
76+
% Create a plot button in the rightmost column
77+
uibutton(leftGridLayout, 'Text', 'Plot', ...
78+
'ButtonPushedFcn',@(o,e)plotThisData(o,e,ax,varData,varName));
79+
end
80+
81+
function plotThisData(~,~,ax,data,label)
82+
delete(ax.Children);
83+
plot(ax, data, 'k');
84+
title(ax, label);
85+
end
86+
end
87+
88+
% Create a column of solid color (black) sparklines from a matrix of data in a
89+
% uifigure
90+
function createSolidSparklinesColumn(Data)
91+
f = uifigure;
92+
h = sparklinesComponent(f, 'Data', Data);
93+
f.Position = [0 0 210 300];
94+
h.Position = [0 0 210 300];
95+
end
96+
97+
% Create a row of solid color (black) sparklines from a matrix of data in a
98+
% uifigure
99+
function createSolidSparklinesRow(Data)
100+
f = uifigure;
101+
h = sparklinesComponent(f, 'Data', Data);
102+
f.Position = [0 0 1500 100];
103+
h.Position = [0 0 1500 100];
104+
105+
% Change the property SparklinesLayout such that the sparklines are
106+
% displayed in a row.
107+
h.DataOrientation = 'column';
108+
h.SparklinesLayout= 'row';
109+
end
110+
111+
% Create dashed sparklines with a gradient color style
112+
function createDashedGradientSparklines(Data)
113+
f = uifigure;
114+
h = sparklinesComponent(f, 'Data', Data);
115+
f.Position = [0 0 210 300];
116+
h.Position = [0 0 210 300];
117+
118+
% Change the line style and color style of the sparklines.
119+
h.SparklineStyle = "dashed";
120+
h.ColorStyle = "gradient";
121+
end
122+
123+
% Create bar graph style sparklines with a gradient color style
124+
function createBarGradientSparklines(Data)
125+
f = uifigure;
126+
h = sparklinesComponent(f, 'Data', Data);
127+
f.Position = [0 0 210 300];
128+
h.Position = [0 0 210 300];
129+
130+
% Change the line style and color style of the sparklines.
131+
h.SparklineStyle = "bar";
132+
h.ColorStyle = "gradient";
133+
end
134+
135+
% Create solid blue dotted sparklines
136+
function createSolidBlueDottedSparklines(Data)
137+
f = uifigure;
138+
h = sparklinesComponent(f, 'Data', Data);
139+
f.Position = [0 0 210 300];
140+
h.Position = [0 0 210 300];
141+
142+
% Change the color, style, and width of the sparklines.
143+
h.SparklineColor = [0 0 1];
144+
h.SparklineStyle = "dotted";
145+
h.LineWidth = 2;
146+
end

README.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Sparklines Component
2+
3+
Version: 1.0
4+
5+
This component creates small graphs which show the general trend of the data in each row/column. Sparklines are meant to summarize data in a concise and easy-to-understand way, such that in e.g. a table, data trends for each row/column can be quickly observed and compared.
6+
7+
![Example sparklinesComponent](./exampleSC.jpg)
8+
9+
## Syntax
10+
* `sparklinesComponent('Data', data)` create a ui component which creates sparklines for each row in `data`. The sparklines are by default stacked in a column.
11+
* `sparklinesComponent(___,Name,Value)` specifies additional options for the sparkline component using one or more name-value pair arguments. Specify the options after all other input arguments.
12+
* `sparklinesComponent(parent,___)` create the sparkline component in the specified ui parent (e.g. uifigure, uigridlayout, etc.).
13+
* `h = sparklinesComponent(___)` returns the sparklineComponent object. Use h to modify properties of the component after creating it.
14+
15+
## Name-Value Pair Arguments/Properties
16+
* `Data` (n x m numeric matrix) matrix which contains the data used to create the sparklines.
17+
* `DataOrientation` (string) string describing whether a sparkline is created for each row (`'row'`) or for each column (`'column'`).
18+
* `SparklinesOrientation` (string) string describing whether the sparklines are stacked in a column (`'col'`) or are arranged side-by-side in a row (`'row'`). 
19+
* `ColorMode` (string) string describing whether the sparklines are one solid color (`'solid'`) or use a gradient based on minimum and maximum values in Data (`'gradient'`).
20+
* `LineColor` (1 x 3 numeric vector) RGB triple to use for sparklines if ColorMode is `'solid'`.
21+
* `LimitColors` (2 x 3 numeric matrix) A pair of RGB triples to use as the minimum and maximum colors of the sparklines' color gradient corresponding to the minimum and maximum values in Data if ColorMode is `'gradient'`.
22+
* `LineWidth` (double) line width of the sparklines.
23+
* `SparklineStyle` (string) string describing the line style of the sparklines (`'line'`, `'dotted'`, `'dashed'`, `'bar'`).
24+
25+
## Example
26+
Generate a matrix of normal data. Create sparklines for the rows of the matrix, which is how sparklines are created by default.
27+
```
28+
normalDist = makedist('Normal', 'mu', 0, 'sigma', 1);
29+
Data = random(normalDist, 10, 10);
30+
31+
f = uifigure;
32+
h = sparklinesComponent(f, 'Data', Data);
33+
```

SECURITY.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Reporting Security Vulnerabilities
2+
3+
If you believe you have discovered a security vulnerability, please report it to
4+
[[email protected]](mailto:[email protected]). Please see
5+
[MathWorks Vulnerability Disclosure Policy for Security Researchers](https://www.mathworks.com/company/aboutus/policies_statements/vulnerability-disclosure-policy.html)
6+
for additional information.

exampleSC.jpg

52 KB
Loading

license.txt

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
Copyright (c) 2021, The MathWorks, Inc.
2+
All rights reserved.
3+
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
4+
1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
5+
2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
6+
3. In all cases, the software is, and all modifications and derivatives of the software shall be, licensed to you solely for use in conjunction with MathWorks products and service offerings.
7+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
8+
9+
10+
11+

0 commit comments

Comments
 (0)