add data to a chart - javascript

Looking in Api 2.0p5 and the charts.
I am looking for a variant of the Throughput chart, with basically has...
last 12 months across the bottom
total count on the left side of chart
stacked columns for stories and defect count
spine line going across for story points, secondary y axis for points
So I have all this working in my rally app so far, except all my numbers are currently hardcoded. How do I go about getting this information properly into my chart?
I saw an example of using a store, but seemed quirky and honestly, I dont know where i saw it to try and duplicate.
Code is below, if anyone has ideas or thoughts I would appreciate it:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="240" />
<title>Throughput Chart</title>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0p5/sdk.js?debug=true"></script>
<script type="text/javascript">
Rally.onReady(function () {
Ext.create('Ext.Container', {
items: [
{
xtype: 'rallychart',
height: 400,
series: [{
name: 'Defect Count',
data: [2, 2, 3, 2, 1, 4, 2, 3, 5, 3, 5, 4]
}, {
name: 'Story Count',
data: [3, 4, 4, 2, 5, 3, 4, 5, 6, 3, 4, 8]
}, {
name: 'Story Points',
color: '#89A54E',
type: 'spline',
yAxis: 1,
data: [55, 34, 50, 31, 44, 61, 55, 22, 50, 48, 34, 44]
}],
chartConfig: {
chart: {
type: 'column'
},
title: {
text: 'Kanban State Counts',
align: 'center'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: [{
title: {
text: 'Count'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
}
}
},
{
opposite: true,
title: {
text: 'Story Points'
}
}],
}
}
],
renderTo: Ext.getBody().dom
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>

Here's a basic example that uses User Story data in a WsapiDataStore. The code simply summarizes the Stories by ScheduleState and adds the counts to a Ext.data.store. Then the App uses the Rally.ui.chart.ChartView component to display the Story Count by Schedule State in a bar chart.
<!DOCTYPE html>
<html>
<head>
<title>ChartExample</title>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0p5/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
Ext.create('Rally.data.WsapiDataStore', {
model: 'UserStory',
autoLoad: true,
listeners: {
load: this._onDataLoaded,
scope: this
}
});
},
_onDataLoaded: function(store, data) {
var records = [];
var scheduleStateGroups = ["Defined","In-Progress","Completed","Accepted"]
// State count variables
var definedCount = 0;
var inProgressCount = 0;
var completedCount = 0;
var acceptedCount = 0;
// Loop through returned data and group/count by ScheduleState
Ext.Array.each(data, function(record) {
//Perform custom actions with the data here
//Calculations, etc.
scheduleState = record.get('ScheduleState');
switch(scheduleState)
{
case "Defined":
definedCount++;
break;
case "In-Progress":
inProgressCount++;
break;
case "Completed":
completedCount++;
break;
case "Accepted":
acceptedCount++;
}
});
//Create a store containing the chart data
var scheduleStateStore = Ext.create('Ext.data.Store', {
fields: ['KanbanState', 'ObjectID_Count'],
data: {
rows: [
{ScheduleState: 'Defined', ObjectCount: definedCount},
{ScheduleState: 'InProgress', ObjectCount: inProgressCount},
{ScheduleState: 'Completed', ObjectCount: completedCount},
{ScheduleState: 'Accepted', ObjectCount: acceptedCount}
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'rows'
}
}
});
// Configure and Add the chart
this.add(
{
xtype: 'rallychart',
height: 400,
series: [
{
type: 'column',
dataIndex: 'ObjectCount',
name: 'Count',
visible: true
}
],
store: scheduleStateStore,
chartConfig: {
chart: {
},
title: {
text: 'User Story Schedule State Counts',
align: 'center'
},
xField : 'ScheduleState',
xAxis: [
{
categories: scheduleStateGroups,
title: {
text: 'ScheduleState'
}
}
],
yAxis: {
title: {
text: 'Count'
}
},
plotOptions : {
column: {
color: '#F00'
},
series : {
animation : {
duration : 2000,
easing : 'swing'
}
}
}
}
}
);
}
});
Rally.launchApp('CustomApp', {
name: 'ChartExample'
});
});
</script>
<style type="text/css">
.app {
/* Add app styles here */
}
</style>
</head>
<body></body>
</html>

Related

ECharts how to set different symbol for different marklines in one chart

In echarts, I have a bar chart, I want to add two markLine for it, but for the 'average' line I need the arrow style, for the 'test' line I do not want any symbol at the start and end of the line.
When I use below setting,it will set all markLines without arrow while I want to control each markLine's style separately.
markLine: {
symbol:"none",
data:[]
}
function format(data)
{
data = parseFloat(data);
return data.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
}
var columns_basic_element = document.getElementById("columns_basic");
// Basic columns chart
if (columns_basic_element) {
// Initialize chart
var columns_basic = echarts.init(columns_basic_element);
var data_parts = [12164.58, 13251.94, 21927.18, 13945.88, 13339.14, 21756.32, 19340.50, 22307.53];
var data_labor = [82757.65,97032.46,112864.88,83359.07,85858.48,186564.83,118206.58,132575.22];
//
// Chart config
//
// Options
columns_basic.setOption({
// Define colors
color: ['#5ab1ef', '#d87a80', '#ffb980', '#2ec7c9', '#b6a2de'],
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Chart animation duration
animationDuration: 750,
// Setup grid
grid: {
left: 0,
right: 90,
top: 35,
bottom: 0,
containLabel: true
},
// Add legend
legend: {
data: ['Parts', 'Labor'],
itemHeight: 8,
itemGap: 20,
textStyle: {
padding: [0, 5]
}
},
// Add tooltip
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
}
},
// Horizontal axis
xAxis: [{
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#eee',
type: 'dashed'
}
}
}],
// Vertical axis
yAxis: [{
type: 'value',
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
lineStyle: {
color: ['#eee']
}
},
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return '$' + Intl.NumberFormat().format((value/1000));
}
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.01)']
}
}
}],
// Add series
series: [
{
name: 'Labor',
type: 'bar',
data: data_labor,
label: {
normal: {
formatter: function (params) {
var val = format(params.value);
return val;
},
show: true,
//position: 'inside'
},
},
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
fontWeight: 500
}
}
}
},
markLine: {
symbol:"none",
data: [
{
// I want to set symbol:none for this line only
name: 'test',
yAxis:120000 ,
label: {
position: 'insideEndTop',
normal: {
formatter: '{b}:{c}',
show: true
},
}
},
{
//keep its original style
type: 'average',
name: 'Average',
label: {
position: 'insideEndTop',
normal: {
formatter: '{b}:{c}',
show: true
},
}
}]
}
}
]
});
}
.chart-container {
position:relative;
width:100%;
}
.chart {
position:relative;
display:block;
width:100%;
}
.has-fixed-height {
height:400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script>
<div class="chart-container">
<div class="chart has-fixed-height" id="columns_basic"></div>
</div>
I showed to you almost all of possible tweaks without hacking sources, if you need more — try to read by yourself:
Base Concepts
MarkerModel.js
MarkLineView.js
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: [{
data: ["1", "2", "3", "4", "5", "6"]
},{
data: ["1", "2", "3", "4", "5", "6"],
show: false,
}],
yAxis: {},
series: [
{
name: 'Series1',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
markLine: {
data: [{
symbol: 'none',
name: 'max line',
type: 'max',
lineStyle: {
normal: {
type:'solid',
color: 'blue',
}
},
}],
}
},{
name: 'Series2',
type: 'bar',
data: [0,0],
xAxisIndex: 1,
label: { show: false },
markLine: {
symbol: 'none',
data: [{
yAxis: 24,
label: {
normal: {
show: false,
}
},
lineStyle: {
normal: {
type:'dashed',
color: 'green',
}
},
}],
}
}]
}
myChart.setOption(option);
<div id="main" style="width: 600px;height:600px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script>
You have mistake with incorrect symbol declaration, do like this:
markLine: {
symbol: 'icon' // <---- it's wrong
data: [{
symbol: 'diamond', // <---- it's right
symbolSize: 30,
name: 'average line',
type: 'average'
},{
symbol: 'circle',
symbolSize: 30,
name: 'max line',
type: 'max'
}]
}
var myChart = echarts.init(document.getElementById('main'));
// Unsert your code below
var option = {
xAxis: {
data: ["1", "2", "3", "4", "5", "6"]
},
yAxis: {},
series: [{
name: 'Series1',
stack: '1',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
markLine: {
data: [{
symbol: 'diamond',
symbolSize: 30,
name: 'average line',
type: 'average'
},{
symbol: 'circle',
symbolSize: 30,
name: 'max line',
type: 'max'
}]
}
}]
}
myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

Proper format of json for Highchart.js with multiple series

I have examples json data for Higcharts USD currency:
https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json
So i added simply one value to data, there not show in a chart.
[
[
1167609600000,
50,
30
],
[
1167609600001,
60,
40
],
[
1167609600002,
70,
50
]
]
My code:
function myFunction() { Highcharts.getJSON(
'http://192.168.0.157/log1.json', function (data) {
Highcharts.chart('container', {
chart: {
zoomType: 'x', backgroundColor:"#e7ecea"
},
title: {
text: 'Pomiary'
},
subtitle: {
text: document.ontouchstart === undefined ?
'select' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'speed',
data: data
}, {
type: 'area',
name: 'speed2',
data: data
}]
}); } );
};
How i can add next series?
The simplest way is to use keys property:
series: [{
data: data
}, {
keys: ['x', 'someValue', 'y'],
data: data
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4797/
API Reference: https://api.highcharts.com/highcharts/series.line.keys

Highcharts chart didn't redraw after vue data changed

I grab the example from: https://www.highcharts.com/demo/column-stacked
Also referring some of the code from: How to use Vue bound data in Highcharts?
I build a sample as bellow:
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/7.1.1/highcharts.js"></script>
</head>
<body>
<div id="app">
<div id="container">
</div>
</div>
</body>
</html>
<script>
new Vue({
el: "#app",
data: {
chart: undefined,
config: {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'John',
data: [3, 3, 4, 8, 2]
}, {
name: 'Jane',
data: [3, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 3, 5]
}]
},
},
mounted() {
this.render();
// simulation of some data changing after some time
setTimeout(() => {
this.config.series = [{
name: 'John',
data: [53, 23, 24, 27, 32]
}, {
name: 'Jane',
data: [23, 22, 23, 32, 31]
}, {
name: 'Joe',
data: [33, 24, 24, 32, 35]
}]
console.log('updated')
}, 3000)
},
watch: {
config() {
this.render();
},
},
methods: {
render() {
this.chart = Highcharts.chart('container', this.config)
}
}
})
</script>
But I don't know why the chart wouldn't redraw after config.series updated ( with higher value of each category).
The problem is your config watcher only watch the change of config not its nested properties so this.config.series = [...] won't trigger your watcher.
First solution, use deep option:
watch: {
config: {
handler() {
this.render()
},
deep: true
}
}
Demo
Second solution, use spread syntax to assign the whole object:
this.config = {
...this.config,
series: [{ /* */ }]
}
Demo
Here is the solution for you:
Destruct the config object in render method to lose a reference:
render() {
this.chart = Highcharts.chart('container', {...this.config});
}
Change your config watcher to deep (that way watcher will react when you are changing property that belongs to the object e.g. this.config.series = [...]):
config: {
deep: true,
handler() {
this.render();
}
}

Echarts how do you add dashed vertical line in between specific bars on bar chart?

I am working with Echarts and created a bar chart. I am trying to add two vertical dashed lines to separate Source3 and Source4 and another dashed vertical line to show separation of SourceSix and SourceSeven. I have tried messing around with markLine to a bar and adding a line as part of the data after a bar but I can seem to figure this out.
The code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- including ECharts file -->
<script src="echarts.js"></script>
</head>
<body>
<!-- prepare a DOM container with width and height -->
<div id="main" style="width: 1600px;height:800px;"></div>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
title: {
text: 'Counts by Intel Source'
},
legend: {
data:['Count']
},
xAxis: {
type: 'category',
data: ['SourceOne','SourceTwo','SourceThree','SourceFour','SourceFive','SourceSix','SourceSeven','SourceEight'],
axisLabel: {
fontWeight: 'bold',
fontSize: 16,
margin: 1,
}
},
yAxis: {
type: 'log',
axisLabel: {
fontWeight: 'bold',
}
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
series: [
{
name: 'SourceOne',
type: 'bar',
stack: 'Chart 1',
color: '#ed2d2e',
data: [1819931,,,,,,,],
},
{
name: 'SourceTwo',
type: 'bar',
stack: 'Chart 1',
color: '#0bb5b5',
data: [,1291396,,,,,,]
},
{
name: 'SourceThree',
type: 'bar',
stack: 'Chart 1',
color: '#662c91',
data: [,,161,,,,,]
},
{
name: 'SourceFour',
type: 'bar',
stack: 'Chart 1',
color: '#0e107b',
data: [,,,133279,,,,]
},
{
name: 'SourceFive',
type: 'bar',
stack: 'Chart 1',
color: '#a11d20',
data: [,,,,1275,,,]
},
{
name: 'SourceSix',
type: 'bar',
stack: 'Chart 1',
color: '#f37d22',
data: [,,,,,119,,]
},
{
name: 'SourceSeven',
type: 'bar',
stack: 'Chart 1',
color: '#008c47',
data: [,,,,,,25224,]
},
{
name: 'SourceEight',
type: 'bar',
stack: 'Chart 1',
color: '#1859a9',
data: [,,,,,,,6798]
},
]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
</script>
Desired output:
I've managed to achieve a similar effect to what you're looking for using the following option: I've converted your x-axis to be a 'value' x-axis, so that we can put markerLines at specific places in between your series. In doing so, you need to assign an x-axis index to each of your data points, but it also allows you to add an additional point to sourceThree and sourceSix which would let you draw a line in between the two as a type:'average' markLine:
option = {
title : {
text: 'Chart Title',
subtext: 'subtitle'
},
tooltip : {
trigger: 'axis',
axisPointer:{
show: true,
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
},
formatter : function (params) {
return params.seriesName + ' : [ '
+ params.value[0] + ', '
+ params.value[1] + ' ]';
}
},
xAxis : [
{
type : 'value'
}
],
yAxis : [
{
type : 'log',
axisLine: {
lineStyle: {
color: '#dc143c'
}
}
}
],
series : [
{
name:' SourceOne',
type:'bar',
data:[
[1, 1819931]
]
},
{
name:' SourceTwo',
type:'bar',
data:[
[2, 1291396]
]
},
{
name:' SourceThree',
type:'bar',
data:[
[3, 161], [4, 0]
],
markLine : {
silent: true, // ignore mouse events
data : [
// Horizontal Axis (requires valueIndex = 0)
{type : 'average', name: 'Marker Line', valueIndex: 0, itemStyle:{normal:{color:'#1e90ff'}}},
]
}
},
{
name:' SourceFour',
type:'bar',
data:[
[4, 133279]
]
},
{
name:' SourceFive',
type:'bar',
data:[
[5, 1275]
]
},
{
name:' SourceSix',
type:'bar',
data:[
[6, 119], [7, 0] // this extra data point is the hack to get your marker line in between your series
],
markLine : {
silent: true, // ignore mouse events
label: {show: false},
data : [
// Horizontal Axis (requires valueIndex = 0)
{type: 'average', name: 'Line Marker', valueIndex: 0},
]
}
},
{
name:' SourceSeven',
type:'bar',
data:[
[7, 25224]
]
},
{
name:' SourceEight',
type:'bar',
data:[
[8, 6798]
]
}
]
};
This should result in the following chart, and you can try it yourself by pasting that option here:
https://echarts.baidu.com/echarts2/doc/example/bar13.html#

Change xAxis and yAxis title of drilldown chart after entering into second series

I drew a drilldown chart and I don't know how to change both x-Axis and y-Axis title after clicking the bars and go to second chart. Also how to change to default title after clicking drillUp button and go back to first chart.
For example, I want my first chart's x-Axis title to be "Percentage Arange" and y-Axis title to be "Number of Schools". And second chart's x-Axis title to be "School Name" and yAxis title to be "Percentage".
I searched for some related code. There is one about how to change the title of the drilldown chart:
var defaultTitle = "Basic drilldown";
var drilldownTitle = "More about ";
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container',
events: {
drilldown: function(e) {
chart.setTitle({ text: drilldownTitle + e.point.name });
},
drillup: function(e) {
chart.setTitle({ text: defaultTitle });
}
}
},
title: {
text: defaultTitle
},
// ... more options});
However, i don't know how to use for my case.
Here is the code:
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category',
title: {
enabled: true,
text: "Percentage Range"
}
},
yAix: {
title: {
enabled: true,
text: "Number of Schools"
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
grouping: false,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
pointPadding: 0,
data: [{
name: '100-70%',
y: 5,
drilldown: '100-70%'
}]
}, {
name: 'Things',
colorByPoint: true,
pointPadding: 0.1,
data: [{
name: '70-30%',
y: 2,
drilldown: '70-30%'
}]
}, {
name: 'Things',
colorByPoint: true,
pointPadding: 0.3,
data: [{
name: '30-0%',
y: 4,
drilldown: '30-0%'
}]
}],
drilldown: {
series: [{
id: '100-70%',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: '70-30%',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: '30-0%',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.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>
Have a look through the docs Axis.setTitle
var defaultTitleXAxis = "Percentage Range";
var defaultTitleYAxis = "Number of Schools";
var drilldownTitleXAxis = "School Name";
var drilldownTitleYAxis = "Percentage";
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drilldown: function(e) {
this.xAxis[0].setTitle({ text: drilldownTitleXAxis });
this.yAxis[0].setTitle({ text: drilldownTitleYAxis });
},
drillup: function(e) {
this.xAxis[0].setTitle({ text: defaultTitleXAxis });
this.yAxis[0].setTitle({ text: defaultTitleYAxis });
}
}
},
//....... remaining code
})
Fiddle demo

Categories