Scribd
Upload
183 views10 pages

X-Y Chart Amcharts

how to create XY chart using JS

Uploaded by

Mickey Sabu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
183 views10 pages

X-Y Chart Amcharts

how to create XY chart using JS

Uploaded by

Mickey Sabu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 10

amCharts

Products
Demos
Download
Buy
Support
Docs
Previous All demos Next
, y: , value:, y: , value:
Open in:
XY Chart with Date-Based Axis
Demo source
JavaScript
TypeScript / ES6
...
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>

<!-- Resources -->


<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

<!-- Chart code -->


<script>
am5.ready(function() {

// Create root element


// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");

// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);

root.dateFormatter.setAll({
dateFormat: "yyyy-MM-dd",
dateFields: ["valueX"]
});

// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelY: "zoomXY",
pinchZoomX:true,
pinchZoomY:true
}));

chart.get("colors").set("step", 2);
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
baseInterval: { timeUnit: "day", count: 1 },
renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 50 }),
tooltip: am5.Tooltip.new(root, {})
}));

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {


renderer: am5xy.AxisRendererY.new(root, {}),
tooltip: am5.Tooltip.new(root, {})
}));

// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series0 = chart.series.push(am5xy.LineSeries.new(root, {
calculateAggregates: true,
xAxis: xAxis,
yAxis: yAxis,
valueYField: "ay",
valueXField: "date",
valueField: "aValue",
tooltip: am5.Tooltip.new(root, {
labelText: "{valueX}, y: {valueY}, value: {value}"
})
}));

// Add bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
var circleTemplate = am5.Template.new({});
series0.bullets.push(function() {
var graphics = am5.Circle.new(root, {
fill: series0.get("fill"),
}, circleTemplate);
return am5.Bullet.new(root, {
sprite: graphics
});
});

// Add heat rule


// https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
series0.set("heatRules", [{
target: circleTemplate,
min: 3,
max: 35,
dataField: "value",
key: "radius"
}]);

var starTemplate = am5.Template.new({});


// Create second series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series1 = chart.series.push(am5xy.LineSeries.new(root, {
calculateAggregates: true,
xAxis: xAxis,
yAxis: yAxis,
valueYField: "by",
valueXField: "date",
valueField: "bValue",
tooltip: am5.Tooltip.new(root, {
labelText: "{valueX}, y: {valueY}, value: {value}"
})
}));

// Add bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
series1.bullets.push(function() {
var graphics = am5.Star.new(root, {
fill: series1.get("fill"),
spikes: 4,
innerRadius: am5.percent(70),
}, starTemplate);
return am5.Bullet.new(root, {
sprite: graphics
});
});

// Add heat rule


// https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
series1.set("heatRules", [{
target: starTemplate,
min: 3,
max: 50,
dataField: "value",
key: "radius"
}]);

series0.strokes.template.set("strokeOpacity", 0);
series1.strokes.template.set("strokeOpacity", 0);

series0.data.processor = am5.DataProcessor.new(root, {
dateFields: ["date"], dateFormat: "yyyy-MM-dd"
});

series1.data.processor = am5.DataProcessor.new(root, {
dateFields: ["date"], dateFormat: "yyyy-MM-dd"
});

// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
chart.set("cursor", am5xy.XYCursor.new(root, {
xAxis: xAxis,
yAxis: yAxis,
behavior: "zoomXY",
snapToSeries: [series0, series1]
}));

// Add scrollbars
// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
chart.set("scrollbarX", am5.Scrollbar.new(root, {
orientation: "horizontal"
}));

chart.set("scrollbarY", am5.Scrollbar.new(root, {
orientation: "vertical"
}));

var data = [{
"date": "2015-01-01",
"ay": 6.5,
"by": 2.2,
"aValue": 15,
"bValue": 10
}, {
"date": "2015-01-02",
"ay": 12.3,
"by": 4.9,
"aValue": 8,
"bValue": 3
}, {
"date": "2015-01-03",
"ay": 12.3,
"by": 5.1,
"aValue": 16,
"bValue": 4
}, {
"date": "2015-01-04",
"ay": 2.8,
"by": 13.3,
"aValue": 9,
"bValue": 13
}, {
"date": "2015-01-05",
"ay": 3.5,
"by": 6.1,
"aValue": 5,
"bValue": 2
}, {
"date": "2015-01-06",
"ay": 5.1,
"by": 8.3,
"aValue": 10,
"bValue": 17
}, {
"date": "2015-01-07",
"ay": 6.7,
"by": 10.5,
"aValue": 3,
"bValue": 10
}, {
"date": "2015-01-08",
"ay": 8,
"by": 12.3,
"aValue": 5,
"bValue": 13
}, {
"date": "2015-01-09",
"ay": 8.9,
"by": 4.5,
"aValue": 8,
"bValue": 11
}, {
"date": "2015-01-10",
"ay": 9.7,
"by": 15,
"aValue": 15,
"bValue": 10
}, {
"date": "2015-01-11",
"ay": 10.4,
"by": 10.8,
"aValue": 1,
"bValue": 11
}, {
"date": "2015-01-12",
"ay": 1.7,
"by": 19,
"aValue": 12,
"bValue": 3
}]

series0.data.setAll(data);
series1.data.setAll(data);

// Make stuff animate on load


// https://www.amcharts.com/docs/v5/concepts/animations/
series0.appear(1000);
series1.appear(1000);

chart.appear(1000, 100);

}); // end am5.ready()


</script>

<!-- HTML -->


<div id="chartdiv"></div>
amCharts
More info
Accessibility Features
About amCharts
Press Kit
Getting support
Subscribe to amNews
Products
amCharts 5: Charts
amCharts 5: Maps
amCharts 5: Stock Chart
WordPress Plugin
Version information
Tools & Resources
Free SVG Maps
Pixel Map Generator
Visited Countries Map
Visited States Map
Contact Us
[email protected]
Support Center
Legal Stuff
Privacy Policy
Terms & Conditions
Facebook
Twitter
LinkedIn
Copyright © 2006-2022, amCharts. All rights reserved.Source of the demo
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>

<!-- Resources -->


<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

<!-- Chart code -->


<script>
am5.ready(function() {

// Create root element


// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");

// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);

root.dateFormatter.setAll({
dateFormat: "yyyy-MM-dd",
dateFields: ["valueX"]
});

// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelY: "zoomXY",
pinchZoomX:true,
pinchZoomY:true
}));

chart.get("colors").set("step", 2);

// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
baseInterval: { timeUnit: "day", count: 1 },
renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 50 }),
tooltip: am5.Tooltip.new(root, {})
}));

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {


renderer: am5xy.AxisRendererY.new(root, {}),
tooltip: am5.Tooltip.new(root, {})
}));

// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series0 = chart.series.push(am5xy.LineSeries.new(root, {
calculateAggregates: true,
xAxis: xAxis,
yAxis: yAxis,
valueYField: "ay",
valueXField: "date",
valueField: "aValue",
tooltip: am5.Tooltip.new(root, {
labelText: "{valueX}, y: {valueY}, value: {value}"
})
}));

// Add bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
var circleTemplate = am5.Template.new({});
series0.bullets.push(function() {
var graphics = am5.Circle.new(root, {
fill: series0.get("fill"),
}, circleTemplate);
return am5.Bullet.new(root, {
sprite: graphics
});
});

// Add heat rule


// https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
series0.set("heatRules", [{
target: circleTemplate,
min: 3,
max: 35,
dataField: "value",
key: "radius"
}]);

var starTemplate = am5.Template.new({});


// Create second series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series1 = chart.series.push(am5xy.LineSeries.new(root, {
calculateAggregates: true,
xAxis: xAxis,
yAxis: yAxis,
valueYField: "by",
valueXField: "date",
valueField: "bValue",
tooltip: am5.Tooltip.new(root, {
labelText: "{valueX}, y: {valueY}, value: {value}"
})
}));

// Add bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
series1.bullets.push(function() {
var graphics = am5.Star.new(root, {
fill: series1.get("fill"),
spikes: 4,
innerRadius: am5.percent(70),
}, starTemplate);
return am5.Bullet.new(root, {
sprite: graphics
});
});

// Add heat rule


// https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
series1.set("heatRules", [{
target: starTemplate,
min: 3,
max: 50,
dataField: "value",
key: "radius"
}]);

series0.strokes.template.set("strokeOpacity", 0);
series1.strokes.template.set("strokeOpacity", 0);

series0.data.processor = am5.DataProcessor.new(root, {
dateFields: ["date"], dateFormat: "yyyy-MM-dd"
});

series1.data.processor = am5.DataProcessor.new(root, {
dateFields: ["date"], dateFormat: "yyyy-MM-dd"
});

// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
chart.set("cursor", am5xy.XYCursor.new(root, {
xAxis: xAxis,
yAxis: yAxis,
behavior: "zoomXY",
snapToSeries: [series0, series1]
}));

// Add scrollbars
// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
chart.set("scrollbarX", am5.Scrollbar.new(root, {
orientation: "horizontal"
}));

chart.set("scrollbarY", am5.Scrollbar.new(root, {
orientation: "vertical"
}));

var data = [{
"date": "2015-01-01",
"ay": 6.5,
"by": 2.2,
"aValue": 15,
"bValue": 10
}, {
"date": "2015-01-02",
"ay": 12.3,
"by": 4.9,
"aValue": 8,
"bValue": 3
}, {
"date": "2015-01-03",
"ay": 12.3,
"by": 5.1,
"aValue": 16,
"bValue": 4
}, {
"date": "2015-01-04",
"ay": 2.8,
"by": 13.3,
"aValue": 9,
"bValue": 13
}, {
"date": "2015-01-05",
"ay": 3.5,
"by": 6.1,
"aValue": 5,
"bValue": 2
}, {
"date": "2015-01-06",
"ay": 5.1,
"by": 8.3,
"aValue": 10,
"bValue": 17
}, {
"date": "2015-01-07",
"ay": 6.7,
"by": 10.5,
"aValue": 3,
"bValue": 10
}, {
"date": "2015-01-08",
"ay": 8,
"by": 12.3,
"aValue": 5,
"bValue": 13
}, {
"date": "2015-01-09",
"ay": 8.9,
"by": 4.5,
"aValue": 8,
"bValue": 11
}, {
"date": "2015-01-10",
"ay": 9.7,
"by": 15,
"aValue": 15,
"bValue": 10
}, {
"date": "2015-01-11",
"ay": 10.4,
"by": 10.8,
"aValue": 1,
"bValue": 11
}, {
"date": "2015-01-12",
"ay": 1.7,
"by": 19,
"aValue": 12,
"bValue": 3
}]

series0.data.setAll(data);
series1.data.setAll(data);

// Make stuff animate on load


// https://www.amcharts.com/docs/v5/concepts/animations/
series0.appear(1000);
series1.appear(1000);

chart.appear(1000, 100);

}); // end am5.ready()


</script>

<!-- HTML -->


<div id="chartdiv"></div>

You might also like