Time Chart - Gradient Columns - Various different gradient setups
Columns with various different gradient setups
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
var data = {
dataLimitFrom: 1279408157,
dataLimitTo: 1384253671,
unit: "M",
values: [
[1358620069, 123.43, 30.22], [1360955055, 34.51541, 100.31], [1363536829, 95.7, 50.42],
[1366088526, 266, 220.67], [1368368125, 141.42236, 170.39], [1371180511, 130.0, 82.302],
[1373758345, 111.652, 79.883], [1376745412, 148.7, 109.101], [1379147545, 148.90893, 70.485],
[1382024434, 133.4, 150.398], [1383881325, 195, 220.201]
]
};
var t = new TimeChart(
{
container: document.getElementById("demo"),
data:
{
units: ["M"],
timestampInSeconds: true,
preloaded: data,
},
navigation: {
initialDisplayPeriod: "1382024434000 > 1383881325000"
},
series: [
{
id: "s1",
data: {
index: 1
},
style: {
fillGradientMode: "vertical",
fillGradient: [
[0, "rgb(2,4,24)"],
[0.25, "rgb(2,33,88)"],
[0.40, "rgb(21,138,190)"],
[0.50, "rgb(30,181,201)"],
[0.75, "rgb(220,197,161)"],
[1, "rgb(150,45,50)"]
]
}
},
{
id: "s2",
stack:"default",
data: {
index: 2
},
style: {
fillGradientMode: "vertical",
fillGradient: [
[0, "rgb(149,222,229)"],
[1, "rgb(70,113,168)"]
]
}
},
{
id: "s3",
style: {
fillGradientMode: "horizontal",
fillGradient: [
[0, "rgb(250,207,0)"],
[1, "rgb(255,77,75)"]
]
}
},
{
id: "s4",
data: {
index: 2
},
style: {
fillGradientMode: "vertical",
fillGradient: [
[1, "rgb(0,250,0)"],
[0, "rgba(0,0,0,0)"]
]
}
},
{
id: "s5",
style: {
fillGradientMode: "horizontal",
fillGradient: [
[0, "rgb(76,76,76)"],
[0.5, "rgb(225,85,25)"],
[1, "rgb(276,276,76)"]
]
}
},
{
id: "s6",
stack:"default",
style: {
fillGradientMode: "vertical",
fillGradient: [
[0, "rgba(150,215,255,0.4)"],
[0.5, "rgb(0,130,220)"],
[1, "rgba(70,155,255,0.9)"]
]
}
}
]
}
);
Data
Data
//No separate data for this example