Related
I am using apex bar chart in which i want to show values on the bar vertically but it shows horizontally.
I search alot to show value vertically but not find any solution. Please help me to solve this issue. I also share the code.
Here is The script of graph:
<script type="text/javascript">
$(document).ready(function() {
// custom datalabelBar
var options = {
chart: {
height: 350,
type: 'bar',
toolbar: {
show: true
}
},
plotOptions: {
bar: {
horizontal: false,
dataLabels: {
position: 'top',
},
}
},
dataLabels: {
enabled: true,
position: 'top',
formatter: function (val) {
return val ;
},
horizontal: true,
offsetX: 0,
style: {
fontSize: '10px',
colors: ['#000']
}
},
stroke: {
show: false,
width: 1,
colors: ['#fff'],
lineCap: 'round',
curve: 'smooth',
},
series: [{
name: 'Packing',
data: <?php echo json_encode($wd_packing) ?>
}, {
name: 'Dispatch',
data: <?php echo json_encode($wd_dispatch) ?>
},
{
name: 'Remaning',
data: <?php echo json_encode($wd_reaming) ?>
}],
xaxis: {
categories: <?php echo json_encode($wd_week) ?>,
},
}
var chart = new ApexCharts(
document.querySelector("#weekly_dispatch_graph"),
options
);
chart.render();
});
Here is the screenshot of graph:
Please Help me to solve this issue. Thanks in advance.
It is possible! Your question is about dataLabels. ApexCharts give us a common dataLabels option and a dataLabels option depended on chart type. There are options.dataLabels and options.plotOptions.bar.dataLabels respectively.
In the first one you can play with offsetY and in the second one you can configure this labels orientation and their position.
Try to play with this values, good luck :)
var options = {
chart: {
type: 'bar'
},
series: [{
name: 'Packing',
data: [300000, 300000, 500000, 800000]
}, {
name: 'Dispatch',
data: [46577, 296948, 153120, 0]
},
{
name: 'Remaning',
data: [252962, 2382, 235143, 800000]
}
],
xaxis: {
categories: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
},
plotOptions: {
bar: {
dataLabels: {
orientation: 'vertical',
position: 'center' // bottom/center/top
}
}
},
dataLabels: {
style: {
colors: ['#000000']
},
offsetY: 15, // play with this value
},
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts#3.18.1/dist/apexcharts.min.js"></script>
dataLabels: {
position: 'top',
enabled: true,
textAnchor: 'start',
style: {
fontSize: '10pt',
colors: ['#000']
},
offsetX: 0,
horizontal: true,
dropShadow: {
enabled: false
}
},
Note the offsetX: 0 and horizontal: true.
I have a chart.js bar chart that pulls data via an ajax call to a Django APIView. The ajax call returns one dictionary with a stack of data inside I use to customize the chart. Here's the chart.js code:
var current_year = '{% url "saveskore:api-current-year-savings" %}'
$.ajax({
url: current_year,
type: 'GET',
cache: false,
dataType: 'json',
success: function(data) {
var ctx = document.getElementById('current-year-chart');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: data['dates'],
datasets: [
{
label: data['income_label'],
backgroundColor: "#8e5ea2",
data: data['income'],
},
{
label: data['expense_label'],
backgroundColor: 'green',
data: data['expenses'],
},
{
label: data['savings_label'],
backgroundColor: "#3e95cd",
data: data['savings_goal'],
},
{
label: data['avail_label'],
backgroundColor: "#pink",
data: data['avail_to_spend'],
},
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Savings for ' + data['year']
}
}
});
}
});
Works great. Looks great.
But! I have a django formset on a separate page that updates the table data that the chart pulls from.
When I update the data in the formset and submit, redirecting to the chart page ... NO UPDATE OCCURS.
If I make some code change or otherwise reload the browser, VOILA, the chart updates.
I have read about either cache=false and chart.update(), but find i have not been able to make either work, mainly because the exact details on their use are not clear.
I would really appreciate input on this.
Have you tried chart.destroy() method ? and then build again the chart with the new data .. that works for me.. take a look at my example
let flag = 0;
var xChart = "";
function dibujar(valor, meses) {
try {
if (valor.length > 0) {
$('#grafico').fadeIn('fast');
var canvas = document.getElementById('chart');
let tipGra = $('#slcTipGra').val();
if (flag !== 0) {
xChart.destroy();
}
//rgba(54, 162, 235, 0.2)
if (tipGra === "bar" || tipGra === "horizontalBar") {
var data = {
labels: meses,
datasets: [
{
label: "Dólares($)",
backgroundColor: "#3e95cd",
borderColor: "#3e95cd",
borderWidth: 2,
hoverBackgroundColor: "#3e95cd",
hoverBorderColor: "#3e95cd",
data: valor,
}
]
};
var option = {
title: {
display: true,
fontSize: 20,
fontFamily: 'Helvetica',
text: 'Reporte Mensual de Ventas'
},
plugins: {
datalabels: {
color: 'white',
anchor: 'end',
align: 'start',
font:
{
weight: 'bold'
}
}
},
scales: {
yAxes: [{
stacked: true,
gridLines:
{
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: true
}
}]
}
};
}
if (tipGra === 'line') {
var data = {
labels: meses,
datasets: [
{
label: "Dólares($)",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: valor,
}
]
};
var option = {
title: {
display: true,
fontSize: 20,
fontFamily: 'Helvetica',
text: 'Reporte Mensual de Ventas'
},
plugins: {
datalabels: {
backgroundColor: function (context) {
return context.dataset.borderColor;
},
borderRadius: 4,
color: 'white',
anchor: 'end',
align: 'end',
}
},
showLines: true
};
}
xChart = new Chart(canvas,
{
type: tipGra,
data: data,
options: option
});
flag = 1;
}
else {
$('#grafico').fadeOut('fast');
$('#graficoMessage').fadeIn('slow');
}
} catch (err) {
console.log(err);
}
}
I declare "xChart" as a global variable and a flag to know if it's the first chart to build. The example build 3 different types of charts (Vertical Bar, Horizontal Bar and Line) depending on the selection of the chart type "let tipGra = "$('#slcTipGra').val();"
I have a multiselect dropDownList and a chart,i want my chart to by dynamic to plot more based on my multiselect dropdownlist,but i have no idea, I would appreciate if you give me a hint by a demo or an example.because in the following code,i have a chart which works only based normal dropdownlist not the multiplechioce,
Here is Multiselect:
$('#multiselect').kendoMultiSelect({
dataTextField: "Text",
dataValueField: "Text",
valuePrimitive: true,
dataSource: result.list_of_parks,
})
here is the chart:
function createChart(data, data_wind) {
$("#topMonth").kendoChart({
series: [{
data: data,
type: "column",
axis: "l100km",
field: "productionvalue",
categoryField: "name",
color: "#228B22"
},
{
axis: "ava",
data: data_wind,
type: "line",
field: "windvalue",
categoryField: "name",
color: "#007eff",
},
],
valueAxes: [
{
name: "l100km",
title: { text: "Production (MW/H)" },
// min: 0,
// max: 2000000,
// majorUnit: 200000,
majorGridLines: {
visible: false
},
minorGridLines: {
visible: false
},
},
{
name: "ava",
title: { text: "Averge Wind Speed(KM/H)" },
min: 0,
// max: 20,
majorUnit: 1,
majorGridLines: {
visible: false
},
minorGridLines: {
visible: false
},
}
],
categoryAxis: {
majorGridLines: {
visible: false
}
,
labels: {
padding: {
left: -20,
buttom: 0
},
rotation: 340
},
axisCrossingValues: [0, 20],
},
tooltip: {
visible: true,
// majorUnit:10,
template: " #= value #"
},
});
$(window).on("resize", function () {
kendo.resize($(".chart-wrapper"));
});
}
}
});
});
I am getting an error in IE as:
Message: Invalid argument.
Line: 8
Char: 56
Code: 0
URI: .../js/highcharts.js
Below is the highcharts chart code..It works perfectly fine in Firefox but in IE throws an error.Can anybody help me with this. Thanks.
function drawChart(categories,series){
$('#container').highcharts({
chart: {
backgroundColor:'rgba(255, 255, 255, 0.1)',
spacingLeft: -2
},
xAxis: {
categories: categories,
gridLineWidth:0.5,
labels: {
style: {
fontSize:'0px'
}
}
},
colors: ["#a7c1d0"],
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
title: {
text: "Last 45 days NAV Price",
align: 'center',
style:{
color: '#5e605e',
fontSize:'11px',
fontFamily:'Arial'
},
y:1
},
legend: {
enabled:false
},
navigation: {
buttonOptions: {
enabled: false
}
},
yAxis: {
title: {
enabled: true,
text: 'Price',
style: {
color: '#5e605e',
fontSize:'10px',
marginLeft:'-5px;',
fontFamily:'Arial'
}
},
labels:{
style:{
fontSize:'10px'
},
step:0,
},
lineWidth: 1,
tickInterval: 0.20,
minTickInterval:0.20
},
series: [{
data: series
}]
});
}
Could you paste your data? Moreever you have i.e extra common in labels object.
labels:{
style:{
fontSize:'10px'
},
step:0,
},
http://www.highcharts.com/docs/frequently-asked-questions#not-showing-in-explorer
I want to display a KendoUI DataViz grid inside of a KendoUI Grid (display a Kendo chart inside of the Kendo Grid) and I am floundering in the wind on this one. I'm thinking that I need to be working in either the Template or ClientTemplate area of the grid, but I can't even get the most simple of controls to display.
Here is where I am so far...
#(Html.Kendo().Grid<StructurePurchaseDTO>()
.Name("someGrid")
.Columns(c =>
{
c.Bound(x => x.Structure)
.Groupable(true);
c.Bound(x => x.DomesticRatingEffect)
//.ClientTemplate("#=createChart(data)#");
//.Template(#<text>$('#numericTemplate').html()</text>);
//.ClientTemplate("#=createChart(data)#");
})
//....removed for brevity
.DataSource(ds => ds
.Ajax()
.PageSize(10)
.Events(e=>
{
e.Change("Grid_Changed");
})
.Read(r => r.Action("GetData", "Home"))
.Model(m=>m.Id(x =>x.SimulationStructureID))
)
)
//this comes direct from Telerik
function createChart(data) { //I added data b/c I will eventually need to wire this up to a DB
$("#chart").kendoChart({
title: {
text: "Gross domestic product growth /GDP annual %/"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "column"
},
series: [{
name: "India",
data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
}, {
name: "Russian Federation",
data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
}, {
name: "Germany",
data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
}, {
name: "World",
data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
}],
valueAxis: {
labels: {
format: "{0}%"
},
line: {
visible: false
},
axisCrossingValue: 0
},
categoryAxis: {
categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
line: {
visible: false
},
labels: {
padding: { top: 145 }
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
}
#(Html.Kendo().Grid<StructurePurchaseDTO>()
.Name("someGrid")
.Columns(c =>
{
c.Bound(x => x.Structure)
.Groupable(true);
c.Bound(x => x.ResourceRequirements)
.ClientTemplate("#=ResourceRequirementText(data)#")
.Groupable(false);
c.Bound(x => x.DomesticRatingEffect)
.ClientTemplate("<div class='chart' style='width: 200px; height: 200px;'></div>");
})
.Pageable(p => p.Numeric(false)
.ButtonCount(5)
.Refresh(true)
.Input(false)
.Info(true)
.Enabled(true)
)
.Events(e =>
{
e.DataBound("Grid_DataBound");
})
.Reorderable(r => r.Columns(true))
.Resizable(r => r.Columns(true))
.Sortable()
.Groupable()
.DataSource(ds => ds
.Ajax()
.PageSize(5)
.Events(e =>
{
e.Change("Grid_Changed");
})
.Read(r => r.Action("GetStructuresWithGraphs", "Structure"))
.Model(m => m.Id(x => x.SimulationStructureID))
)
)
function Grid_DataBound(e) {
var data = this.dataSource.view();
//this.tbody.find("script").each(function () {
// //debugger;
// eval($(this).html());
//});
//debugger;
$('.chart').each(function () {
var chart = $(this);
chart.kendoChart({
chartArea:{
background: "transparent",
},
legend: {
visible: false,
position: "top"
},
seriesDefaults: {
type: "column",
stack: false
},
series: [{
name: "Culture",
data: [7],
color: "lime"
}, {
name: "Education",
data: [2],
color: "#ff0000",
}, {
name: "Environment",
data: [1],
}, {
name: "Health",
data: [0],
color: "red",
}, {
name: "Safety",
data: [-5],
color: "green",
}, {
name: "Welfare",
data: [0],
}],
valueAxis: {
labels: {
visible: false,
format: "{0}"
},
line: {
visible: false
},
majorTicks: {
color: "#000",
width: 0
},
majorGridLines: {
width: 0,
},
axisCrossingValue: 0,
},
categoryAxis: {
line: {
visible: true
},
majorGridLines: {
width: 0,
},
majorTicks: {
visible: false,
//width: 0
},
labels: {
}
},
tooltip: {
visible: true,
format: "{0}",
template: "#= series.name #: #= value #"
}
});
});
}