use Anycharts
Use always anycharts, its totally free and support also free
sample code:
<script src="https://cdn.anychart.com/releases/8.7.0/js/anychart-bundle.min.js"></script>
<div class="container1"></div>
<style>
#container, #container1, #container2, #container4 {
width: 477px;
height: 259px;
margin: 60px 40px 0 0;
padding: 0;
float: left;
}
.anychart-credits{
display: none;
}
</style>
<script>
anychart.onDocumentReady(function() {
// set the data
var data = {
header: ["Year", "Interest Expense on the Debt, USD bln."],
rows: [
[2007, 429],
[2008, 451],
[2009, 383],
[2010, 413],
[2011, 454],
[2012, 359],
[2013, 415],
[2014, 430],
[2015, 402],
[2016, 432]
]};
// create the chart
var chart = anychart.area();
//chart.xScale().mode('continuous');
chart.xScale().mode('continuous');
chart.palette(anychart.palettes.distinctColors('#A1B5DE') );
var marker = chart.lineMarker(0);
marker.value(402);
marker.stroke({
thickness: 2,
//color: green,
dash: "200 0"
});
var marker2 = chart.lineMarker(1);
marker2.value(420);
marker2.stroke({
thickness: 2,
//color: green,
dash: "200 0"
});
/*
var labels = chart.xAxis().labels();
labels.fontFamily("Courier");
labels.fontSize(12);
labels.fontColor("#125393");
labels.fontWeight("bold");
labels.useHtml(false);
*/
chart.xAxis().title('Sample X-Axis Name');
chart.yAxis().title('Sample Y-Axis Name');
//chart.xScale().mode('continuous');
// add the data
chart.data(data);
chart.container('container2');
chart.draw();
});
</script>
with complete html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>BCT Area Chart 01</title>
<link href="https://playground.anychart.com/fXqqNe5v/iframe" rel="canonical">
<meta content="Area Chart,Axes Marker,Line Marker,Table Data,Trendline" name="keywords">
<meta content="AnyChart - JavaScript Charts designed to be embedded and integrated" name="description">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="https://cdn.anychart.com/releases/8.7.0/css/anychart-ui.min.css?hcode=a0c21fc77e1449cc86299c5faa067dc4" rel="stylesheet" type="text/css">
<style>html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}</style>
</head>
<body>
<div id="container"></div>
<script src="https://cdn.anychart.com/releases/8.7.0/js/anychart-base.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.7.0/js/anychart-exports.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.7.0/js/anychart-ui.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script type="text/javascript">anychart.onDocumentReady(function() {
// set the data
var data = {
header: ["Year", "Interest Expense on the Debt, USD bln."],
rows: [
[2007, 429],
[2008, 451],
[2009, 383],
[2010, 413],
[2011, 454],
[2012, 359],
[2013, 415],
[2014, 430],
[2015, 402],
[2016, 432]
]};
// create the chart
var chart = anychart.area();
chart.xScale().mode('continuous');
chart.palette(anychart.palettes.distinctColors('#A1B5DE') );
//chart.background().stroke("5 red");
// set first series data
var area = chart.area();
// set stroke thickness 5px and stroke color as red
area.stroke("5 red");
var marker = chart.lineMarker(0);
marker.value(402);
marker.stroke({
thickness: 2,
dash: "200 0"
});
var marker2 = chart.lineMarker(1);
marker2.value(420);
marker2.stroke({
thickness: 2,
dash: "200 0"
});
chart.xAxis().title('Sample X-Axis Name');
chart.yAxis().title('Sample Y-Axis Name');
chart.xAxis().stroke('2 red');
chart.yAxis().stroke('2 green');
area.markers(true);
area.markers().size(10);
area.markers().fill('#cecece');
var state = area.normal();
// Set fill.
state.fill({
src: 'https://static.anychart.com/images/underwater.jpg',
mode: 'stretch',
opacity: 0.5
});
// add the data
chart.data(data);
chart.container('container');
chart.draw();
});</script>
</body>
</html>
sample code:
<script src="https://cdn.anychart.com/releases/8.7.0/js/anychart-bundle.min.js"></script>
<div class="container1"></div>
<style>
#container, #container1, #container2, #container4 {
width: 477px;
height: 259px;
margin: 60px 40px 0 0;
padding: 0;
float: left;
}
.anychart-credits{
display: none;
}
</style>
<script>
anychart.onDocumentReady(function() {
// set the data
var data = {
header: ["Year", "Interest Expense on the Debt, USD bln."],
rows: [
[2007, 429],
[2008, 451],
[2009, 383],
[2010, 413],
[2011, 454],
[2012, 359],
[2013, 415],
[2014, 430],
[2015, 402],
[2016, 432]
]};
// create the chart
var chart = anychart.area();
//chart.xScale().mode('continuous');
chart.xScale().mode('continuous');
chart.palette(anychart.palettes.distinctColors('#A1B5DE') );
var marker = chart.lineMarker(0);
marker.value(402);
marker.stroke({
thickness: 2,
//color: green,
dash: "200 0"
});
var marker2 = chart.lineMarker(1);
marker2.value(420);
marker2.stroke({
thickness: 2,
//color: green,
dash: "200 0"
});
/*
var labels = chart.xAxis().labels();
labels.fontFamily("Courier");
labels.fontSize(12);
labels.fontColor("#125393");
labels.fontWeight("bold");
labels.useHtml(false);
*/
chart.xAxis().title('Sample X-Axis Name');
chart.yAxis().title('Sample Y-Axis Name');
//chart.xScale().mode('continuous');
// add the data
chart.data(data);
chart.container('container2');
chart.draw();
});
</script>
with complete html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>BCT Area Chart 01</title>
<link href="https://playground.anychart.com/fXqqNe5v/iframe" rel="canonical">
<meta content="Area Chart,Axes Marker,Line Marker,Table Data,Trendline" name="keywords">
<meta content="AnyChart - JavaScript Charts designed to be embedded and integrated" name="description">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="https://cdn.anychart.com/releases/8.7.0/css/anychart-ui.min.css?hcode=a0c21fc77e1449cc86299c5faa067dc4" rel="stylesheet" type="text/css">
<style>html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}</style>
</head>
<body>
<div id="container"></div>
<script src="https://cdn.anychart.com/releases/8.7.0/js/anychart-base.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.7.0/js/anychart-exports.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.7.0/js/anychart-ui.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script type="text/javascript">anychart.onDocumentReady(function() {
// set the data
var data = {
header: ["Year", "Interest Expense on the Debt, USD bln."],
rows: [
[2007, 429],
[2008, 451],
[2009, 383],
[2010, 413],
[2011, 454],
[2012, 359],
[2013, 415],
[2014, 430],
[2015, 402],
[2016, 432]
]};
// create the chart
var chart = anychart.area();
chart.xScale().mode('continuous');
chart.palette(anychart.palettes.distinctColors('#A1B5DE') );
//chart.background().stroke("5 red");
// set first series data
var area = chart.area();
// set stroke thickness 5px and stroke color as red
area.stroke("5 red");
var marker = chart.lineMarker(0);
marker.value(402);
marker.stroke({
thickness: 2,
dash: "200 0"
});
var marker2 = chart.lineMarker(1);
marker2.value(420);
marker2.stroke({
thickness: 2,
dash: "200 0"
});
chart.xAxis().title('Sample X-Axis Name');
chart.yAxis().title('Sample Y-Axis Name');
chart.xAxis().stroke('2 red');
chart.yAxis().stroke('2 green');
area.markers(true);
area.markers().size(10);
area.markers().fill('#cecece');
var state = area.normal();
// Set fill.
state.fill({
src: 'https://static.anychart.com/images/underwater.jpg',
mode: 'stretch',
opacity: 0.5
});
// add the data
chart.data(data);
chart.container('container');
chart.draw();
});</script>
</body>
</html>
Comments
Post a Comment