Related
unable to smooth line
I've tried to set tensionX, tensionY, chart.smoothing. However, the line is still not smoothed
Here is the jsfiddle filehttps://jsfiddle.net/cherrykosasih02/wyac0dnq/2/
You cannot use tensionX, tensionY or smoothing with propertyFields. You have to create axis ranges instead. Take a look at the following issue on GitHub:
The smoothed curve algorithm works by bending the path around multiple points.
Now, when you are using propertyFields to color specific section of the line, it creates a separate path for each separately-colored segment. If that segment encompasses only two points, the smoothing algorithm does not have anything to work with, hence the straight line.
If you remove series.propertyFields.stroke = "color"; and replace it with series.smoothing = "monotoneX";, you could do something like this:
function colorize(startDate, endDate, color) {
var range = dateAxis.createSeriesRange(series);
range.date = new Date(startDate + ' 12:00');
range.endDate = new Date(endDate + ' 12:00');
range.contents.stroke = am4core.color(color);
}
for (var i = 0; i < chart.data.length; i++) {
var startDate = chart.data[i].date,
endDate = (i < chart.data.length - 1) && chart.data[i + 1].date,
color = chart.data[i].color;
colorize(startDate, endDate, color);
}
Here is your code with these modifications and additions:
/**
* ---------------------------------------
* This demo was created using amCharts 4.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
*/
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [{
"date": "2012-03-01",
"price": 20,
"color": "#00FF00"
}, {
"date": "2012-03-02",
"price": 75,
"color": "#FF0000"
}, {
"date": "2012-03-03",
"price": 15,
"color": "#00FF00"
}, {
"date": "2012-03-04",
"price": 75,
"color": "#00FF00"
}, {
"date": "2012-03-05",
"price": 158,
"color": "#FF0000"
}, {
"date": "2012-03-06",
"price": 57,
"color": "#FF0000"
}, {
"date": "2012-03-07",
"price": 107,
"color": "#FF0000"
}, {
"date": "2012-03-08",
"price": 89,
"color": "#FF0000"
}, {
"date": "2012-03-09",
"price": 75,
"color": "#00FF00"
}, {
"date": "2012-03-10",
"price": 132,
"color": "#00FF00"
}, {
"date": "2012-03-11",
"price": 380,
"color": "#FF0000"
}, {
"date": "2012-03-12",
"price": 56,
"color": "#00FF00"
}, {
"date": "2012-03-13",
"price": 169,
"color": "#FF0000"
}, {
"date": "2012-03-14",
"price": 24,
"color": "#00FF00"
}, {
"date": "2012-03-15",
"price": 147,
"color": "#00FF00"
}];
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 50;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
/* valueAxis.logarithmic = true; */
valueAxis.renderer.minGridDistance = 20;
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "price";
series.dataFields.dateX = "date";
series.strokeWidth = 3;
// series.propertyFields.stroke = "color";
series.smoothing = "monotoneX"; // <--- HERE
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.fill = am4core.color("#fff");
bullet.circle.strokeWidth = 3;
// Add cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.fullWidthLineX = true;
chart.cursor.xAxis = dateAxis;
chart.cursor.lineX.strokeWidth = 0;
chart.cursor.lineX.fill = am4core.color("#000");
chart.cursor.lineX.fillOpacity = 0.1;
// Add scrollbar
chart.scrollbarX = new am4core.Scrollbar();
// Add a guide
let range = valueAxis.axisRanges.create();
range.value = 90.4;
range.grid.stroke = am4core.color("#396478");
range.grid.strokeWidth = 1;
range.grid.strokeOpacity = 1;
range.grid.strokeDasharray = "3,3";
range.label.inside = true;
range.label.text = "Average";
range.label.fill = range.grid.stroke;
range.label.verticalCenter = "bottom";
// ========================= HERE =========================
function colorize(startDate, endDate, color) {
var range = dateAxis.createSeriesRange(series);
range.date = new Date(startDate + " 12:00");
range.endDate = new Date(endDate + " 12:00");
range.contents.stroke = am4core.color(color);
}
for (var i = 0; i < chart.data.length; i++) {
var startDate = chart.data[i].date,
endDate = (i < chart.data.length - 1) && chart.data[i + 1].date,
color = chart.data[i].color;
colorize(startDate, endDate, color);
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
I am using chartjs to show one month attendance data, what I want to acheive is to show each day data with different colors like Present, absent and leave. I want labels on top and by click on that label user should be able to hide/show that particular label data, below is my code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- HTML -->
<canvas id="chartJsDiv"></canvas>
<script>
function attendanceSummaryChart3(attendence)
{
var datasets = [];
var labels_data = [];
var num_of_hour = [];
var bar_colours = [];
var border_colr = [];
var real_data_count = attendence.length;
for (var i = 0; i < real_data_count; i++) {
var mydate = new Date(attendence[i].date);
var month = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"][mydate.getMonth()];
var str = mydate.getDate() + ' ' +month;
labels_data.push(str);
if(parseFloat(attendence[i].hours.replace(':','.')) < 6.00)
{
if(attendence[i].is_leave != null)
{
var applied_leave_type = attendence[i].is_leave_applied.leave_type.slug;
if(applied_leave_type == "work-from-home")
{
// Full hours in case work from home
num_of_hour.push('9');
bar_colours.push('RGB(25, 135, 84)');
border_colr.push('rgba(3, 126, 25, 0.85)');
// creating datasets
datasets.push({label: 'Work From Home', data: '9', backgroundColor: 'RGB(25, 135, 84)' });
}
else
{
// Leave applied
if(parseFloat(attendence[i].hours.replace(':','.')) == 0)
{
num_of_hour.push('-9');
bar_colours.push('RGB(25, 135, 84)');
border_colr.push('rgba(14, 8, 191, 0.8)');
// creating datasets
datasets.push({label: 'On Leave', data: '-9', backgroundColor: 'RGB(25, 135, 84)'});
}
else
{
num_of_hour.push(parseFloat(attendence[i].hours.replace(':','.')));
bar_colours.push('RGB(25, 135, 84)');
border_colr.push('rgba(14, 8, 191, 0.8)');
// creating datasets
datasets.push({label: 'Half Leave', data: parseFloat(attendence[i].hours.replace(':','.')), backgroundColor: 'RGB(25, 135, 84)'});
}
}
}
else
{
if(parseFloat(attendence[i].hours.replace(':','.')) == 0)
{
// If absent and no leave is applied
num_of_hour.push('-9');
bar_colours.push('RGB(255, 0, 0)');
border_colr.push('rgba(6, 108, 166, 0.8)');
// creating datasets
datasets.push({label: 'Absent (No Leave Applied)', data: '-9', backgroundColor: 'RGB(255, 0, 0)' });
}
else
{
// If present and didn't complete 06 hours in office
num_of_hour.push(parseFloat(attendence[i].hours.replace(':','.')));
bar_colours.push('RGB(255, 0, 0)');
border_colr.push('rgba(255, 99, 132, 1)');
// creating datasets
datasets.push({label: 'Present (Half Time)', data: parseFloat(attendence[i].hours.replace(':','.')), backgroundColor: 'RGB(255, 0, 0)' });
}
}
}
else
{
// Full hours
num_of_hour.push(parseFloat(attendence[i].hours.replace(':','.')));
bar_colours.push('RGB(0, 255, 0)');
border_colr.push('rgba(75, 192, 192, 1)');
// creating datasets
datasets.push({label: 'Present', data: parseFloat(attendence[i].hours.replace(':','.')), backgroundColor: 'RGB(25, 135, 84)' });
}
}
console.log(datasets);
const ctx = document.getElementById('chartJsDiv').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels_data,
datasets: [
{
label: ['Attendence'],
data: num_of_hour,
backgroundColor: bar_colours,
borderColor: border_colr,
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
},
});
}
</script>
I am attaching a screenshot below currently I only have one label but I want multiple labels based on multiple colors bar
You need to use a second dataset to achieve this:
Then you can fill null values in both datasets where you dont use the values of that dataset, so null values on the places where value is negative in positive dataset and vice versa in other one.
Then you can use the property skipNull to make it so the bars dont take up space:
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, null, 3, 5, null, 3],
backgroundColor: 'green'
},
{
label: '# of Points',
data: [null, -11, null, null, -3, null],
backgroundColor: 'red'
}
]
},
options: {
skipNull: true
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>
should be this part
label: ['Attendence', 'newLabel', 'xxx'],
under
const ctx = document.getElementById('chartJsDiv').getContext('2d');
I am using the new amcharts5 and I cannot seem to change my pie chart "slice" and label to a pure number despite referencing my old code and other links.
Basically my code and chart loads, but the issue is my values is depicted in percentages instead of numbers. This is my code below where I tried to address this.
Any assistance will be appreciated.
// Set data
series.data.setAll([
{ value: Type[0], category: "Type 1" },
{ value: Type[1], category: "Type 2" },
{ value: Type[2], category: "Type 3" },
]);
// Create legend
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.percent(50),
x: am5.percent(50),
marginTop: 15,
marginBottom: 15
}));
legend.labels.template.text = "{category}: {value.value}";
legend.slices.template.tooltipText = "{category}: {value.value}";
chart.legend.valueLabels.template.text = "{value.value}";
legend.data.setAll(series.dataItems);
Regards
v5 is completely different from v4, API-wise. In order to configure the pie chart's legend, you have to set it inside the series as documented here:
let series = chart.series.push(
am5percent.PieSeries.new(root, {
name: "Series",
categoryField: "country",
valueField: "sales",
legendLabelText: "{category}",
legendValueText: "{value}"
})
);
Tooltips need to be set on the slices using set or setAll (see the settings documentation for more info):
series.slices.template.set('tooltipText', '{category}: {value}');
Similarly for the slice labels, set the text property using the above functions:
series.labels.template.set('text', '{category}: {value}');
Demo:
var root = am5.Root.new("chartdiv");
root.setThemes([
am5themes_Animated.new(root)
]);
var chart = root.container.children.push(
am5percent.PieChart.new(root, {
layout: root.verticalLayout
})
);
var data = [{
country: "France",
sales: 100000
}, {
country: "Spain",
sales: 160000
}, {
country: "United Kingdom",
sales: 80000
}];
var series = chart.series.push(
am5percent.PieSeries.new(root, {
name: "Series",
valueField: "sales",
categoryField: "country",
legendLabelText: "{category}",
legendValueText: "{value}"
})
);
series.slices.template.set('tooltipText', '{category}: {value}');
series.labels.template.set('text', '{category}: {value}');
series.data.setAll(data);
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.percent(50),
x: am5.percent(50),
marginTop: 15,
marginBottom: 15
}));
legend.data.setAll(series.dataItems);
#chartdiv {
width: 100%;
height: 500px;
}
<script src="//cdn.amcharts.com/lib/5/index.js"></script>
<script src="//cdn.amcharts.com/lib/5/percent.js"></script>
<script src="//cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<div id="chartdiv"></div>
Is there a way to toggle trendline (hide/show with a click) in Amcharts by using legend or any other button.
Please help if anybody encountered this situation.
Thanks in advance.
This is an old post but the previous answer is misleading so could confuse anyone new looking at this.
In Amcharts you can add a trend line as another graph - it just needs to be supplied with data as your other graphs. This will appear in the legend so you can toggle it on/off.
There is no method to hide/show trend lines. So the only way to do this would be remove the trend line from array, validate data and then add it again when needed.
Passing Data to AM-charts in Line Charts using database in Asp.net and C#.
Here is the code it worked for me
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="JSfiles/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var chartDataResults = new Array();
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'sampleLine.aspx/GetDataonload',
data: {},
success:
function (response) {
drawVisualization(response.d);
}
});
function drawVisualization(dataValues) {
for (var i = 0; i < dataValues.length; i++) {
var dataitem = dataValues[i];
var date = dataitem.date;
var cpa = dataitem.cpacount;
//alert(cpa);
var cpi = dataitem.cpicount;
var cpm = dataitem.cpmcount;
chartDataResults.push({
date: date,
cpacount: cpa,
cpicount: cpi,
cpmcount: cpm
});
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 30,
"legend": {
"equalWidths": false,
"periodValueText": "total: [[value.sum]]",
"position": "top",
"valueAlign": "left",
"valueWidth": 100
},
"dataProvider":chartDataResults,
//"dataProvider": [{
// "year": 1994,
// "cars": 1587,
// "motorcycles": 650,
// "bicycles": 121
//}],
"valueAxes": [{
"stackType": "regular",
"gridAlpha": 0.07,
"position": "left",
"title": "Traffic incidents"
}],
"graphs": [{
"balloonText": "<img src='images/icons-02.jpg' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
"fillAlphas": 0.6,
"hidden": true,
"lineAlpha": 0.4,
"title": "CPA Count",
"valueField": "cpacount"
}, {
"balloonText": "<img src='images/icons-03.jpg' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
"fillAlphas": 0.6,
"lineAlpha": 0.4,
"title": "CPI Count",
"valueField": "cpicount"
}, {
"balloonText": "<img src='images/icons-04.jpg' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
"fillAlphas": 0.6,
"lineAlpha": 0.4,
"title": "CPM Count",
"valueField": "cpmcount"
}],
"plotAreaBorderAlpha": 0,
"marginTop": 10,
"marginLeft": 0,
"marginBottom": 0,
"chartScrollbar": {},
"chartCursor": {
"cursorAlpha": 0
},
"categoryField": "date",
"categoryAxis": {
"startOnAxis": true,
"axisColor": "#DADADA",
"gridAlpha": 0.07,
"title": "Year",
"guides": [{
category: "2001",
toCategory: "2016",
lineColor: "#CC0000",
lineAlpha: 1,
fillAlpha: 0.2,
fillColor: "#CC0000",
dashLength: 2,
inside: true,
labelRotation: 90,
label: "Increased Count"
}, {
category: "2016",
lineColor: "#CC0000",
lineAlpha: 1,
dashLength: 2,
inside: true,
labelRotation: 90,
label: "Count"
}]
},
"export": {
"enabled": true
}
});
}
}
});
</script>
C# Code
public static List<ChartDetails> GetDataonload()
{
string Constring = System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString.ToString();
using (SqlConnection con = new SqlConnection(Constring))
{
List<ChartDetails> dataList = new List<ChartDetails>();
SqlCommand cmd = new SqlCommand("Usp_TotalcountCPA_new_usingfunction", con);
cmd.CommandTimeout = 50;
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("#iAdvertiserid", "1000120");
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.SelectCommand = cmd;
DataTable dt = new DataTable();
da.Fill(dt);
con.Close();
foreach (DataRow dtrow in dt.Rows)
{
ChartDetails details = new ChartDetails();
string date = dtrow[4].ToString();
details.date = date.Substring(3, 7);
details.cpacount = dtrow[7].ToString();
details.cpicount = dtrow[10].ToString();
details.cpmcount = dtrow[14].ToString();
details.cvpcount = dtrow[16].ToString();
dataList.Add(details);
}
return dataList;
}
}
public class ChartDetails
{
public string date { get; set; }
public string cpacount { get; set; }
public string cpicount { get; set; }
public string cpmcount { get; set; }
public string cvpcount { get; set; }
// public string CountryCode { get; set; }
}[![enter image description here][1]][1]
[1]: http://i.stack.imgur.com/CvInC.png
I am trying to use Chart Helper in ASP.NET MVC3. But problem i am facing is,only the concerned chart is displayed without the master page.
My code is :
Controller
public ActionResult Chart()
{
Chart chart = new Chart(width: 600, height: 400)
.AddTitle("Chart")
.AddSeries(
chartType: "line",
legend: "Rainfall",
xValue: new[] { "Jan", "Feb", "Mar", "Apr", "May" },
yValues: new[] { "20", "20", "40", "10", "10" }).AddSeries(chartType: "line", yValues: new[] { "30", "40", "50", "60", "70" }).Write("png");
return null;
}
View
#model dynamic
#{
ViewBag.Title = "Chart";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Chart</h2>
<h2>About</h2>
<p><img src="#Url.Action("Chart")" alt="hello chart" /></p>
Please help me to find where i am going wrong.
Thanks in Advance
You need to return the chart as an image. Try this:
public ActionResult Chart()
{
Chart chart = new Chart(width: 600, height: 400)
.AddTitle("Chart")
.AddSeries(
chartType: "line",
legend: "Rainfall",
xValue: new[] { "Jan", "Feb", "Mar", "Apr", "May" },
yValues: new[] { "20", "20", "40", "10", "10" }).AddSeries(chartType: "line", yValues: new[] { "30", "40", "50", "60", "70" })
.GetBytes("png");
return File(chart, "image/png");
}