Charts
Links in Big Number charts
Bullet chart
Sparklines in Big Number charts
Chart heights
Chart annotations
Choropleth map
Force-directed graph
Funnel chart
Geographic heat map
Google Maps with markers
Heat map
Hive plot
Horizontal bar chart
Network matrix
Creating Chart Annotations using Matplotlib
Creating Histograms using Pandas
Creating Horizontal Bar Charts using Pandas
How to Create R Histograms & Stylize Data
Creating Horizontal Bar Charts using R
Sunburst chart
State choropleth map
Word cloud
World choropleth map
Zipcode choropleth map
How to implement gallery examples using the HTML editor
Sparklines in Big Number charts
Mode's Big Number charts are great for communicating high-level trends. Adding a sparkline to a Big Number chart shows your audience how the metric has performed over time.
Add a sparkline to a Big Number chart
The example below shows a Big Number chart revealing the count of San Francisco crime incidents weekly, and features a sparkline showing the trend over time.
Click Powered by Mode to duplicate this report and add a sparkline to your Big Numbers chart. Learn more about using HTML to customize your reports.
Add the stylesheet link and script tag to the top of the HTML:
<link rel="stylesheet" href="https://mode.github.io/alamode/alamode.min.css">
<script src="https://mode.github.io/alamode/alamode.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.js'></script>
This tag calls back to an open-source library called alamode.js, which provides an easy way to build some of our users' favorite visualizations.
Add the customizable snippet at the bottom of the HTML:
<script>
alamode.bigNumberSparkline(
{
"chart_id":"chart_52fb8c96df3f",
"query_name": "Query 1",
"value_column": "crime_incidents",
"x_axis_column": "week"
}
)
</script>
chart_id
: The ID of the Big Number chart you want to turn into a link. You’ll find this ID in the pre-populated HTML code in a line that looks like this:<mode-chart id="chart_52fb8c96df3f" dataset="dataset" options="chart_options"></mode-chart>
.query_name
: The name of the query that returns the Big Number chart data. If you update the name of the query, you’ll need to update it here as well.value_column
: The dataset column that contains the y-axis values of your metric.x_axis_column
: The dataset column that returns the values on your chart’s x-axis.