rhiscar
28 Nov 2011, 10:48 AM
Hi everyone, I'm trying to build a range reference chart for a medical web app. But I'm having a hard time being able to add the range reference information. I want to create something close to this:
29634
I tried using series with Area chart but that didn't do the trick I also tried adding a rectangle on the render events, all three of them, still no luck. If anyone could bring some light to my issue I'll be more the glad.
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>WW8</title> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="examples/shared/example.css" /> <style> .x-panel { margin: 20px; } h1 { font-size: 18px; margin: 10px; } body { padding: 30px; } </style> <script type="text/javascript" src="bootstrap.js"></script> <script type="text/javascript" src="grafico.js"></script></head> <body id="docbody"> <h1>New WWHealth charts</h1> <div style="margin: 10px;"> <a href="grafico.js">View Source</a> </div> </body></html>
Ext.require(['Ext.data.*']);Ext.require('Ext.chart.*');Ext.require('Ext.layout.container.Fit');
Ext.onReady(function() { window.graphStore = Ext.create('Ext.data.JsonStore', { fields: ['data1', 'maxRange', 'minRange', 'date'], data: [{data1: 81, maxRange: 140, minRange: 90, date: '04/02/2011 00:02'}, {data1: 103, maxRange: 140, minRange: 90, date: '04/02/2011 12:02'}, {data1: 30, maxRange: 140, minRange: 90, date: '04/02/2011 13:02'}, {data1: 108, maxRange: 140, minRange: 90, date: '04/02/2011 15:02'}, {data1: 70, maxRange: 140, minRange: 90, date: '04/02/2011 17:02'}] }); var square = Ext.create('Ext.draw.Component', { viewBox: false, items: [{ type: 'rect', fill: '#79BB3F', x: 0, y: 0, width: 100, height: 100 }] });
this.handlePlot = function (t, opts) { console.log(t); }; var chartWW = Ext.create('Ext.chart.Chart',{ xtype: 'chart', animate: false, store: graphStore, insetPadding: 30, listeners: { beforerender: this.handlePlot }, axes: [{ type: 'Numeric', minimum: 0, maximum: 200, grid: true, position: 'left', fields: ['data1'], title: true, grid: true, label: { renderer: Ext.util.Format.numberRenderer('0,0'), font: '10px Arial' } }, { type: 'Category', position: 'bottom', grid: true, fields: ['date'], title: false, label: { font: '11px Arial', renderer: function(name) { return name.substr(0, 3) + ' 07'; } } }], series: [/*{ type: 'area', highlight: true, axis: 'left', xField: 'name', yField: ['minRange','maxRange'], style: { opacity: 0.50 } },*/{ type: 'line', axis: 'left', xField: 'date', yField: 'data1', listeners: { itemmouseup: function(item) { //Ext.example.msg('Item Selected', item.value[0] + ' visits on ' + item.value[3]); } }, tips: { trackMouse: true, width: 145, height: 40, renderer: function(storeItem, item) { this.setTitle('Data 1: ' + storeItem.get('data1') + '<br />date : ' + storeItem.get('date')); } }, style: { fill: '#38B8BF', stroke: '#38B8BF', 'stroke-width': 3 }, markerConfig: { type: 'circle', size: 4, radius: 4, 'stroke-width': 0, fill: '#38B8BF', strokre: '#38B8BF' } }] }); var mainPanel = Ext.create('widget.panel', { width: 600, height: 300, title: 'Graphic', renderTo: Ext.getBody(), layout: 'fit', items: [chartWW, square] });});
Thanks in advance for your help.
29634
I tried using series with Area chart but that didn't do the trick I also tried adding a rectangle on the render events, all three of them, still no luck. If anyone could bring some light to my issue I'll be more the glad.
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>WW8</title> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="examples/shared/example.css" /> <style> .x-panel { margin: 20px; } h1 { font-size: 18px; margin: 10px; } body { padding: 30px; } </style> <script type="text/javascript" src="bootstrap.js"></script> <script type="text/javascript" src="grafico.js"></script></head> <body id="docbody"> <h1>New WWHealth charts</h1> <div style="margin: 10px;"> <a href="grafico.js">View Source</a> </div> </body></html>
Ext.require(['Ext.data.*']);Ext.require('Ext.chart.*');Ext.require('Ext.layout.container.Fit');
Ext.onReady(function() { window.graphStore = Ext.create('Ext.data.JsonStore', { fields: ['data1', 'maxRange', 'minRange', 'date'], data: [{data1: 81, maxRange: 140, minRange: 90, date: '04/02/2011 00:02'}, {data1: 103, maxRange: 140, minRange: 90, date: '04/02/2011 12:02'}, {data1: 30, maxRange: 140, minRange: 90, date: '04/02/2011 13:02'}, {data1: 108, maxRange: 140, minRange: 90, date: '04/02/2011 15:02'}, {data1: 70, maxRange: 140, minRange: 90, date: '04/02/2011 17:02'}] }); var square = Ext.create('Ext.draw.Component', { viewBox: false, items: [{ type: 'rect', fill: '#79BB3F', x: 0, y: 0, width: 100, height: 100 }] });
this.handlePlot = function (t, opts) { console.log(t); }; var chartWW = Ext.create('Ext.chart.Chart',{ xtype: 'chart', animate: false, store: graphStore, insetPadding: 30, listeners: { beforerender: this.handlePlot }, axes: [{ type: 'Numeric', minimum: 0, maximum: 200, grid: true, position: 'left', fields: ['data1'], title: true, grid: true, label: { renderer: Ext.util.Format.numberRenderer('0,0'), font: '10px Arial' } }, { type: 'Category', position: 'bottom', grid: true, fields: ['date'], title: false, label: { font: '11px Arial', renderer: function(name) { return name.substr(0, 3) + ' 07'; } } }], series: [/*{ type: 'area', highlight: true, axis: 'left', xField: 'name', yField: ['minRange','maxRange'], style: { opacity: 0.50 } },*/{ type: 'line', axis: 'left', xField: 'date', yField: 'data1', listeners: { itemmouseup: function(item) { //Ext.example.msg('Item Selected', item.value[0] + ' visits on ' + item.value[3]); } }, tips: { trackMouse: true, width: 145, height: 40, renderer: function(storeItem, item) { this.setTitle('Data 1: ' + storeItem.get('data1') + '<br />date : ' + storeItem.get('date')); } }, style: { fill: '#38B8BF', stroke: '#38B8BF', 'stroke-width': 3 }, markerConfig: { type: 'circle', size: 4, radius: 4, 'stroke-width': 0, fill: '#38B8BF', strokre: '#38B8BF' } }] }); var mainPanel = Ext.create('widget.panel', { width: 600, height: 300, title: 'Graphic', renderTo: Ext.getBody(), layout: 'fit', items: [chartWW, square] });});
Thanks in advance for your help.