.SetXAxis(new XAxis
{
Categories = xyzList.ToArray(),
Labels = new XAxisLabels
{
// Formatter = "function() { return this.labels; }",
Style = "color: 'Black',fontSize: '10px',fontFamily: 'Arial'",
UseHTML = true,
//formatter with image is
Formatter = "function() { return '<div class=\"ImageDiv\" style=\"height:25px; background-image:url(../../Themes/Images/'+ this.value+'.jpg)\"/>';}",
// Formatter = "function() { return this.y;}",
}
})
i want to display YAxis value in to xAsix but it shows undefined.
How can i access YAxis value on the XAXis?
The answer depends on data format you are using. Possible solution: http://jsfiddle.net/3bQne/1036/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['01/02/2012', '01/03/2012', '01/04/2012', '01/05/2012', '01/06/2012', '01/07/2012'],
labels: {
formatter: function () {
var index = this.axis.categories.indexOf(this.value);
var points = this.axis.series[0].options.data;
return points[index];
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
}]
});
Related
i created html source with this and get this code from ampchart js to use mobile application if i use pure code from ampchart its work but i want to put my value to this chart where data variable and i have JSON for this this is my json {"country":"31/08/2565","value":42} i find the way for pur this but its not working
htmlSource.Html = #"
<html><head>
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id=""chartdiv""></div>
</body>
<!-- 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)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: true,
panY: true,
wheelX: ""panX"",
wheelY: ""zoomX"",
pinchZoomX:true
}));
// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
var cursor = chart.set(""cursor"", am5xy.XYCursor.new(root, {}));
cursor.lineY.set(""visible"", false);
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
xRenderer.labels.template.setAll({
rotation: -90,
centerY: am5.p50,
centerX: am5.p100,
paddingRight: 15
});
var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0.3,
categoryField: ""country"",
renderer: xRenderer,
tooltip: am5.Tooltip.new(root, {})
}));
var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
maxDeviation: 0.3,
renderer: am5xy.AxisRendererY.new(root, {})
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: ""Series 1"",
xAxis: xAxis,
yAxis: yAxis,
valueYField: ""value"",
sequencedInterpolation: true,
categoryXField: ""country"",
tooltip: am5.Tooltip.new(root, {
labelText:""{valueY}""
})
}));
series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5 });
series.columns.template.adapters.add(""fill"", function(fill, target) {
return chart.get(""colors"").getIndex(series.columns.indexOf(target));
});
series.columns.template.adapters.add(""stroke"", function(stroke, target) {
return chart.get(""colors"").getIndex(series.columns.indexOf(target));
});
// Set data
var data = [i i wannt to put my value here];
xAxis.data.setAll(data);
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear(1000);
chart.appear(1000, 100);
}); // end am5.ready()</script></html>";
i think below code fill your needs.
private static object GetChartData()
{
var data= new [] { new {
category= "Research",
value= 1000
}, new {
category= "Marketing",
value= 1200
}, new {
category= "Sales",
value= 850
}};
return data;
}
than use returning value inside your html as data
var chartData = JsonConvert.SerializeObject(GetChartData()) ;
var HtmlSource = #"
<html><head>
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id=""chartdiv""></div>
</body>
<!-- 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)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: true,
panY: true,
wheelX: ""panX"",
wheelY: ""zoomX"",
pinchZoomX:true
}));
// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
var cursor = chart.set(""cursor"", am5xy.XYCursor.new(root, {}));
cursor.lineY.set(""visible"", false);
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
xRenderer.labels.template.setAll({
rotation: -90,
centerY: am5.p50,
centerX: am5.p100,
paddingRight: 15
});
var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0.3,
categoryField: ""country"",
renderer: xRenderer,
tooltip: am5.Tooltip.new(root, {})
}));
var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
maxDeviation: 0.3,
renderer: am5xy.AxisRendererY.new(root, {})
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: ""Series 1"",
xAxis: xAxis,
yAxis: yAxis,
valueYField: ""value"",
sequencedInterpolation: true,
categoryXField: ""country"",
tooltip: am5.Tooltip.new(root, {
labelText:""{valueY}""
})
}));
series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5 });
series.columns.template.adapters.add(""fill"", function(fill, target) {
return chart.get(""colors"").getIndex(series.columns.indexOf(target));
});
series.columns.template.adapters.add(""stroke"", function(stroke, target) {
return chart.get(""colors"").getIndex(series.columns.indexOf(target));
});
// Set data
var data = "+chartData+#"
xAxis.data.setAll(data);
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear(1000);
chart.appear(1000, 100);
}); // end am5.ready()</script></html>";
I am using Chart.Js (version 4.1) in Blazor and have managed to get a simple line graph up and running.
Now I need to add the currency symbol to the y Axis (which displays sales total), at the moment it simple displays a number as 4,222
My current Options and DataSets anonymous types are below, these are sent to Chart.JS via JS Interops. Below is what I have tried so far which fails to include the symbol in the tool tip and y axis.
var config = new
{
Type = Type.ToString().ToLower(),
Options = new
{
Responsive = true,
Scales = new
{
y = new
{
ticks = new
{
color = "white"
},
grid = new
{
color = "white",
borderColor = "white",
drawOnChartArea = false
},
scaleLabel = new
{
display = true,
labelString = "Sales Total £",
fontColor = "white"
}
},
x = new
{
ticks = new
{
color = "white"
},
grid = new
{
color = "white",
borderColor = "white",
drawOnChartArea = false
}
}
},
Tooltips = new
{
Callbacks = new
{
Label = "function(tooltipItem, data) { return '$' + tooltipItem.value; }"
}
}
},
Data = ChartData
};
What do I need to modify above to include the currency symbol in the tooltip and yAxis?
Since v3 the tooltip is located under plugins in options: here
This is how it looks in javaScript:
options:{
...
plugins: {
tooltip: {
callbacks: {
label: function (context) {
if (context.parsed.y !== null) {
return context.dataset.label + ": " +
new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR'
}).format(context.parsed.y);
}
return "";
}
}
}
}
...
}
For the y-axis you also can use a callback:
options:{
...
scales: {
y: {
ticks: {
callback: function (value, index, ticks) {
return new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR'
}).format(value);
}
}
}
}
...
}
Attention, note that it is called "tooltip," not "tooltips"!
I am new with Google pie charts. I want to change the style of label like line color of label match with the color of slice if slice is blue then line color should be blue.
And some slice are not showing its label like the yellow and purple slice.
var data3 = google.visualization.arrayToDataTable(ClaimSubmissionStatus);
var options = {
legend: { textStyle: { color: 'black', fontSize: 14 }, position: 'labeled', alignemnt: 'center' },
//is3D: true,
// legend: { position: 'labeled' },
chartArea: { backgroundColor: '#FFFFFF', left: '5%', top: '15', width: '85%' }
};
var charta = new google.visualization.PieChart(document.getElementById('divClaimSubmission'));
charta.draw(data3, options);
google.visualization.events.addListener(charta, 'select', function () {
debugger;
var selectedItem = charta.getSelection()[0];
if (selectedItem) {
var status = data3.getValue(selectedItem.row, 0);
CLAIMSUBMISSIONSTATUSPIECHARTDetail(status);
}
});
there is no documented option for changing the color of the legend marker line,
but you can change manually on the chart's 'ready' event
also, the only solution for ensuring a line exists for each slice is to increase the height of the chart
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Billed', 19],
['Paid Up', 9],
['Not Billed', 2],
['Ready for Review', 15],
['Not Paid Up', 1]
]);
var options = {
chartArea: {
left: 12,
top: 12,
width: '85%'
},
colors: ['#3366cc', '#dc3912', '#ff9900', '#109618', '#990099', '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#9e9e9e', '#607d8b', '#000000', '#ffffff'],
legend: {
position: 'labeled'
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.PieChart(container);
var drawCount = 0;
var drawMax = 100;
google.visualization.events.addListener(chart, 'ready', function () {
var observer = new MutationObserver(function () {
var svg = container.getElementsByTagName('svg');
if (svg.length > 0) {
var legend = getLegend(svg[0]);
// check number of markers
if (legend.length !== data.getNumberOfRows()) {
// increase height & redraw chart
options.height = parseFloat(svg[0].getAttribute('height')) + 32;
drawCount++;
if (drawCount < drawMax) {
chart.draw(data, options);
}
} else {
// change legend marker colors
var colorIndex = 0;
legend.forEach(function (legendMarker) {
legendMarker.path.setAttribute('stroke', options.colors[colorIndex]);
if (legendMarker.hasOwnProperty('circle')) {
legendMarker.circle.setAttribute('fill', options.colors[colorIndex]);
}
colorIndex++;
if (colorIndex > options.colors.length) {
colorIndex = 0;
}
});
}
}
});
observer.observe(container, {
childList: true,
subtree: true
});
});
// get array of legend markers -- {path: pathElement, circle: circleElement}
function getLegend(svg) {
var legend = [];
Array.prototype.forEach.call(svg.childNodes, function(child) {
var group = child.getElementsByTagName('g');
Array.prototype.forEach.call(group, function(subGroup) {
var path = subGroup.getElementsByTagName('path');
if (path.length > 0) {
if (path[0].getAttribute('fill') === 'none') {
var legendMarker = {
path: path[0]
};
var circle = subGroup.getElementsByTagName('circle');
if (circle.length > 0) {
legendMarker.circle = circle[0];
}
legend.push(legendMarker);
}
}
});
});
return legend;
}
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
notes:
1) need to use custom colors in order to keep the slice and line color in sync
2) a MutationObserver is required, the chart will revert on interactions, such as hover or select
3) manual changes will not be reflected when using chart method getImageURI
Not able to generate dynamic line chart with x-axis and series dynamically
I want month wise count for different destination.
I have done like this
function GetDestinationData() {
$.ajax({
async: false,
type: "POST",
url: "DataAnalysis.aspx/getDestination",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: OnSuccess1_,
error: OnErrorCall1_
});
}
function OnSuccess1_(response) {
var Xaxis = [];//skapa tre olika array
var dataseries = [];
for (var i = 0; i < response.d.length; i++) {
var items = response.d[i];
var XcategoreisItem = items.Month;
var seriesData = items;
if ($.inArray(XcategoreisItem, Xaxis) == -1) {
Xaxis.push(XcategoreisItem);
}
dataseries.push(seriesData);
// console.log(dataseries);
}
drawLineChart(Xaxis, dataseries);
}
function drawLineChart(Xaxis, dataseries) {
//categories = seriesData.map(function (a) { return a.x; });
//categories = categories.filter(function (v, i) { return categories.indexOf(v) == i; });
var chart = Highcharts.chart('container', {
chart: {
type: 'line',
//zoomType: 'xy',
//panning: true,
//panKey: 'shift'
},
//chart: {
// renderTo: 'container',
// type: 'line',
// marginRight: 130,
// marginBottom: 25
//},
title: {
text: 'Destination Count Month Wise'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{y}',
}
}
},
xAxis: {
categories: Xaxis
},
yAxis: {
labels: {
formatter: function () {
return this.value ;
}
},
plotLines: [{
//value: 0,
width: 1,
color: '#808080'
}]
},
series: [{
//name: 'Id',
data: dataseries
}],
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
});
for (var i = 0; i < dataseries.length; i++) {
//dataseries = dataseries.filter(function (e) {
// return e.Month == dataseries[i].Month
//}
//);
chart.addSeries({
name: dataseries[i].destination,
data: [dataseries[i].A1ResultCount]
});
//chart.series[i].setData(dataseries[i].data);
}
//chart.redraw();
}
Rendered Chart
Maybe consider using a web-component that handles dynamic data?
Using highcharts-chart you could do:
const chart = $('#Chart')[0]
function OnSuccess1_(response) {
var Xaxis = [];//skapa tre olika array
var dataseries = [];
for (var i = 0; i < response.d.length; i++) {
var items = response.d[i];
var XcategoreisItem = items.Month;
var seriesData = items;
if ($.inArray(XcategoreisItem, Xaxis) == -1) {
Xaxis.push(XcategoreisItem);
dataseries.push({name: items.month, data: items.data_maybe})
}
chart.data = dataseries
}
}
//Example Data
chart.xAxis = {categories: ['Jan','Feb','Mar','Apr','May','Jun']}
chart.data = [43,81,52,84,53,45]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="import" href="https://user-content-dot-custom-elements.appspot.com/avdaredevil/highcharts-chart/v2.0.1/highcharts-chart/highcharts-chart.html">
<highcharts-chart id='Chart' title='Destination Count Month Wise' type='line' y-label='Destinations' x-label='Month'></highcharts-chart>
Note: Click Run code snippet to see the chart
Edit:
As I was writing this answer, I also realized you were setting categories for a line series? You don't need categories, instead, you need multiple series itself, each with their own name corresponding to the month.
I use highchart for show my income in month so i use this code:
public Highcharts ActivityMonthlyChart(string username,string year)
{
//some code to get data
Highcharts charts = new Highcharts("ActivityChart")
.SetTitle(new Title
{
Text = ""
})
.SetXAxis(new XAxis
{
Categories =
new[]
{
"فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی"
,
"بهمن", "اسفند"
}
})
.SetTooltip(new Tooltip
{
Formatter = #"function() {
return '<center><b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'تومان<center>';
}",
Crosshairs = new Crosshairs(true),
})
.SetYAxis(new YAxis
{
Title = new YAxisTitle {Text = "قیمت - تومان"},
PlotLines = new[]
{
new YAxisPlotLines
{
Value = 0,
Width = 10000,
}
},
}
)
.SetSeries(new Series
{
Data = new Data(myObject)
});
return charts;
}
As you can see my local language is persian so my chart should be changed .i mean the y and x axis should be changed to the right how can i do that ?
Best regards .
Add Opposite value to
.SetYAxis(new YAxis
{
Opposite = true;
and Reversed for xAxis
.SetXAxis(new XAxis
{
Reversed = true;