Charts
XY Chart : Deal Closed vs Goal
Deal Closed vs Goal
-
Deal Closed
-
Goal
Documentation
Available Parameters
| Parameter | Type | Description |
|---|---|---|
baseId
|
Unique Text
required |
Set Unique Base ID for Chart. |
title
|
Text
required |
Set title of Chart. |
legend
|
Boolean
Default : false
|
Set true value for legend parameter to display chart legend base on series. |
actions
|
Array of Action Item | Set list of actions for chart. Example: [
|
data
|
Array of Data Object
required |
Set list of Data item. Example: [
|
options
|
Options Object
required |
Set Options for chart. required attributes : xAxis.dataKey, series[ { item.dataKey } ]more about options see https://echarts.apache.org/en/option.html Example: {
|
Starter Kit Codes
Starter Kit Code
{# include charts/xy #}
{% include "../../charts/xy.twig", with {
"baseId" : "example-chart-deal-closed-goal",
"title" : "Deal Closed vs Goal",
"legend" : true,
"actions" : [
{
"text" : "Action 1",
"link" : "javascript:void()"
},
{
"text" : "Action 2",
"link" : "javascript:void()"
},
{
"text" : "Action 3",
"link" : "javascript:void()"
},
],
"data" : [
{
"date" : "Jun 12",
"deal" : 2920,
"goal" : 1830,
},
{
"date" : "Jun 13",
"deal" : 3830,
"goal" : 4515,
},
{
"date" : "Jun 14",
"deal" : 7355,
"goal" : 5230,
},
{
"date" : "Jun 15",
"deal" : 9372,
"goal" : 7540,
},
{
"date" : "Jun 16",
"deal" : 12290,
"goal" : 8140,
},
{
"date" : "Jun 17",
"deal" : 15629,
"goal" : 10290,
},
{
"date" : "Jun 18",
"deal" : 16720,
"goal" : 12200,
}
],
"options" : {
"grid" : {
"bottom" : 32,
"left" : 30,
},
"xAxis" : {
"type" : "category",
"dataKey" : "date",
"name" : "Closet Date",
"nameLocation" : "middle",
"nameGap" : 42,
"nameTextStyle" : {
"color" : "#222",
"fontSize" : 14,
"lineHeight" : 19,
},
},
"yAxis" : {
"interval" : 5000,
"min" : 0,
"max" : 20000,
"axisLabel" : {
"prefix" : "$"
},
"name" : "Closet Amount",
"nameLocation" : "middle",
"nameGap" : 55,
"nameTextStyle" : {
"color" : "#222",
"fontSize" : 14,
"lineHeight" : 19,
},
},
"series" : [
{
"dataKey" : "deal",
"type" : "line",
"name" : "Deal Closed",
"itemStyle" : {
"color": "#1F58D4"
},
},
{
"dataKey" : "goal",
"type" : "line",
"name" : "Goal",
"itemStyle" : {
"color": "#F9BD29"
},
},
],
}
} %}