I am trying to present a graph that shows the current progress with an ongoing project. So basically once you open the plot, it will show you a plot of Passed, Failed and not run test runs in a stacked area.
I want to drilldown on the main data (Passed, Failed, Not Run). I want to basically show the teams(s) that may have passed, failed, or not run. Let's say that you want to drill down on "Passed", once you click on "Passed", it should bring multiple series, each serie containing the team name and the amount of Passed tests.
JSfiddle: https://jsfiddle.net/9aqbLzar/3/
Demo:
Highcharts.Tick.prototype.drillable = function() {};
Highcharts.setOptions({
lang: {
drillUpText: '◁ Go back'
}
});
Highcharts.chart('container', {
chart: {
type: 'area'
},
xAxis: {
type: 'datetime',
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
allowDecimals: false,
title: {
text: "Test runs"
}
},
tooltip: {
shared: false
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: null,
lineWidth: 1,
marker: {
enabled: false,
lineWidth: 1,
lineColor: null,
symbol: 'circle',
radius: 3
}
},
cursor: 'pointer',
trackByArea: true
},
series: [{
name: 'Passed',
data: [{
x: Date.UTC(2017, 09, 06),
y: 20,
drilldown: 'Passed'
}, {
x: Date.UTC(2017, 09, 07),
y: 21,
drilldown: 'Passed'
}, {
x: Date.UTC(2017, 09, 08),
y: 22,
drilldown: 'Passed'
}, {
x: Date.UTC(2017, 09, 09),
y: 23,
drilldown: 'Passed'
}]
},
{
name: 'Failed',
data: [{
x: Date.UTC(2017, 09, 06),
y: 6,
drilldown: 'Failed'
}, {
x: Date.UTC(2017, 09, 07),
y: 5,
drilldown: 'Failed'
}, {
x: Date.UTC(2017, 09, 08),
y: 4,
drilldown: 'Failed'
}, {
x: Date.UTC(2017, 09, 09),
y: 3,
drilldown: 'Failed'
}]
},
{
name: 'Not run',
data: [{
x: Date.UTC(2017, 09, 06),
y: 8,
drilldown: 'Not run'
}, {
x: Date.UTC(2017, 09, 07),
y: 7,
drilldown: 'Not run'
}, {
x: Date.UTC(2017, 09, 08),
y: 6,
drilldown: 'Not run'
}, {
x: Date.UTC(2017, 09, 09),
y: 5,
drilldown: 'Not run'
}]
}
],
drilldown: {
series: [{
id: 'Passed',
data: [{
x: Date.UTC(2017, 09, 11),
y: 1
}, {
x: Date.UTC(2017, 09, 12),
y: 2
}, {
x: Date.UTC(2017, 09, 13),
y: 3
}, {
x: Date.UTC(2017, 10, 14),
y: 5
}]
}, {
id: 'Failed',
data: [{
x: Date.UTC(2017, 09, 09),
y: 5
}, {
x: Date.UTC(2017, 09, 10),
y: 6
}, {
x: Date.UTC(2017, 09, 11),
y: 7
}, {
x: Date.UTC(2017, 10, 12),
y: 8
}, {
x: Date.UTC(2017, 10, 13),
y: 9
}]
}, {
id: 'Not run',
data: [{
x: Date.UTC(2017, 09, 09),
y: 5
}, {
x: Date.UTC(2017, 09, 10),
y: 6
}, {
x: Date.UTC(2017, 09, 11),
y: 7
}, {
x: Date.UTC(2017, 10, 12),
y: 8
}, {
x: Date.UTC(2017, 10, 13),
y: 9
}]
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
First of all, you need to have multiple drilldown series for each series (e.g. three for the 'Passed', three for the 'Failed', three for the 'Not run'). Secondly, the only way to drilldown to more than one series is to add them on drilldown event with a function called addSingleSeriesAsDrilldown. When desired series are added all you need to do is to apply them with applyDrilldown function. Take a look at the example below and in case of any question, feel free to ask.
API Reference:
https://api.highcharts.com/highcharts/chart.events.drilldown
Example:
https://jsfiddle.net/7a6gh7vz/
Related
I have 2 tasks in the same row. The labels are as below:
first task start
first task end
second task start
second task end
Label 3 is missing as it is below 2.
I'd like to have both showing, and preferably both dots separated in the same day so we can see clearly we have two tasks. One ending, another starting
Please find a working sandbox for this example: https://jsfiddle.net/Fmcg/9071Ltz6/12/
And the options:
Highcharts.ganttChart('container', {
title: {
text: 'Gantt Chart with Progress Indicators'
},
yAxis: {
categories: ['Magdala']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
verticalAlign: "top",
format: "{point.custom.label}"
}
}
},
series: [{
type: 'line',
zoneAxis: 'x',
zones: [{
value: Date.UTC(2014, 10, 20)
}, {
dashStyle: 'dot',
value: Date.UTC(2014, 10, 25)
}],
data: [{
y: 0,
x: Date.UTC(2014, 10, 18),
custom: {
label: 1
}
}, {
y: 0,
x: Date.UTC(2014, 10, 25),
custom: {
label: 2
}
}]
}, {
name: 'Project 1',
type: 'line',
zoneAxis: 'x',
zones: [{
value: Date.UTC(2014, 10, 28)
}, {
dashStyle: 'dot',
value: Date.UTC(2014, 10, 29)
}],
data: [{
x: Date.UTC(2014, 10, 25),
y: 0,
custom: {
label: 3
}
}, {
x: Date.UTC(2014, 10, 29),
y: 0,
custom: {
label: 4
}
}]
}]
});
I found out that I can actually add hours, minutes, seconds to Date.UTC. Therefore if task 1 ends at 1pm and task 2 starts at 4pm, it would work.
eg Date.UTC(2014, 10, 25, 13)
I have tried to show 2 series of data in Area chart | Highcharts. Its working fine but there is a whitespace between the series. How to remove the space?
Fiddle : http://jsfiddle.net/alagarrk/0jcg5047/1/
series: [{
name: 'Educated people',
data: [{
x: 0,
y: 20000
}, {
x: 1,
y: 19000
}, {
x: 2,
y: 19000
}, {
x: 3,
y: 18000
}, {
x: 4,
y: 17000
}, {
x: 5,
y: 16000
}, {
x: 6,
y: 15000
}, {
x: 7,
y: 14000
}]
}, {
name: 'Uneducated people',
data: [{
x: 8,
y: 13000
}, {
x: 9,
y: 12000
}, {
x: 10,
y: 11000
}, {
x: 11,
y: 10000
}]
}]
Please check and guide me to fix this issue
There is no "fixing" this issue, you don't have any data between point 7 and 8. What you can do is start series 2 (uneducated people) on point 7. That way it will look connected.
name: 'Uneducated people',
data: [{
x: 7,
y: 13000
}, {
x: 8,
y: 12000
...
Working example: http://jsfiddle.net/0jcg5047/2/
I am working on the Python Django project and have added my HTML in the template folder. Now one of my page needs to render a graph. The data set of the graph is generated from the database and passed to the html.
For a simple graph I have obtained the following code from HERE
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainerSet1",
{
theme: "theme1",
title:{
text: "Restart Count PerDay"
},
animationEnabled: true,
axisX: {
valueFormatString: "MMM",
interval:1,
intervalType: "Date"
},
axisY:{
includeZero: true
},
data: [
{
type: "line",
//lineThickness: 3,
dataPoints: [
{ x: new Date(2012, 00, 1), y: 450 },
{ x: new Date(2012, 01, 1), y: 414},
{ x: new Date(2012, 02, 1), y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle"},
{ x: new Date(2012, 03, 1), y: 460 },
{ x: new Date(2012, 04, 1), y: 450 },
{ x: new Date(2012, 05, 1), y: 500 },
{ x: new Date(2012, 06, 1), y: 480 },
{ x: new Date(2012, 07, 1), y: 480 },
{ x: new Date(2012, 08, 1), y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross"},
{ x: new Date(2012, 09, 1), y: 500 },
{ x: new Date(2012, 10, 1), y: 480 },
{ x: new Date(2012, 11, 1), y: 510 }
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
But now I am not able to feed custom data from the python view.
I tried doing the following:
axisY:{
includeZero: true
},
data: [
{
type: "line",
//lineThickness: 3,
dataPoints: {{myobjectforData}}
}
Also,
axisY:{
includeZero: true
},
data: [
{
type: "line",
//lineThickness: 3,
dataPoints: "{{myobjectforData}}""
}
I am okay to share more code from my python django template html file.
convert x-axis date to text in Html5 5 line chart, currently on x-axis 'jan,feb....' appearing . want to display text like subject name .Here is the refrence site is http://canvasjs.com/html5-javascript-line-chart/
$(function () {
var chart = new CanvasJS.Chart("chartContainer",
{
theme: "theme2",
title:{
text: "Line Chart"
},
animationEnabled: true,
axisX: {
valueFormatString: "MMM",
interval:1,
intervalType: "month"
},
axisY:{
includeZero: false
},
data: [
{
type: "line",
//lineThickness: 3,
dataPoints: [
{ x: new Date(2012, 00, 1), y: 450 },
{ x: new Date(2012, 01, 1), y: 414},
{ x: new Date(2012, 02, 1), y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle"},
{ x: new Date(2012, 03, 1), y: 460 },
{ x: new Date(2012, 04, 1), y: 450 },
{ x: new Date(2012, 05, 1), y: 500 },
{ x: new Date(2012, 06, 1), y: 480 },
{ x: new Date(2012, 07, 1), y: 480 },
{ x: new Date(2012, 08, 1), y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross"},
{ x: new Date(2012, 09, 1), y: 500 },
{ x: new Date(2012, 10, 1), y: 480 },
{ x: new Date(2012, 11, 1), y: 510 }
]
}
]
});
chart.render();
});
You need to put the label key with value to the objects. Here is a jsFiddle.
dataPoints: [{
x: new Date(2012, 00, 1),
y: 450,
label: '2012-00-01'
}, {
x: new Date(2012, 01, 1),
y: 414,
label: '2012-01-01'
}, {
x: new Date(2012, 02, 1),
y: 520,
label: '2012-02-01',
indexLabel: "highest",
markerColor: "red",
markerType: "triangle"
}, {
x: new Date(2012, 08, 1),
y: 410,
label: '2012-08-01',
indexLabel: "lowest",
markerColor: "DarkSlateGrey",
markerType: "cross"
}, {
x: new Date(2012, 09, 1),
y: 500,
label: '2012-09-01'
},
So far I have tried a code, which is a assigning a piece of javascript code and displaying it into with id="myCodeArea". But its not displaying in proper format as I am using JSON.stringify for converting the code in JSON I want code in original form. Can anyone help how to achieve it?
var chart = {
title:{
text: "Books Issued from Central Library"
},
axisY :{
includeZero: false
},
axisX: {
valueFormatString: "MMM",
interval: 1,
intervalType: "month"
},
data: [
{
type: "spline",
indexLabelFontColor: "orangered",
dataPoints: [
{ x: new Date(2012, 00, 1), y: 1352 },
{ x: new Date(2012, 01, 1), y: 1514, indexLabel: "Exams" },
{ x: new Date(2012, 02, 1), y: 1321 },
{ x: new Date(2012, 03, 1), y: 1163 },
{ x: new Date(2012, 04, 1), y: 950 , indexLabel: "Holiday Season"},
{ x: new Date(2012, 05, 1), y: 1201 },
{ x: new Date(2012, 06, 1), y: 1186 },
{ x: new Date(2012, 07, 1), y: 1281, indexLabel: "New Session" },
{ x: new Date(2012, 08, 1), y: 1438 },
{ x: new Date(2012, 09, 1), y: 1305 },
{ x: new Date(2012, 10, 1), y: 1480, indexLabel: "Terms" },
{ x: new Date(2012, 11, 1), y: 1391 }
]
}
]
};
var xyz = document.getElementById("myCodeArea");
xyz.textContent = JSON.stringify(chart);
<div id="myTextArea">
<textarea id ="myCodeArea" cols="100"></textarea>
</div>
Maybe this is a way for you to do the editing (stripped your data items a little) ...
var chart = {
title:{
text: "Books Issued from Central Library"
},
axisY :{
includeZero: false
},
axisX: {
valueFormatString: "MMM",
interval: 1,
intervalType: "month"
},
data: [
{
type: "spline",
indexLabelFontColor: "orangered",
dataPoints: [
{ x: "2012-00-01", y: 1352 },
{ x: "2012-01-01", y: 1514, indexLabel: "Exams" },
{ x: "2012-02-01", y: 1321 }
]
}
]
};
var xyz = document.getElementById("myCodeArea");
xyz.textContent = JSON.stringify(chart);
<div id="myTextArea">
<textarea id ="myCodeArea" cols="100"></textarea>
</div>
... and then when you execute the chart object through your method you do the date parsing something like this:
var some_var = new Date(chart.data[i].dataPoints.x);
If you still need to embed the function itself, here is one way how to embed functions in a string
// function name and parameters to pass
var fnstring = "runMe";
var fnparams = [1, 2, 3];
// find object
var fn = window[fnstring];
// is object a function?
if (typeof fn === "function") fn.apply(null, fnparams);
Src: http://www.sitepoint.com/call-javascript-function-string-without-using-eval/
I changed code xyz.textContent = JSON.stringify(chart, null, 4);
Here 4 is number of spaces you want.
Hope you are expecting this.
var chart = {
title:{
text: "Books Issued from Central Library"
},
axisY :{
includeZero: false
},
axisX: {
valueFormatString: "MMM",
interval: 1,
intervalType: "month"
},
data: [
{
type: "spline",
indexLabelFontColor: "orangered",
dataPoints: [
{ x: new Date(2012, 00, 1), y: 1352 },
{ x: new Date(2012, 01, 1), y: 1514, indexLabel: "Exams" },
{ x: new Date(2012, 02, 1), y: 1321 },
{ x: new Date(2012, 03, 1), y: 1163 },
{ x: new Date(2012, 04, 1), y: 950 , indexLabel: "Holiday Season"},
{ x: new Date(2012, 05, 1), y: 1201 },
{ x: new Date(2012, 06, 1), y: 1186 },
{ x: new Date(2012, 07, 1), y: 1281, indexLabel: "New Session" },
{ x: new Date(2012, 08, 1), y: 1438 },
{ x: new Date(2012, 09, 1), y: 1305 },
{ x: new Date(2012, 10, 1), y: 1480, indexLabel: "Terms" },
{ x: new Date(2012, 11, 1), y: 1391 }
]
}
]
};
var xyz = document.getElementById("myCodeArea");
xyz.textContent = JSON.stringify(chart, null, 4);
<div id="myTextArea">
<textarea id ="myCodeArea" cols="100"></textarea>
</div>