Inline Single Line Legend
HTML
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>
CSS
CSS
//No CSS for this example
JavaScript
JavaScript
const series = [
{ name: "Series of Applesauce", id: "A", stack: "default", data: { index: 1 } },
{ name: "Series of Banana Split", id: "B", stack: "default", data: { index: 2 } },
{ name: "Series of Cantaloupe", id: "C", stack: "default", data: { index: 3 } },
{ name: "Series of Date Cake", id: "D", stack: "default", data: { index: 4 } },
{ name: "Series of Eggplant", id: "E", stack: "default", data: { index: 5 } },
{ name: "Series of Fig Tree", id: "F", stack: "default", data: { index: 6 } },
{ name: "Series of Grapefruit", id: "G", stack: "default", data: { index: 7 } },
{ name: "Series of Oranges", id: "H", stack: "default", data: { index: 8 } },
];
function genRandomData(tstamp) {
const val = [tstamp];
const numSeries = series.length;
for(let i = 0; i < numSeries; i++) {
val.push(Math.random() * 2000);
}
return val;
}
const settings = {
container: "demo",
data: {
units: ["1 minute", "1 hour"],
dataFunction: function (from, to, step, success, fail) {
var delta = 5 * 60 * 1000;
let tstamp = Date.UTC(2000, 0, 1);
let last = Date.UTC(2000, 0, 3);
let first = tstamp;
let res = [];
while (tstamp < last) {
res.push(genRandomData(tstamp));
tstamp += delta;
}
success({ unit: step, values: res, from: first, to: last, dataLimitFrom: first, dataLimitTo: last });
}
},
series,
legend: {
enabled: true,
displayMode: "inline",
height: 10,
panel: {
side: "top",
}
}
};
new ZoomCharts.TimeChart(settings);
Data
Data
//No separate data for this example