Here are the list of samples you can create from basic to advance charts.
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May"], datasets: [ { label: 'Dataset 1', data: [50, 50, 30, 15, 30], borderWidth: 1, backgroundColor: ["#f44336", "#e91e63", "#9c27b0", "#3f51b5", "#009688"] }, { label: 'Dataset 2', data: [10, 50, -34, 20, 79], borderWidth: 1, backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"] } ] } options = { responsive: true, legend: { position: 'top', }, title: { display: true, text: 'Bar Chart Sample' } } barChart = chart.CreateChart(data, "bar", 0.95, 0.4, options) lay.AddChild(barChart) app.AddLayout(lay) }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May"], datasets: [ { label: 'Dataset 1', data: [50, -20, 30, 15, 30], borderWidth: 1, backgroundColor: ["#f44336", "#e91e63", "#9c27b0", "#3f51b5", "#009688"] }, { label: 'Dataset 2', data: [10, -50, 40, -20, 79], borderWidth: 1, backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"] } ] } options = { responsive: true, legend: { position: 'bottom' } } barChart = chart.CreateChart(data, "horizontalBar", 0.95, 0.4, options) lay.AddChild(barChart) app.AddLayout(lay) }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May"], datasets: [ { label: 'Dataset 1', data: [50, -20, 30, 15, 30], borderWidth: 1, backgroundColor: [ 'rgba(3, 169, 244, 0.3)', 'rgba(244, 67, 54, 0.3)', 'rgba(233, 30, 99, 0.3', 'rgba(156, 39, 176, 0.3)', 'rgba(255, 152, 0, 0.3)' ], borderColor: [ 'rgba(3, 169, 244, 0.9)', 'rgba(244, 67, 54, 0.9)', 'rgba(233, 30, 99, 0.9', 'rgba(156, 39, 176, 0.9)', 'rgba(255, 152, 0, 0.9)' ] } ] } barChart = chart.CreateChart(data, "bar", 1, 0.5) lay.AddChild(barChart) app.AddLayout(lay) }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May"], datasets: [ { label: 'Dataset 1', data: [50, -20, 30, 15, 30], borderWidth: 1, backgroundColor: [ 'rgba(3, 169, 244, 0.3)', 'rgba(244, 67, 54, 0.3)', 'rgba(233, 30, 99, 0.3', 'rgba(156, 39, 176, 0.3)', 'rgba(255, 152, 0, 0.3)' ], borderColor: [ 'rgba(3, 169, 244, 0.9)', 'rgba(244, 67, 54, 0.9)', 'rgba(233, 30, 99, 0.9', 'rgba(156, 39, 176, 0.9)', 'rgba(255, 152, 0, 0.9)' ] } ] } options = { title: { display: true, text: "This is the Chart Title" } } barChart = chart.CreateChart(data, "bar", 1, 0.5, options) lay.AddChild(barChart) app.AddLayout(lay) }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May"], datasets: [ { label: 'Dataset 1', data: [50, -20, 30, 15, 30], borderWidth: 1, backgroundColor: ["#f44336", "#e91e63", "#9c27b0", "#3f51b5", "#009688"], yAxisID: 'y-axis-1' }, { label: 'Dataset 2', data: [10, -50, 40, -20, 79], borderWidth: 1, backgroundColor: ["#9C27B0", "#5E35B1", "#039BE5", "#FF9800", "#26A69A"], yAxisID: 'y-axis-2' } ] } options = { responsive: true, tooltips: { mode: 'index', intersect: true }, scales: { yAxes: [{ type: 'linear', display: true, position: 'left', id: 'y-axis-1', }, { type: 'linear', display: true, position: 'right', id: 'y-axis-2', gridLines: { drawOnChartArea: false } }], } } barChart = chart.CreateChart(data, "bar", 0.95, 0.4, options) lay.AddChild(barChart) app.AddLayout(lay) }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May"], datasets: [ { label: 'Dataset 1', data: [50, -20, 30, 15, 30], backgroundColor: "#f44336" }, { label: 'Dataset 2', data: [10, -50, 40, -20, 79], backgroundColor: "#5E35B1" }, { label: 'Dataset 3', data: [20, 35, 56, 23, 67], backgroundColor: "#039BE5" } ] } options = { responsive: true, scales: { xAxes: [{ stacked: true, }], yAxes: [{ stacked: true }] } } barChart = chart.CreateChart(data, "bar", 0.95, 0.4, options) lay.AddChild(barChart) app.AddLayout(lay) }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May"], datasets: [ { label: 'Dataset 1', data: [50, -20, 30, 15, 30], backgroundColor: "#f44336", stack: 'Stack 0' }, { label: 'Dataset 2', data: [10, -50, 40, -20, 79], backgroundColor: "#5E35B1", stack: 'Stack 0' }, { label: 'Dataset 3', data: [20, 35, 56, 23, 67], backgroundColor: "#039BE5", stack: 'Stack 1' } ] } options = { responsive: true, tooltips: { mode: 'index', intersect: false }, scales: { xAxes: [{ stacked: true, }], yAxes: [{ stacked: true }] } } barChart = chart.CreateChart(data, "bar", 0.95, 0.4, options) lay.AddChild(barChart) app.AddLayout(lay) }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [ { label: 'First Dataset', data: [50, 50, 30, 15, 30, 34], backgroundColor: "#f44336", borderColor: "#f44336", fill: false }, { label: 'Second Dataset', data: [10, 50, -34, 20, 79, 45], backgroundColor: "#039BE5", borderColor: "#039BE5", fill: false } ] } options = { responsive: true, tooltips: { mode: 'index', intersect: false, }, hover: { mode: 'nearest', intersect: true }, scales: { xAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Month' } }], yAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Value' } }] } } lineChart = chart.CreateChart(data, "line", 0.95, 0.4, options) lay.AddChild(lineChart) app.AddLayout(lay) }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [ { label: 'First Dataset', data: [50, 50, 30, 15, 30, 34], backgroundColor: "#f44336", borderColor: "#f44336", fill: false, yAxisID: 'y-axis-1' }, { label: 'Second Dataset', data: [10, 50, -34, 20, 79, 45], backgroundColor: "#039BE5", borderColor: "#039BE5", fill: false, yAxisID: 'y-axis-2' } ] } options = { responsive: true, hoverMode: 'index', stacked: false, scales: { yAxes: [{ type: 'linear', display: true, position: 'left', id: 'y-axis-1' }, { type: 'linear', display: true, position: 'right', id: 'y-axis-2', gridLines: { drawOnChartArea: false } }] } } lineChart = chart.CreateChart(data, "line", 0.95, 0.4, options) lay.AddChild(lineChart) app.AddLayout(lay) }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [ { label: 'First Dataset', data: [10, 50, 30, 80, 30, 100], backgroundColor: "#f44336", borderColor: "#f44336", fill: false } ] } options = { responsive: true, elements: { line: { tension: 0.000001 } } } lineChart = chart.CreateChart(data, "line", 0.95, 0.4, options) lay.AddChild(lineChart) app.AddLayout(lay) }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") scrl = app.CreateScroller(1, 1) scrlLay = app.CreateLayout('Linear') // values for steppedLine are: // false, true, 'before', 'after', 'middle' lineChart1 = chart.CreateChart(GenerateData(false, 'steppedLine:false'), "line", 1, 0.4) scrlLay.AddChild(lineChart1) lineChart2 = chart.CreateChart(GenerateData(true, 'steppedLine:true'), "line", 1, 0.4) scrlLay.AddChild(lineChart2) lineChart3 = chart.CreateChart(GenerateData('before', 'steppedLine:before'), "line", 1, 0.4) scrlLay.AddChild(lineChart3) lineChart4 = chart.CreateChart(GenerateData('after', 'steppedLine:after'), "line", 1, 0.4) scrlLay.AddChild(lineChart4) lineChart5 = chart.CreateChart(GenerateData('middle', 'steppedLine:middle'), "line", 1, 0.4) scrlLay.AddChild(lineChart5) scrl.AddChild(scrlLay) lay.AddChild(scrl) app.AddLayout(lay) } function GenerateData(stepType, label) { return { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [ { label: label, data: [50, 50, 30, 15, 30, 34], backgroundColor: 'rgba(244, 67, 54, 0.35)', borderColor: "#f44336", fill: false, steppedLine: stepType } ] } }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [ { label: 'Unfilled', fill: false, data: [50, 50, 30, 15, 30, 34], backgroundColor: "#f44336", borderColor: "#f44336" }, { label: 'Dashed', fill: false, borderDash: [5, 5], data: [10, 50, -34, 20, 79, 45], backgroundColor: "#039BE5", borderColor: "#039BE5" }, { label: 'Filled', fill: true, data: [12, -4, 50, 15, 65, -54], backgroundColor: "#9c27b0", borderColor: "#9c27b0" } ] } lineChart = chart.CreateChart(data, "line", 0.95, 0.4) lay.AddChild(lineChart) app.AddLayout(lay) }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") scrl = app.CreateScroller(1, 1) scrLay = app.CreateLayout('Linear') data = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"], datasets: [{ label: 'My First dataset', backgroundColor: "#9c27b0", borderColor: "#9c27b0", data: [10, 23, 5, 99, 67, 43, 0], fill: false, pointRadius: 10, pointHoverRadius: 15, showLine: false }] } var circleOpt = CreateOptions('circle') circle = chart.CreateChart(data, "line", 1, 0.4, circleOpt) scrLay.AddChild(circle) var triangleOpt = CreateOptions('triangle') triangle = chart.CreateChart(data, "line", 1, 0.4, triangleOpt) scrLay.AddChild(triangle) var rectOpt = CreateOptions('rect') rect = chart.CreateChart(data, "line", 1, 0.4, rectOpt) scrLay.AddChild(rect) var rectRoundedOpt = CreateOptions('rectRounded') rectRounded = chart.CreateChart(data, "line", 1, 0.4, rectRoundedOpt) scrLay.AddChild(rectRounded) var rectRotOpt = CreateOptions('rectRot') rectRot = chart.CreateChart(data, "line", 1, 0.4, rectRotOpt) scrLay.AddChild(rectRot) var crossOpt = CreateOptions('cross') cross = chart.CreateChart(data, "line", 1, 0.4, crossOpt) scrLay.AddChild(cross) var crossRotOpt = CreateOptions('crossRot') crossRot = chart.CreateChart(data, "line", 1, 0.4, crossRotOpt) scrLay.AddChild(crossRot) var starOpt = CreateOptions('star') star = chart.CreateChart(data, "line", 1, 0.4, starOpt) scrLay.AddChild(star) var lineOpt = CreateOptions('line') line = chart.CreateChart(data, "line", 1, 0.4, lineOpt) scrLay.AddChild(line) var dashOpt = CreateOptions('dash') dash = chart.CreateChart(data, "line", 1, 0.4, dashOpt) scrLay.AddChild(dash) scrl.AddChild(scrLay) lay.AddChild(scrl) app.AddLayout(lay) } function CreateOptions(pointStyle) { return { responsive: true, legend: { display: false }, elements: { point: { pointStyle: pointStyle } } } }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [ { label: 'Big points', data: GenerateData(), backgroundColor: "#f44336", borderColor: "#f44336", fill: false, borderDash: [5, 5], pointRadius: 15, pointHoverRadius: 10 }, { label: 'Individual point sizes', borderDash: [5, 5], data: GenerateData(), backgroundColor: "#039BE5", borderColor: "#039BE5", fill: false, borderDash: [5, 5], pointRadius: [2, 4, 6, 18, 0, 12] }, { label: 'Large pointHoverRadius', data: GenerateData(), backgroundColor: "#9c27b0", borderColor: "#9c27b0", fill: false, pointHoverRadius: 30 }, { label: 'Large pointHitRadius', data: GenerateData(), backgroundColor: "#e91e63", borderColor: "#e91e63", fill: false, pointHitRadius: 20 } ] } lineChart = chart.CreateChart(data, "line", 0.95, 0.4) lay.AddChild(lineChart) app.AddLayout(lay) } function RandomNumber() { return Math.floor(Math.random() * 100) } function GenerateData() { return [ RandomNumber(), RandomNumber(), RandomNumber(), RandomNumber(), RandomNumber(), RandomNumber() ] }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") fillFalse = chart.CreateChart(GenerateData(false), "line", 1, 0.25) lay.AddChild(fillFalse) fillOrigin = chart.CreateChart(GenerateData('origin'), "line", 1, 0.25) lay.AddChild(fillOrigin) fillStart = chart.CreateChart(GenerateData('start'), "line", 1, 0.25) lay.AddChild(fillStart) fillEnd = chart.CreateChart(GenerateData('end'), "line", 1, 0.25) lay.AddChild(fillEnd) app.AddLayout(lay) } function GenerateData(fillStyle) { return { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [ { label: 'No Fill', data: [50, -20, 60, 15, 70, -30], backgroundColor: 'rgba(244, 67, 54, 0.35)', borderColor: "#f44336", fill: fillStyle } ] } }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") var colors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#4285F4', '#03a9f4', '#00bcd4', '#009688', '#4caf50'] data = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [{ backgroundColor: colors[0], borderColor: colors[0], data: GenerateData(), label: 'D0' }, { backgroundColor: colors[1], borderColor: colors[1], data: GenerateData(), label: 'D1', fill: '-1' }, { backgroundColor: colors[2], borderColor: colors[2], data: GenerateData(), label: 'D2', fill: 1 }, { backgroundColor: colors[3], borderColor: colors[3], data: GenerateData(), label: 'D3', fill: '-1' }, { backgroundColor: colors[4], borderColor: colors[4], data: GenerateData(), label: 'D4', fill: '-1' }, { backgroundColor: colors[5], borderColor: colors[5], data: GenerateData(), label: 'D5', fill: '+2' }, { backgroundColor: colors[6], borderColor: colors[6], data: GenerateData(), label: 'D6', fill: false }, { backgroundColor: colors[7], borderColor: colors[7], data: GenerateData(), label: 'D7', fill: 8 }, { backgroundColor: colors[8], borderColor: colors[8], data: GenerateData(), label: 'D8', fill: 'end' }] } options = { maintainAspectRatio: false, spanGaps: false, elements: { line: { tension: 0.000001 } }, scales: { yAxes: [{ stacked: true }] }, plugins: { filler: { propagate: false }, 'samples-filler-analyser': { target: 'chart-analyser' } } } lineChart = chart.CreateChart(data, "line", 1, 0.5, options) lay.AddChild(lineChart) app.AddLayout(lay) } function RandomNumber() { return Math.floor(Math.random() * 100) } function GenerateData() { return [ RandomNumber(), RandomNumber(), RandomNumber(), RandomNumber(), RandomNumber(), RandomNumber() ] }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [{ label: "Dataset 1", borderColor: '#4285F4', backgroundColor: '#4285F4', data: GenerateData() }, { label: "Dataset 2", borderColor: '#03a9f4', backgroundColor: '#03a9f4', data: GenerateData() }, { label: "Dataset 3", borderColor: '#00bcd4', backgroundColor: '#00bcd4', data: GenerateData() }, { label: "Dataset 4", borderColor: '#009688', backgroundColor: '#009688', data: GenerateData() }] } options = { responsive: true, title: { display: true, text: 'Line Chart - Stacked Area' }, tooltips: { mode: 'index', }, hover: { mode: 'index' }, scales: { yAxes: [{ stacked: true }] } } lineChart = chart.CreateChart(data, "line", 1, 0.5, options) lay.AddChild(lineChart) app.AddLayout(lay) } function RandomNumber() { return Math.floor(Math.random() * 100) } function GenerateData() { return [ RandomNumber(), RandomNumber(), RandomNumber(), RandomNumber(), RandomNumber(), RandomNumber() ] }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [{ backgroundColor: '#f44336', borderColor: '#f44336', data: GenerateData(), label: 'D0' }, { backgroundColor: '#e91e63', borderColor: '#e91e63', data: GenerateData(), hidden: true, label: 'D1', fill: '-1' }, { backgroundColor: '#9c27b0', borderColor: '#9c27b0', data: GenerateData(), label: 'D2', fill: 1 }, { backgroundColor: '#673ab7', borderColor: '#673ab7', data: GenerateData(), label: 'D3', fill: false }, { backgroundColor: '#3f51b5', borderColor: '#3f51b5', data: GenerateData(), label: 'D4', fill: '-1' }, { backgroundColor: '#4285F4', borderColor: '#4285F4', data: GenerateData(), label: 'D5', fill: '-1' }] } var options = { maintainAspectRatio: true, spanGaps: false, elements: { line: { tension: 0.000001 } }, plugins: { filler: { propagate: false }, 'samples-filler-analyser': { target: 'chart-analyser' } } } radarChart = chart.CreateChart(data, "radar", 1, 0.5, options) lay.AddChild(radarChart) app.AddLayout(lay) } function RandomNumber() { return Math.floor(Math.random() * 100) } function GenerateData() { return [ RandomNumber(), RandomNumber(), RandomNumber(), RandomNumber(), RandomNumber(), RandomNumber() ] }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [{ label: 'First Dataset', backgroundColor: '#f44336', borderColor: '#f44336', data: GenerateData() }, { label: 'Second Dataset', backgroundColor: '#e91e63', borderColor: '#e91e63', data: GenerateData() }] } scatterChart = chart.CreateChart(data, "scatter", 1, 0.5) lay.AddChild(scatterChart) app.AddLayout(lay) } function RandomNumber() { return Math.floor(Math.random() * 100) } function GenerateData() { var data = [] for (var i = 0; i < 7; i++) { data.push({ x: RandomNumber(), y: RandomNumber() }) } return data }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [{ label: "Dataset 1", data: data: [20, 10, 40, 50, 83, 23], backgroundColor: ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#4285F4'] }] } doughnutChart = chart.CreateChart(data, "doughnut", 1, 0.5) lay.AddChild(doughnutChart) app.AddLayout(lay) }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [{ label: "Dataset 1", data: [20, 10, 40, 50, 83, 23], backgroundColor: ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#4285F4'] }] } var options = { circumference: Math.PI, rotation: -Math.PI } doughnutChart = chart.CreateChart(data, "doughnut", 1, 0.5, options) lay.AddChild(doughnutChart) app.AddLayout(lay) }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [{ label: "Dataset 1", data: [20, 10, 40, 50, 83, 23], backgroundColor: ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#4285F4'] }] } pieChart = chart.CreateChart(data, "pie", 1, 0.5) lay.AddChild(pieChart) app.AddLayout(lay) }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [{ label: "Dataset 1", data: [20, 10, 40, 50, 83, 23], backgroundColor: ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#4285F4'] }] } options = { scale: { ticks: { beginAtZero: true }, reverse: false }, legend: { position: 'bottom', display: true } } polarChart = chart.CreateChart(data, "polarArea", 1, 0.5, options) lay.AddChild(polarChart) app.AddLayout(lay) }
app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") lay.SetBackColor("#ffffff") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [{ type: 'line', label: 'Dataset 1', borderColor: '#f44336', borderWidth: 2, fill: false, data: [20, 10, 40, 50, 83, 23] }, { type: 'bar', label: 'Dataset 2', backgroundColor: '#e91e63', data: [5, 50, 20, 43, 67, 90], borderColor: 'white', borderWidth: 2 }, { type: 'bar', label: 'Dataset 3', backgroundColor: '#673ab7', data: [10, 60, 21, 43, 50, 67] }] } options = { responsive: true, title: { display: true, text: 'Combo Bar Line Chart' }, tooltips: { mode: 'index', intersect: true } } polarChart = chart.CreateChart(data, "bar", 1, 0.5, options) lay.AddChild(polarChart) app.AddLayout(lay) }
cfg.Dark app.LoadPlugin( "ChartJS" ) function OnStart() { chart = app.LoadChartJS() lay = app.CreateLayout("Linear", "FillXY, VCenter") data = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [{ label: 'Dataset label', backgroundColor: ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#4285F4'], data: [20, 10, 40, 50, 83, 23] }] } barChart = chart.CreateChart(data, "bar", 1, 0.5) barChart.SetBackColor('#424242') lay.AddChild(barChart) app.AddLayout(lay) }