I'm feeling a bit lost when it comes to loading json data into the Highcharts combo pie/bar chart. Below is an example code that's a work in progress. I just need some help understanding how to load the json and structure the data series correctly. Appreciate any assistance!
Is the highlighted code section correct? The project is on my local development server and the
jsonfile is also local.Starting with the Status and ID values from the
jsonfile, how should the data series be formatted in the JavaScript code?
For instance:
name: 'id',
data: processed_json
-Begin Code example html/js-
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>xxxxxxxx Automation</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
// Load json data
// var processed_json = new Array();
//$.getJSON('json_output.json', function(data) {
// // Populate series
// for (i = 0; i < data.length; i++){
// processed_json.push([data[i].key, data[i].value]);
$('#container').highcharts({
title: {
text: 'xxxxxxxxxxxxxx'
},
xAxis: {
categories: ['Nightly Scheduled Smoke Test', 'New Release Test', 'Regression Test', ' Discovery Test']
},
labels: {
items: [{
html: 'xxxxxxxxx Validation',
style: {
left: '55px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
type: 'column',
name: 'Ad-Hoc',
data: [3, 5, 5, 8]
}, {
type: 'column',
name: 'Create Order',
data: [3, 5, 5, 8]
}, {
type: 'column',
name: 'Create-Express-Ready-Parameter',
data: [3, 5, 5, 8]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[2],
fillColor: 'white'
}
}, {
type: 'pie',
name: 'xxxxxxx Passed',
data: [{
name: 'Ad-Hoc',
y: 13,
color: Highcharts.getOptions().colors[0] // Ad-Hoc's color
}, {
name: 'Create Order',
y: 23,
color: Highcharts.getOptions().colors[1] // Create Order's color
}, {
name: 'Create-Express-Ready-Parameter',
y: 19,
color: Highcharts.getOptions().colors[2] // Create-Express-Ready-Parameter's color
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
<p><center>
The following XXXXXn Report illustrates current Pass validation by test category.
<p> * Green represents the number of passed scenarios
<p> * Black represents the number of scenarios that are in progress or dev/test.
<p> * Blue represents the number of failed scenarios.
</p>
</center>
</html>
-snippet of json-
[
{
"uri": "features/TC-0001-Bill-Of-Laiding-Shipping.feature",
"id": "check-pricing-for-bill-of-laiding",
"keyword": "Feature",
"name": "Check Pricing for Bill of Laiding",
"description": "",
"line": 3,
"tags": [
{
"name": "@Bill-Of-Laiding-Shipping",
"line": 1
}
],
"elements": [
{
"id": "check-pricing-for-bill-of-laiding;check-pricing-for-bill-of-laiding",
"keyword": "Scenario",
"name": "Check Pricing for Bill of Laiding",
"description": "",
"line": 5,
"type": "scenario",
"tags": [
{
"name": "@Bill-Of-Laiding-Shipping",
"line": 1
}
],
"steps": [
{
"keyword": "Given ",
"name": "TC-0006-Log into One Lisa",
"line": 7,
"match": {
"location": "features/step_definitions/my_steps.rb:779"
},
"result": {
"status": "passed",
"duration": 9024120000
}
},
{
"keyword": "Then ",
"name": "TC-0001-Bill-Of-Laiding Query onleLisa (Lisa_One) to access existing Bill Of laiding",
"line": 8,
"match": {
"location": "features/step_definitions/my_steps.rb:1194"
},