i am working on personalizing a single linechart with already fixed data on my website, i would to load the data using ajax or jquery from an external json file but dont know how to go about it. please i need your assistance.
find below the js code:
<code>var tfLineChart = (function () {
let draw = Chart.controllers.line.__super__.draw; //draw shadow
var screenWidth = $(window).width();
var chartBar1 = function () {
var options1 = {
series: [
{
data: [20, 50, 7, 100, -8, 80, 7],
},
],
colors: ["#D250FF"],
chart: {
type: "line",
maxWidth: 96,
height: 26,
sparkline: { enabled: !0 },
},
plotOptions: { bar: { columnWidth: "50%" } },
xaxis: { crosshairs: { width: 1 } },
stroke: {
show: true,
curve: "smooth",
lineCap: "butt",
colors: undefined,
width: 1,
dashArray: 0,
},
tooltip: {
enabled: false,
fixed: { enabled: !1 },
x: { show: !1 },
y: {
title: {
formatter: function (e) {
return "";
},
},
},
marker: { show: !1 },
},
states: {
hover: {
filter: {
type: "none",
value: 0,
},
},
},
},
chart1 = new ApexCharts(
document.querySelector("#line-chart-1"),
options1
);
chart1.render();
};
</code>
<code>var tfLineChart = (function () {
let draw = Chart.controllers.line.__super__.draw; //draw shadow
var screenWidth = $(window).width();
var chartBar1 = function () {
var options1 = {
series: [
{
data: [20, 50, 7, 100, -8, 80, 7],
},
],
colors: ["#D250FF"],
chart: {
type: "line",
maxWidth: 96,
height: 26,
sparkline: { enabled: !0 },
},
plotOptions: { bar: { columnWidth: "50%" } },
xaxis: { crosshairs: { width: 1 } },
stroke: {
show: true,
curve: "smooth",
lineCap: "butt",
colors: undefined,
width: 1,
dashArray: 0,
},
tooltip: {
enabled: false,
fixed: { enabled: !1 },
x: { show: !1 },
y: {
title: {
formatter: function (e) {
return "";
},
},
},
marker: { show: !1 },
},
states: {
hover: {
filter: {
type: "none",
value: 0,
},
},
},
},
chart1 = new ApexCharts(
document.querySelector("#line-chart-1"),
options1
);
chart1.render();
};
</code>
var tfLineChart = (function () {
let draw = Chart.controllers.line.__super__.draw; //draw shadow
var screenWidth = $(window).width();
var chartBar1 = function () {
var options1 = {
series: [
{
data: [20, 50, 7, 100, -8, 80, 7],
},
],
colors: ["#D250FF"],
chart: {
type: "line",
maxWidth: 96,
height: 26,
sparkline: { enabled: !0 },
},
plotOptions: { bar: { columnWidth: "50%" } },
xaxis: { crosshairs: { width: 1 } },
stroke: {
show: true,
curve: "smooth",
lineCap: "butt",
colors: undefined,
width: 1,
dashArray: 0,
},
tooltip: {
enabled: false,
fixed: { enabled: !1 },
x: { show: !1 },
y: {
title: {
formatter: function (e) {
return "";
},
},
},
marker: { show: !1 },
},
states: {
hover: {
filter: {
type: "none",
value: 0,
},
},
},
},
chart1 = new ApexCharts(
document.querySelector("#line-chart-1"),
options1
);
chart1.render();
};
New contributor
shocase is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.