I built a stacked bar chart with drilldown
http://jsfiddle.net/uemit/9CJHq/1/
and I configured the chart to have "marginLeft: 90". But I'd like "marginLeft" to be "40" when the drilldown happens. Is there a way to set marginLeft dynamically?
function setChart(name, categories, data) {
chart.counters.color = 0;
chart.xAxis[0].setCategories(categories);
while (chart.series.length > 0) {
chart.series[0].remove(true);
}
for (var i = 0; i < data.length; i++) {
chart.addSeries({
name: name[i],
data: data[i]
});
}
}
Related
Please refer the image. I need to show datalabels name over on each color of the progress.
var markers = JSON.parse('<%=ConvertDataTabletoString("uspTaskProgress1","",null,1,10) %>');
var colors = ['skyblue', 'orange', 'red','blue'];
var statusprogress = ['Overall Subtask Percentage'];
var Arrayset = [];
var starts1 = [];
var ends1 = [];
var val1 = [];
var val2 = [];
var categories = [];
if (markers != null) {
if (markers.length > 0) {
var prj=document.getElementById("param1").value;
for (var i = 0; i < markers.length; i++) {
var syearval = parseInt(markers[i].ActualStart.substr(0, 4));
var smonthval = parseInt(markers[i].ActualStart.substr(5, 2))-1;
var sdateval = parseInt(markers[i].ActualStart.substr(8, 2));
var eyearval = parseInt(markers[i].ActualEnd.substr(0, 4));
var emonthval = parseInt(markers[i].ActualEnd.substr(5, 2))-1;
var edateval = parseInt(markers[i].ActualEnd.substr(8, 2));
val1 = [Date.UTC(syearval, smonthval, sdateval)];
val2 = [Date.UTC(eyearval, emonthval, edateval)];
starts1.push(val1[0]);
ends1.push(val2[0]);
Arrayset.push({ color:colors[i],name: markers[i].Task, start: starts1[i], end: ends1[i], completed: markers[i].OverallSubtaskPercentage, y:0});
}
for (var j = 0; j < markers.length; j++) {
categories.push(markers[j].Task);
}
MainLoadChart(Arrayset, categories);
}
}
function MainLoadChart(array,categories) {
var dta = array;
Highcharts.ganttChart('container8', {
chart: {
type: 'xrange'
},
xAxis: {
type: 'datetime'
},
yAxis: {
categories: categories,
},
title: {
text: 'Task Progress Indicator Status'
},
tooltip: {
formatter() {
let output = ` <span style="font-size: 20px;color:green">${prj}</span><br>
<span><b>${this.key}(Overall Subtask Percentage):${this.point.completed}% </b></span><br>
<span>Start: ${Highcharts.dateFormat('%A, %e. %b, %Y', this.x)}</span><br>
<span>End: ${Highcharts.dateFormat('%A, %e. %b, %Y', this.x2)}</span>`
return output
}
},
series: [{
data:dta,
dataLabels: {
formatter() {
let output1 = ` <span style="font-size: 10px">${this.point.completed}%</span>`
return output1
}
}
}]
});
}
I added datalabels property in series.data but it's not showing in the output. Can let us know how to add the data labels name on each color of the task progress. Image attached. It's a highcharts gantt chart.Code is attached please have a review on the code
You can set the dataLabels options, like formatter to set what data label should display, for each point in the data config.
Like this:
data: [{
name: 'test1',
start: Date.UTC(2014, 10, 18),
end: Date.UTC(2014, 10, 25),
completed: 0.25,
y: 0,
dataLabels: {
enabled: true,
x: 150,
formatter() {
return 'test1'
}
}
}, ...]
Demo: https://jsfiddle.net/BlackLabel/am0w5Lkr/
In the above demo I set the x to some fixed value because I am not sure if your chart should be responsive or not. In case of the responsive chart, I encourage to use the render callback https://api.highcharts.com/highcharts/chart.events.render to calculate datalabels position after each resizes.
API: https://api.highcharts.com/highcharts/series.line.dataLabels.x
API: https://api.highcharts.com/highcharts/series.line.dataLabels.formatter
I am trying to implement Drill-down with stacked bar chart.
Issue is when I click on chart it shows drill down detail but it shows more category then I am assigning.
So, could you please help me to fix the issue?
My code is available in JSFIDDLE
function setChart(name, categories, data, color, level, type) {
alert("Chart should have categories :-" + categories.length)
chart.xAxis[0].setCategories(categories);
//chart.xAxis[0].categories = categories;
var dataLen = data.length;
for (var i = 0; i < chart.series.length; i++) {
chart.series[0].remove();
}
for (var i = 0; i < dataLen; i++) {
chart.addSeries({
type: type,
name: name,
data: data[i],
level: level,
color: color || 'white'
});
}
}
You need to update max property:
chart.xAxis[0].update({
categories: categories,
max: categories.length - 1
}, false);
Live demo: https://jsfiddle.net/BlackLabel/zkquLt0y/
API Reference: https://api.highcharts.com/highcharts/xAxis.max
I use highchart (spider)
I want to give different color for each grid line of y axis.
Is there any elegant way to do that (I mean - without jQuery and complex css selectors)
Please see attached picture.
You can wrap renderGridLine method from the Tick prototype:
(function(H) {
var colors = ['#0050d1', '#de0735', '#00e031', '#ffb300', '#c800ff'],
i = 0;
H.wrap(H.Tick.prototype, 'renderGridLine', function(proceed) {
if (!this.axis.isXAxis) {
this.axis.options.gridLineColor = colors[i];
if (this.isLast) {
i = 0;
} else {
i++;
}
}
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/45fh27tc/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
Or set the color afrer chart initialization in a load event:
var colors = ['#0050d1', '#de0735', '#00e031', '#ffb300', '#c800ff'];
Highcharts.chart('container', {
chart: {
...
events: {
load: function() {
var yAxis = this.yAxis[0];
yAxis.tickPositions.forEach(function(tPos, i) {
yAxis.ticks[tPos].gridLine.attr({
stroke: colors[i]
});
});
}
}
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/xbLtur48/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
https://api.highcharts.com/highcharts/chart.events.load
I am plotting a 3D line chart over time. Each time the count changes at the end of the loop, a new point is plotted for each series. Is there a way to set the value of the legend as the value of count in my example code? The count represents hours since the start of an experiment, so being able to display this is necessary. Thanks!
events: {
load: function() {
var thischart = this;
for (i = 0; i < allpoints.length; i++) {
thischart.addSeries({
enableMouseTracking: false,
lineWidth: 1,
marker: {
enabled: false
},
data: [0, 0, 0]
}, false)
thischart.redraw(false);
}
setInterval(function() {
if (count >= max_data_length) {
if (!pause_at_end) {
for (i = 0; i < allpoints.length; i++) {
thischart.series[i + marker_series_length].setData([0, 0, 0], false);
}
thischart.redraw(false);
count = 1;
} else {
is_paused = true;
document.getElementById('pauseit').value = "Unpause";
}
}
if (!is_paused) {
for (i = 0; i < allpoints.length; i++) {
if (allpoints[i].length > count) {
thischart.series[i + marker_series_length].addPoint([
allpoints[i][count][0], allpoints[i][count][2], allpoints[i][count][1]
], false);
}
}
thischart.redraw(false);
count = count + 4;
}
}, 10)
}
}
You can use series.update method to set new data and change the series name in legend:
chart: {
...,
events: {
load: function() {
var counter = 0,
series = this.series[0];
setInterval(function() {
counter++;
series.update({
data: getRandomData(),
name: 'Name ' + counter
});
}, 1000);
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/7bq21tak/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#update
Thanks ppotaczek! This pointed me in the right direction. I used chart.update instead to update the subtitle. Here is the code I used:
chart.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
style: {
fontSize: '20px'
},
text:'Day:'+ countdays
}
});
I'm trying to get this canvasJS line chart to render using thymeleaf rather than JSP.
It has the following loop in jsp that I need to convert to javascript. However I'm not proficient in javascript
<c:forEach items="${dataPointsList}" var="dataPoints" varStatus="loop">
<c:forEach items="${dataPoints}" var="dataPoint">
xValue = parseInt("${dataPoint.x}");
yValue = parseFloat("${dataPoint.y}");
dps[parseInt("${loop.index}")].push({
x : xValue,
y : yValue,
});
</c:forEach>
</c:forEach>
The above $dataPointList is created in java as follows
static List<Map<Object, Object>> dataPoints1 = new ArrayList<Map<Object, Object>>();
static {
int limit = 50000;
int y = 100;
Random rand = new Random();
for (int i = 0; i < limit; i += 1) {
y += rand.nextInt(11) - 5;
map = new HashMap<Object, Object>();
map.put("x", i);
map.put("y", y);
dataPoints1.add(map);
}
list.add(dataPoints1);
}
public static List<List<Map<Object, Object>>> getCanvasjsDataList() {
return list;
}
I've tried the following however dps[parseInt(i)].push({ gives a type error. I'm not sure how to create the required data structure for canvasJS given the datalist defined in java.
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript" th:inline="none" class="init">
/*<![CDATA[*/
window.onload = function (e) {
var dps = [[]];
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2", // "light1", "dark1", "dark2"
animationEnabled: true,
zoomEnabled: true,
title: {
text: "Try Zooming and Panning"
},
data: [{
type: "area",
dataPoints: dps[0]
}]
});
var xValue;
var yValue;
var dataPointsList = /*[[${dataPointsList}]]*/ 'default';
for (var i = 0; i < dataPointsList.length; i++) {
var dataPoints = dataPointsList[i];
for (var j = 0; j < dataPoints.length; j++) {
dps[parseInt(i)].push({
x : dataPoints[j].x,
y : dataPoints[j].y,
});
}
}
chart.render();
}
/*]]>*/
</script>
The following adjustments have resulted in the graph displaying
<script type="text/javascript" th:inline="javascript" class="init">
/*<![CDATA[*/
window.onload = function (e) {
var dps = [];
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2", // "light1", "dark1", "dark2"
animationEnabled: true,
zoomEnabled: true,
title: {
text: "Try Zooming and Panning"
},
data: [{
type: "area",
dataPoints: dps
}]
});
var dataPointsList = /*[[${dataPointsList}]]*/ 'null';
count = 0;
for (var i = 0; i < dataPointsList.length; i++) {
var dataPoints = dataPointsList[i];
for (var j = 0; j < dataPoints.length; j++) {
dps[count++] = {
x: dataPoints[j].x,
y: dataPoints[j].y
};
}
}
chart.render();
}
/*]]>*/
</script>