components/chartist/index.html at master · MobileUI/components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!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>