-
Notifications
You must be signed in to change notification settings - Fork 0
/
example_chartist-line-chart.html
113 lines (95 loc) · 2.46 KB
/
example_chartist-line-chart.html
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
<?
/*
Import class "cdo: Chartist Data Object" and create instance
Read data to be displayed in line chart from database or alike
*/
$input_data['xaxis'] = $your_array_of_dates
$input_data['yaxis'] = $your_array_of_productprices
$axis_types['xaxis'] = "days";
$axis_types['yaxis'] = "prices";
$axis_titles['xaxis'] = "Date";
$axis_titles['yaxis'] = "Price in EUR";
$cdo = new cdo($input_data, $axis_types, $axis_titles);
$labels = $cdo->getLabels();
$series = $cdo->getSeries();
?>
<!doctype html>
<html lang="en">
<head>
<!-- html header definition goes here -->
<!-- Chartist.js: Assumed to be stored in ../chartist/ -->
<link rel="stylesheet" href="chartist/chartist.min.css">
<script src="chartist/chartist.min.js"></script>
<link rel="stylesheet" href="chartist/chartist-plugin-tooltip.css">
<script src="chartist/chartist-plugin-tooltip.min.js"></script>
<script src="chartist/chartist-plugin-axistitle.js"></script>
<script src="chartist/chartist-plugin-pointlabels.js"></script>
</head>
<body>
<!-- own html code and alike goes here -->
<div class="ct-chart ct-golden-section" id="chartist1">
</div>
<script>
function loadChart()
{
var data =
{
labels: <?=$labels['data'];?>,
series: [
<?=$series['data'];?>
]
};
var options =
{
low: <?=$series['minimum'];?>,
high: <?=$series['maximum'];?>,
height: 400,
fullWidth: true,
chartPadding:
{
left: 25,
right: 20
},
axisY:
{
offset: 20
},
plugins:
[
Chartist.plugins.tooltip(),
Chartist.plugins.ctPointLabels(
{
textAnchor: 'middle'
}),
Chartist.plugins.ctAxisTitle(
{
axisX:
{
axisTitle: '<?=$axis_titles["xaxis"];?>',
axisClass: 'ct-axis-title',
offset:
{
x: 0,
y: 35
},
textAnchor: 'middle'
},
axisY:
{
axisTitle: '<?=$axis_titles["yaxis"];?>',
axisClass: 'ct-axis-title',
offset:
{
x: 5,
y: 0
},
textAnchor: 'middle',
flipTitle: false
}
})
]
};
new Chartist.Line('#chartist1', data, options);
}
</script>
</body>