Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
210 lines (192 sloc) 7.37 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Dosis|Raleway:400,700|Roboto:300,400,900," rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css">
<link rel="stylesheet" href="../base/reset.css">
<link rel="stylesheet" href="../base/mobileui.css">
<link rel="stylesheet" href="../base/colors.css">
<link rel="stylesheet" href="../base/icons.css">
<link rel="stylesheet" href="../header/style.css">
<link rel="stylesheet" href="../grid/style.css">
<link rel="stylesheet" href="../list/style.css">
<link rel="stylesheet" href="../chartist-plugin-tooltip/style.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../assets/css/master.css">
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="../chartist-plugin-tooltip/script.js"></script>
<style>
.content-land { margin-left:50px}
</style>
</head>
<body class="content-land">
<!-- BEGIN -->
<h2 class="title-doc" id="_DOC_GENERATE_SPACE_">Chartist</h2>
<p>
You may think that this is just yet an other charting library. But <a href="https://gionkunz.github.io/chartist-js/" target="_blank">Chartist.js</a> is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included.
</p>
<p>
You can use <a href="#colors">colors theme</a> and <a href="#icons">icons</a> in Chartist.
<p>
To use this component you need install with the command:
</p>
<pre>mobileui install chartist</pre>
<!-- _DOC_GENERATE_CSS_DOC -->
<p>You can use all features the <a href="#base">base</a> MobileUI in this component.</p>
<textarea class="bind-code" header-absolute="true" mode="text/html" border="true">
<div class="header purple">
<button class="left icon ion-android-arrow-back"></button>
<h1>Chartist example</h1>
<button class="right icon ion-refresh"></button>
</div>
<div class="content has-header">
<div class="purple chartist-white" id="chartist-line"></div>
<div class="purple chartist-white" id="chartist-bar"></div>
<p class="padding text-big text-light align-center">
Good examples using Chartist!
</p>
<div id="chartist-pie"></div>
</div>
<script type="text/javascript">
new Chartist.Line('#chartist-line', {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
series: [
[1, 5, 2, 5, 4, 3]
]
});
new Chartist.Bar('#chartist-bar', {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
series: [
[5, 4, 3, 7, 5, 10],
[3, 2, 9, 5, 4, 6]
]
});
new Chartist.Pie('#chartist-pie', {
series: [5, 3, 4]
});
</script></textarea>
<p>Your can use the primary scheme colors and combination with others components. Next example use <code>header</code>, <code>grid</code> and <code>list</code>.</p>
<textarea class="bind-code" header-absolute="true" mode="text/html" border="true">
<div class="header blue-grey-800">
<button class="left icon ion-navicon"></button>
<h1>Strauss Coffe Roasters</h1>
</div>
<div class="header sub blue-grey-900 align-center">
<button class="left icon ion-ios-arrow-left text-blue"></button>
<h1 class="text-blue">July 20, 2017</h1>
<button class="right icon ion-ios-arrow-right text-blue"></button>
</div>
<div class="content has-header has-sub-header padding">
<p class="text-blue text-big">Sales Summary</p>
<div class="row">
<div class="col-25">
<h1 class="text-strong text-big">$1,854.86</h1>
<p>Gross Sales</p>
</div>
<div class="col align-center">
<h1 class="text-strong text-big">341</h1>
<p>Sales</p>
</div>
<div class="col-25">
<h1 class="text-strong text-big">$5.44</h1>
<p>Average Sale</p>
</div>
</div>
<div class="chartist-blue chartist-big text-black" id="chartist-strauss"></div>
<div class="list">
<div class="item">
<h2>Hot Drinks</h2>
<span class="right text-strong">$762.00</span>
</div>
<div class="item">
<h2>Cold Drinks</h2>
<span class="right text-strong">$634.25</span>
</div>
<div class="item">
<h2>Pastries</h2>
<span class="right text-strong">$188.00</span>
</div>
<div class="item">
<h2>Merchandise</h2>
<span class="right text-strong">$126.76</span>
</div>
</div>
</div>
<script type="text/javascript">
new Chartist.Bar('#chartist-strauss', {
labels: ['6AM', '7AM', '8AM', '9AM', '10AM', '11AM', '12PM', '1PM'],
series: [
[56, 160, 220, 350, 210, 180, 320, 310]
]
});
</script></textarea>
<p>
Below another example with combined charts using <code>grid</code> and component <code>chartist-plugin-tooltip</code>.
In this case you need install plugin with command <code>mobileui install chartist-plugin-tooltip</code>
</p>
<textarea class="bind-code" header-absolute="true" mode="text/html" border="true">
<div class="header black">
<button class="left icon ion-android-arrow-back"></button>
<h1>Dashboard Sales and Finance</h1>
</div>
<div class="content has-header black">
<div class="row padding">
<div class="col-50">
<div id="chartist-sale" class="chartist-green text-white"></div>
</div>
<div class="col-50">
<div id="chartist-platform" class="chartist-red text-white"></div>
</div>
</div>
<div class="row">
<div class="col">
<div class="chartist-blue chartist-huge text-white" id="chartist-region"></div>
</div>
</div>
</div>
<div class="row align-center">
<div class="col green padding">
<h1 class="text-huge text-strong">65</h1>
<small class="text-light">Tickets</small>
</div>
<div class="col red padding">
<h1 class="text-huge text-strong">33</h1>
<small class="text-light">Leads</small>
</div>
</div>
<script type="text/javascript">
new Chartist.Pie('#chartist-sale', {
labels: ['Services', 'Licenses', 'Support'],
series: [560, 345, 56]
});
new Chartist.Pie('#chartist-platform', {
labels: ['Android', 'iOS', 'Windows'],
series: [183, 234, 45]
});
new Chartist.Bar('#chartist-region', {
labels: ['Brazil', 'Europe', 'The Americas', 'Asia', 'Russia'],
series: [
[
{meta: 'Total', value: 735 },
{meta: 'Total', value: 345},
{meta: 'Total', value: 565},
{meta: 'Total', value: 56},
{meta: 'Total', value: 23}
]
]
}, {
plugins: [
Chartist.plugins.tooltip()
]
});
</script></textarea>
<!-- DONE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="../assets/js/main.js"></script>
</body>
</html>