pygal + Bar Chart + Changing the color of values within the same series depending on the x_label - bar-chart

Hello People.
I would like to use pygal to plot an image as shown in the one above:
Plotting the same series with different colors based on the x_label. What I would like to show, basically, is the difference between weekdays and weekends.
However, it seems that pygal only allows color settings per series.
What I was able to accomplish so far is one of the following:
1- consider each day of the week as a series of its own, with a color of its own, without showing the x_lables.
code:
import pygal
from pygal.style import Style
y_values = [12.85, 12.78, 13.74, 16.73, 12.52, 3.71, 1.96]
x_labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
filename = 'barchar_test.png'
chart_config = {
"human_readable": True,
"pretty_print": True,
"truncate_legend": -1,
"value_font_size": 15,
"print_values": True,
"show_legend": False,
"print_values_position": "top",
"print_labels": True,
"value_formatter": lambda x: "{0: .2f}".format(x),
}
style_config = {
"font_family": "googlefont:lato",
"plot_background": "white",
"value_font_size": 15,
"show_y_guides": False,
"show_y_labels": False,
"colors": ("#0099d6", "#0099d6", "#0099d6", "#0099d6", "#0099d6", "#6d6f71", "#6d6f71"),
}
def _plot_bar_chart(y_values, x_labels, filename):
bar_chart = pygal.Bar(style=Style(**style_config), **chart_config)
for i, item in enumerate(y_values):
bar_chart.add(
x_labels[i], {item},
)
bar_chart.render_to_png(filename)
_plot_bar_chart(y_values, x_labels, filename)
2- consider the values as one series, displaying the x_labels, but only in one color:
code:
dimport pygal
from pygal.style import Style
y_values = [12.85, 12.78, 13.74, 16.73, 12.52, 3.71, 1.96]
x_labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
filename = 'barchar_test.png'
chart_config = {
"human_readable": True,
"pretty_print": True,
"truncate_legend": -1,
"value_font_size": 15,
"print_values": True,
"show_legend": False,
"print_values_position": "top",
"print_labels": True,
"value_formatter": lambda x: "{0: .2f}".format(x),
}
style_config = {
"font_family": "googlefont:lato",
"plot_background": "white",
"value_font_size": 15,
"show_y_guides": False,
"show_y_labels": False,
"colors": ("#0099d6", "#0099d6", "#0099d6", "#0099d6", "#0099d6", "#6d6f71", "#6d6f71"),
}
def _plot_bar_chart(y_values, x_labels, filename):
bar_chart = pygal.Bar(style=Style(**style_config), **chart_config)
bar_chart.x_labels = x_labels
bar_chart.add('', y_values)
bar_chart.render_to_png(filename)
_plot_bar_chart(y_values, x_labels, filename)
3- Consider the values as separate series, show the x_labels, but have all the bars stacked in the first x_label:
code:
import pygal
from pygal.style import Style
y_values = [12.85, 12.78, 13.74, 16.73, 12.52, 3.71, 1.96]
x_labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
filename = 'barchar_test.png'
chart_config = {
"human_readable": True,
"pretty_print": True,
"truncate_legend": -1,
"value_font_size": 15,
"print_values": True,
"show_legend": False,
"print_values_position": "top",
"print_labels": True,
"value_formatter": lambda x: "{0: .2f}".format(x),
}
style_config = {
"font_family": "googlefont:lato",
"plot_background": "white",
"value_font_size": 15,
"show_y_guides": False,
"show_y_labels": False,
"colors": ("#0099d6", "#0099d6", "#0099d6", "#0099d6", "#0099d6", "#6d6f71", "#6d6f71"),
}
def _plot_bar_chart(y_values, x_labels, filename):
bar_chart = pygal.Bar(style=Style(**style_config), **chart_config)
bar_chart.x_labels = x_labels
for i, item in enumerate(y_values):
bar_chart.add(
x_labels[i], {item},
)
bar_chart.render_to_png(filename)
_plot_bar_chart(y_values, x_labels, filename)
Any thoughts on this?
Thanks :)

Related

How to display two different chart modal in one

I am creating the chart as you see below:
So I can display the charts separately but I cannot display both of the charts on the same chart line.
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<body>
<canvas id="statisticChart" style="width:100%;max-width:600px"></canvas>
<script>
var xValues = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var yValues = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15, 12];
new Chart("statisticChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
fill: false,
lineTension: 0,
backgroundColor: "rgba(25,162,242,1)",
borderColor: "rgba(2, 92, 145, 1)",
data: yValues
}]
},
options: {
legend: { display: false },
scales: {
yAxes: [{ ticks: { min: 6, max: 16 } }],
}
}
});
var barColors = ["#19A2F2"];
Chart("statisticChart", {
type: "bar",
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues
}]
},
options: {
legend: { display: false },
title: {
display: true,
text: "World Wine Production 2018"
}
}
});
</script>
</body>
</html>
So could you please have a look? Besides I also care about css, so I would like to display the second chart with the color #19A2F2, thanks in advance.
Chart.js supports mixed charts - which involves just using one Chart instance of course.
All you need to do is take the datasets objects of your two individual charts and put those in an array assigned to the Charts' data.datasets property.
For example:
var xValues = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var yValues = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15, 12];
new Chart("statisticChart", {
type: "bar",
data: {
labels: xValues,
datasets: [{
type: "line",
fill: false,
lineTension: 0,
backgroundColor: "rgba(25,162,242,1)",
borderColor: "rgba(2, 92, 145, 1)",
data: yValues,
fill: false
},
{
type: "bar",
backgroundColor: "#19A2F2",
data: yValues
}
]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
min: 6,
max: 16
}
}],
},
title: {
display: true,
text: "World Wine Production 2018"
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="statisticChart" style="width:100%;max-width:600px"></canvas>

How can I assign multiple series from my json data? Highcharts

UPDATE(2):
I got it to work so here is the working fiddle. See below for my solution. If you know of any other solutions, let me know. Thanks! otherwise...feel free to use this example :)
UPDATE(1):
I've continued working on it and here is my updated fiddle. I think I'm overriding my variable/data values each time I loop through. Any help is greatly appreciated.
ORIGINAL POST:
I have a jsfiddle here that shows what I'm trying to do.
I have a series of data in json format that has multiple objects(i.e.,
[
{"name":"name1", "data":[[0,4.3],[1,2.47],[2,0.2],etc.]},
{"name":"name2", "data":[[0,4.3],[1,2.47],[2,0.2],etc.]}
]
)
and am graphing with HighCharts line graphs. Instead, I'd like to define the series data to objects from multiple subtasks all on the same graph. (the variable is better shown in the jsfiddle link)
[
{"subtask":"id1", "":[
{"name":"name1", "data":[[0,4.3],[1,2.47],[2,0.2],etc.]},
{"name":"name2", "data":[[0,3.5],[1,2.12],[2,0.1],etc.]}
]
},
{"subtask":"id2", "":[
{"name":"name1", "data":[[0,4.1],[1,2.23],[2,0.4],etc.]},
{"name":"name2", "data":[[0,3],[1,2.62],[2,0.15],etc.]}
]
}
]
and I'd like the graph to draw a line for each name/data for each subtask (i.e., the graph draw a line for id1.name1.data, id1.name2.data, id2.name1.data, and id2.name2.data)
My Solution:
I got it to work so here is the working fiddle. If you know of any other solutions, let me know. Thanks! otherwise...feel free to use this example :)
// what currently works
var jsonFormatThatWorks = [{
"name": "name1",
"data": [
[0, 100],
[10, 70.02],
[20, 60.7],
[30, 45.3],
[40, 35],
[50, 32],
[60, 14],
[70, 0]
]
},
{
"name": "name2",
"data": [
[0, 100],
[10, 30],
[20, 13],
[30, 8],
[40, 7.5],
[50, 5.2],
[60, 4.54],
[70, 0.3],
[80, 0.01]
]
}
]
// format I want/need to be able to access/graph
var jsonFormatIWant = [{
"p1": "12345",
"taskName": "z-echo",
"taskData": [{
"subTaskId": "z8-echo",
"someTaskStatus": "Rejected",
"someTaskData": [{
"objectId": "name1",
"objectData": [
[0, 100],
[10, 90.80],
[20, 80.37],
[30, 75],
[40, 66],
[50, 33],
[60, 15],
[70, 0]
]
},
{
"objectId": "name2",
"objectData": [
[0, 100],
[10, 23],
[20, 15],
[30, 11],
[40, 8.5],
[50, 6.2],
[60, 3.44],
[70, 0.7],
[80, 0.5]
]
}
]
},
{
"subTaskId": "z9-echo",
"someTaskStatus": "Accepted",
"someTaskData": [{
"objectId": "name1",
"objectData": [
[0, 100],
[10, 70.02],
[20, 60.7],
[30, 45.3],
[40, 35],
[50, 32],
[60, 14],
[70, 0]
]
},
{
"objectId": "name2",
"objectData": [
[0, 100],
[10, 30],
[20, 13],
[30, 8],
[40, 7.5],
[50, 5.2],
[60, 4.54],
[70, 0.3],
[80, 0.01]
]
}
]
}
]
}]
// my chart
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'xy',
panning: true,
panKey: 'shift'
},
xAxis: {
title: {
text: 'Some X Label'
},
crosshair: true
},
plotOptions: {
series: {
marker: {
radius: 1
},
allowPointSelect: true
}
},
yAxis: {
labels: {
format: '{value} %'
},
floor: 0,
ceiling: 100,
title: {
text: 'Value (%)'
},
crosshair: true,
gridLineDashStyle: 'ShortDash',
gridLineColor: '#aaaaaa'
},
title: {
text: 'Sample Chart'
},
subtitle: {
text: 'Click and drag to zoom in. Hold down shift key to pan.'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: seriesOptions
};
var chart = new Highcharts.Chart(options);
});
var seriesOptions = [],
seriesCounter = 0
var data = jsonFormatIWant[0]
var taskData = data.taskData
taskData.forEach(function(element, i) {
element.someTaskData.forEach(function(childElement, j) {
seriesOptions[seriesCounter] = {
//task: element.subTaskId,
name: element.subTaskId + "_" + element.someTaskData[j].objectId,
data: element.someTaskData[j].objectData
}
seriesCounter += 1
//console.log(seriesCounter)
childElement.objectData.forEach(function(grandChildElement, h) {})
})
})
<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/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<!-- I'd like to be able to graph each objects data for each subTask
(i.e., z8-echo and z9-echo from the data jsonFormatIWant variable beneath the chart definition)
something like: taskData[0].someTaskData and taskData[1].someTaskData -->

sublime text font size on size bar does not change

Using sublime text 3, I have installed the material theme.
But I notice that the sidebar font size is too small.
Following the doc and searching on stack, I have change the default setting in the file named Material-Theme-Darker.sublime-theme and the other one named Default.sublime-theme like this (the two are the same):
[
{"class": "tab_control", "attributes": ["selected", "file_medium_dark"],"tint_modifier": [255, 255, 255, 80]},
{
"class": "sidebar_label",
"color": [0, 0, 0],
"font.bold": false,
"shadow_color": [250, 250, 250], "shadow_offset": [0, 0],
"font.size": 16
},
]
But nothing change. Where am I wrong ?
This my default user setting Preferences.sublime-settings:
{
"always_show_minimap_viewport": true,
"bold_folder_labels": true,
"caret_extra_bottom": 6,
"caret_extra_top": 6,
"caret_style": "phase",
"color_scheme": "Packages/User/SublimeLinter/itg.dark (SL).tmTheme",
"default_encoding": "UTF-8",
"default_line_ending": "unix",
"draw_minimap_border": true,
"ensure_newline_at_eof_on_save": true,
"fade_fold_buttons": false,
"font-face": "Saab",
"font_options":
[
"gray_antialias",
"subpixel_antialias"
],
"font_size": 15.5,
"highlight_line": true,
"highlight_modified_tabs": true,
"ignored_packages":
[
"Vintage"
],
"indent_guide_options":
[
"draw_normal",
"draw_active"
],
"indent_subsequent_lines": true,
"line_padding_bottom": 1,
"line_padding_top": 1,
"match_brackets": true,
"match_brackets_angle": false,
"match_brackets_braces": true,
"match_brackets_content": true,
"match_brackets_square": true,
"match_selection": true,
"material_theme_bold_tab": true,
"material_theme_compact_sidebar": true,
"material_theme_panel_separator": true,
"material_theme_small_tab": false,
"material_theme_tabs_autowidth": true,
"material_theme_tabs_separator": true,
"material_theme_tree_headings": true,
"overlay_scroll_bars": "enabled",
"quick_panel_small": true,
"save_on_focus_lost": true,
"scroll_past_end": true,
"scroll_speed": 1.5,
"shift_tab_unindent": true,
"show_encoding": true,
"show_line_endings": true,
"spell_check": false,
"tab_size": 4,
"theme": "Material-Theme-Darker.sublime-theme",
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
"word_wrap": true
}

Load and save to grid in extjs from nested json

I have a nested json for employee leaves and inside which i have leave history and leave eligibility. i need to populate two grids with the json.i can't read from the json or write to it..Please Help...
My Json is...
{
"EmployeeLeaves": {
"ID": 37,
"LeaveEligibility": [
{
"Availed": 4,
"Fullpaydays": 6,
"Halfpaydays": 0,
"ID": 1,
"LeaveTypeId": 60,
"PersonId": 37,
"YearOfLeave": 2013
},
{
"Availed": 2,
"Fullpaydays": 6,
"Halfpaydays": 0,
"ID": 3,
"LeaveTypeId": 61,
"PersonId": 37,
"YearOfLeave": 2013
},
{
"Availed": 10,
"Fullpaydays": 10,
"Halfpaydays": 0,
"ID": 4,
"LeaveTypeId": 62,
"PersonId": 37,
"YearOfLeave": 2013
},
{
"Availed": 0,
"Fullpaydays": 8,
"Halfpaydays": 0,
"ID": 6,
"LeaveTypeId": 63,
"PersonId": 37,
"YearOfLeave": 2013
}
],
"LeaveHistory": [
{
"AppliedTo": "Vibha",
"ApprovalDate": "3/12/2013 12:00:00 AM",
"ApprovedBy": 12,
"Duration": 3,
"FromDate": "3/24/2013 12:00:00 AM",
"FullPayDays": 3,
"HalfPayDays": 0,
"ID": 1,
"LeaveTypeId": 60,
"LossOfPayDays": 0,
"PersonId": 37,
"Remarks": "onnulla",
"StatusId": 79,
"SubstitutePersonId": 13,
"ToDate": "3/26/2013 12:00:00 AM"
},
{
"AppliedTo": "Vibha",
"ApprovalDate": "3/12/2013 12:00:00 AM",
"ApprovedBy": 12,
"Duration": 1,
"FromDate": "3/30/2013 12:00:00 AM",
"FullPayDays": 1,
"HalfPayDays": 0,
"ID": 2,
"LeaveTypeId": 60,
"LossOfPayDays": 0,
"PersonId": 37,
"Remarks": "onnulla",
"StatusId": 79,
"SubstitutePersonId": 13,
"ToDate": "3/31/2013 12:00:00 AM"
},
{
"AppliedTo": "Shyam",
"ApprovalDate": "",
"ApprovedBy": 0,
"Duration": 2,
"FromDate": "2/13/2013 12:00:00 AM",
"FullPayDays": 2,
"HalfPayDays": 0,
"ID": 4,
"LeaveTypeId": 61,
"LossOfPayDays": 0,
"PersonId": 37,
"Remarks": "blha blah",
"StatusId": 70,
"SubstitutePersonId": 1,
"ToDate": "2/14/2013 12:00:00 AM"
},
{
"AppliedTo": "Shyam",
"ApprovalDate": "2/13/2013 4:35:16 PM",
"ApprovedBy": 2,
"Duration": 5,
"FromDate": "3/23/2013 12:00:00 AM",
"FullPayDays": 5,
"HalfPayDays": 0,
"ID": 5,
"LeaveTypeId": 62,
"LossOfPayDays": 0,
"PersonId": 37,
"Remarks": "oh..",
"StatusId": 71,
"SubstitutePersonId": 1,
"ToDate": "3/27/2013 12:00:00 AM"
},
{
"AppliedTo": "Shyam",
"ApprovalDate": "2/13/2013 4:35:16 PM",
"ApprovedBy": 2,
"Duration": 5,
"FromDate": "3/28/2013 12:00:00 AM",
"FullPayDays": 5,
"HalfPayDays": 0,
"ID": 6,
"LeaveTypeId": 62,
"LossOfPayDays": 0,
"PersonId": 37,
"Remarks": "oh..",
"StatusId": 71,
"SubstitutePersonId": 1,
"ToDate": "3/29/2013 12:00:00 AM"
}
],
"PLavailedcount": 2
}
}
My Models and store are as follows....
Ext.define('custom.writer.Json', {
extend: 'Ext.data.writer.Json',
getRecordData: function(record) {
Ext.apply(record.data, record.getAssociatedData());
return record.data;
}
});
Ext.define('AM.store.LeaveRequest', {
extend: 'Ext.data.Store',
model: 'AM.model.leaverequest',
autoLoad:true,
proxy: {
type: 'ajax',
url:'ARSENAWeb/employeeleave.json?id=37',
reader: {
type: 'json',
root: 'EmployeeLeaves'
},
writer:new custom.writer.Json({writeAllFields: true}),
api: {
read: 'ARSENAWeb/employeeleave.json?id=37',
update: 'ARSENAWeb/employeeleave.json?id=37',
create:'ARSENAWeb/employeeleave.json?id=37'
}}
});
Ext.define('AM.model.leaverequest', {
extend: 'Ext.data.Model',
fields: ['ID' ],
idProperty: 'ID',
autoSync:true,
uses: ['AM.model.MLeaveHistory','AM.model.MLeaveStatus'],
hasMany: {model: 'MLeaveHistory',model:'MleaveStatus'},
save: function() {
var me = this;
if (me.persistAssociations) {
me.set( me.getAssociatedData() );
}
me.callParent(arguments);
}
});
Ext.define('AM.model.MLeaveHistory', {
extend: 'Ext.data.Model',
fields: [
{name:'ApprovalDate'},
{name:'ApprovedBy'},
{name:'Duration'},
{name:'FromDate'},
{name:'FullPayDays'},
{name:'HalfPayDays'},
{name:'ID'},
{name:'LeaveTypeId'},
{name:'LossOfPayDays'},
{name:'PersonId'},
{name:'Remarks'},
{name:'StatusId'},
{name:'SubstitutePersonId'},
{name:'ToDate'}
],
belongsTo: 'AM.model.leaverequest'
});
Ext.define('AM.model.MLeaveStatus', {
extend: 'Ext.data.Model',
fields: [ {name:'Availed'},
{name:'Fullpaydays'},
{name:'Halfpaydays'},
{name:'ID'},
{name:'LeaveTypeId'},
{name:'PersonId'},
{name:'YearOfLeave'}
],
belongsTo: 'AM.model.leaverequest'
});
My Controller is
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores: ['LType','SleaveHistory','SLeaveStatus',
],
models: [
'LeaveType','MLeaveHistory','MLeaveStatus'
],
views: [
'Leave.LeaveRequest','Leave.LeaveHistoryGrid','Leave.LeaveStatusGrid','Leave.HolidayList'
],
init: function() {
this.control({
'viewport >
'LeaveLeaveRequest button[action=reset]': {
click: this.resetForm
},
'LeaveLeaveRequest button[action=save]': {
click: this.saveForm
},
'leaveleavehistorygrid actioncolumn': {
itemclick: this.cancelLeave
},
'leaveleavehistorygrid': {
itemdblclick: this.editLeave
}
});
},
resetForm: function(button){
button.up('form').getForm().reset();
},
saveForm: function(button){
var form = button.up('form').getForm();
form.getValues(true);
var fromDate =new Date( Ext.getCmp('startdate'));//.getValue();
var endDate = new Date(Ext.getCmp('enddate'));
// var nod=Ext.Date.parseDate(fromDate,'m')
// Date.parseDate( String input, String format ) : Date
// var nod=fromDate+endDate;
var oneDay = 24*60*60*1000;
var diffDays = Math.round(Math.abs((fromDate.getTime() - endDate.getTime())/(oneDay)));
console.log(diffDays);
if (form.isValid()){
var record = form.getRecord();
var values = form.getValues();
// console.log(values);
if(!record){
var newRecord = new AM.model.leaverequest(values);
this.getLeaveRequestStore().add(newRecord);
}else {
record.set(values);
}}
} ,
cancelLeave: function (view, cell, rowIndex, colIndex, e, record, row) {
Ext.Msg.confirm('Remove Qualification', 'Are you sure?', function (button) {
if (button == 'yes') {
var store = Ext.getStore('LeaveRequest');
var newRecord = new AM.model.leaverequest(row);
console.log(record);
console.log(store);
store.remove(record);
store.sync();
}
}, this);
}
});
My Grids are:
Ext.define('AM.view.Leave.LeaveHistoryGrid' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.leaveleavehistorygrid',
title: 'Leave History',
store: 'LeaveRequest',
xtype: 'cell-editing',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
startEditByClick: function (){},
onEnterKey: function (){}
})
],
initComponent: function() {
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
});
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
this.columns= [
{header: 'Leave Type', dataIndex: 'LeaveTypeId',flex:1},
{header: 'Start Date', dataIndex: 'FromDate',renderer: Ext.util.Format.dateRenderer('m/d/y'),flex:1,editor: {
xtype: 'datefield',
forceSelection : true,
minValue: '01/01/06',
disabledDays: [0, 6],
allowBlank :false,
disabledDaysText: 'Plants are not available on the weekends'
}},
{header: 'End Date', dataIndex: 'ToDate',renderer: Ext.util.Format.dateRenderer('m/d/y'),flex:1, editor: {
xtype: 'datefield',
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
allowBlank :false,
disabledDaysText: 'Plants are not available on the weekends'
}},
{header: 'No of Days', dataIndex: 'Duration',flex:1},
// {header: 'Approval Status', dataIndex: 'leaveapprovalstatus',flex:1},
{header: 'Descriptions', dataIndex: 'Remarks',flex:1},
{header: 'Cancel Leave',flex:1,
xtype: 'actioncolumn',
width:30,
action:'cancel',
sortable: false,
items: [{
handler: function(view, cell, rowIndex, colIndex, e, record, row) {
this.addEvents('itemclick');
this.fireEvent('itemclick',view, cell, rowIndex, colIndex, e, record, row);
},
icon: 'ext-4.1.1a-gpl/ext-4.1.1a/docs/extjs/resources/themes/images/default/grid/page-first-disabled.gif',
tooltip: 'Cancel Leave'
}]
}]
this.callParent(arguments);
}
});
Ext.define('AM.view.Leave.LeaveStatusGrid' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.leaveleavestatusgrid',
title: 'Leave History',
store: 'LeaveRequest',
initComponent: function() {
this.columns= [
{header: 'Type Of Leave', dataIndex: 'typeofleave',flex:1},
{header: 'Available', dataIndex: 'startdate',flex:1},
{header: 'Availed', dataIndex: 'leaveavailed',flex:1},
{header: 'Balance', dataIndex: 'leavebalance',flex:1}];
this.callParent(arguments);
}
});
my form
Ext.define('AM.view.Leave.LeaveRequest', {
extend: 'Ext.form.Panel',
alias: 'widget.LeaveLeaveRequest',
// requires: [
// 'Ext.ux.form.MultiSelect',
// ],
title: 'Leave Request',
// frame:true,
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [ {
text: 'Reset',
action: 'reset'
}, {
text: 'Save',
action: 'save'
}]
}],
initComponent: function() {
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
// var value,value1;
this.items = [{xtype:'fieldset',
layout:'hbox',
items:[{
xtype:'container',
layout:'anchor',
items:[{
xtype:'textfield',
fieldLabel : 'Type of Leave',
labelWidth:'130px',
allowBlank :false,
afterLabelTextTp1:required
},{
// xtype:'checkbox',
// boxLabel: 'Half Day ',
// name: 'durationofleave',
// inputValue: 'halfday',
// uncheckedValue: 'fullday',
// allowBlank :false,
// afterLabelTextTp1:required
// },{
xtype:'datefield',
//renderer: Ext.util.Format.dateRenderer('m/d/y'),
vtype:'daterange',
fieldLabel : 'From Date',
labelWidth:'130px',
id:'FromDate',
afterLabelTextTpl: required,
name : 'FromDate',
endDateField: 'ToDate',
//minValue: new Date(),
allowBlank :false,
afterLabelTextTp1:required
},{
xtype:'datefield',
vtype:'daterange',
renderer: Ext.util.Format.dateRenderer('m/d/y'),
fieldLabel : 'To Date',
id:'ToDate',
startDateField: 'FromDate',
labelWidth:'130px',
// onExpand: function() {
// var field = Ext.getCmp('startdate');
// value: field.getValue();
// value1 = this.getValue();
// console.log(value+value1);},
// minValue: new Date(getCmp('startdate')),//Ext.Date.add(new Date(), Ext.Date.DAY, 7) ,
afterLabelTextTpl: required,
name : 'ToDate',
// change: function() {
// value = this.getValue('startdate')
// //var value = this.getValue('startdate');
// console.log(value);
// //this.picker.setValue(Ext.isDate(value) ? value : new Date());
//},
allowBlank :false,
afterLabelTextTp1:required
},{
xtype:'textfield',
fieldLabel : 'Number of days',
labelWidth:'130px',
id: 'textfield-field',
afterLabelTextTpl: required,
name : 'noofdays',
allowBlank :false,
afterLabelTextTp1:required
},
{
// xtype: 'multiselect',
// labelWidth:'130px',
// fieldLabel: 'Reporting Manager(s)',
// name: 'reportingmanager',
// id: 'multiselect-field',
// forceSelection : true,
// allowBlank: false,
// store: 'ReportingManager',
// mode: 'local',
// displayField: 'reportingmanager',
// valueField: 'value',
// ddReorder: true,
// afterLabelTextTp1:required
// },{
xtype:'textfield',
fieldLabel : 'Reason',
labelWidth:'130px',
afterLabelTextTpl: required,
name : 'reason',
allowBlank :false,
afterLabelTextTp1:required
}]
},{xtype:'container',width:'300px'},
{
xtype:'container',
items:[{xtype:'leaveleavestatusgrid',
store: 'LeaveRequest',
height: 200,
width: 500
}]
}]
},{xtype:'fieldset',
title:'Leave History',
items:[{xtype:'leaveleavehistorygrid',
store: 'LeaveRequest',
height: 300,
width: '100%'
}]
}];
this.callParent(arguments);
}
});
My json has a little change where the curly braces has been replaced by square braces
{
"EmployeeLeaves": [
{
"ID": 0,
"LeaveHistory": {
"Duration": 2,
"ApprovedBy": "shyam"
},
"PL": "'I don't care!' said the bear"
}
]
}
My model for the same has been changed to
Ext.define('AM.model.EMPLeaveRequest', {
extend: 'Ext.data.Model',
fields: [{
name: 'ID'
}, {
name: 'Duration',
mapping: 'LeaveHistory.Duration'
}, {
name: 'ApprovedBy',
mapping: 'LeaveHistory.ApprovedBy'
}],
proxy: {
type: 'ajax',
batchActions: false,
url: 'data/employeeleave.json',
autoAppendParams: false,
reader: {
type: 'json',
root: 'EmployeeLeaves',
useSimpleAccessors: false
}
}
});
My store is
Ext.define('AM.store.EMPLeaveRequest', {
extend: 'Ext.data.Store',
model: 'AM.model.EMPLeaveRequest',
autoLoad: true//,
});
There is no need for using associations....But only works for one set of data :(

How do I properly format a JSON object in an external file?

I have used the code available from http://codeblitz.wordpress.com/2009/06/22/jquery-charts/
It uses jqPlot. So I have the following sample code Default.html that works:
<script type="text/javascript">
var jsonObj = { "pageHits": [30, 60, 22, 5, 60, 88, 102], "rssHits": [33, 45, 121, 23, 55, 35, 77], "xAxis": ['Jan 2009', 'Feb 2009', 'Mar 2009', 'Apr 2009', 'May 2009', 'June 2009', 'Jul 2009'] };
$(function () {
$.jqplot('chartDiv', [jsonObj.pageHits, jsonObj.rssHits], CreateBarChartOptions());
});
function CreateBarChartOptions()
{
var optionsObj = {
title: 'Blog Statistics',
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: jsonObj.xAxis
}
},
series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
legend: {
show: true,
location: 'nw'
},
seriesDefaults:{
shadow: true,
renderer:$.jqplot.BarRenderer,
rendererOptions:{
barPadding: 8,
barMargin: 10
}
},
highlighter: {
showTooltip: true,
tooltipFade: true
}
};
return optionsObj;
}
</script>
I have copied the code and put it into Default.aspx. The only thing I want to change is to be able to get the data from an external file, so now my code is:
<script type="text/javascript">
var jsonObj;
$.getJSON('example.json', function (response)
{
jsonObj = response;
alert(jsonObj.property);
});
$(function () {
$.jqplot('chartDiv', [jsonObj.pageHits, jsonObj.rssHits], CreateBarChartOptions());
});
function CreateBarChartOptions()
{
var optionsObj = {
title: 'Blog Statistics',
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: jsonObj.xAxis
}
},
series: [{ label: 'Page Hits' }, { label: 'RSS Hits'}],
legend: {
show: true,
location: 'nw'
},
seriesDefaults: {
shadow: true,
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barPadding: 8,
barMargin: 10
}
},
highlighter: {
showTooltip: true,
tooltipFade: true
}
};
return optionsObj;
}
</script>
But jsonObj is always undefined, I'm presuming my file is not formatted properly. I have tried example.json to contain this:
{"pageHits": [30, 60, 22, 5, 60, 88, 102], "rssHits": [33, 45, 121, 23, 55, 35, 77], "xAxis": ['Jan 2009', 'Feb 2009', 'Mar 2009', 'Apr 2009', 'May 2009', 'June 2009', 'Jul 2009']}
and this:
{"pageHits": [30, 60, 22, 5, 60, 88, 102], "rssHits": [33, 45, 121, 23, 55, 35, 77], "xAxis": ["Jan 2009", "Feb 2009", "Mar 2009", "Apr 2009", "May 2009", "June 2009", "Jul 2009"]}
But to no avail. What am I doing wrong?
Thanks for any assistance,
Julian
You'd probably need to do something like:
$.getJSON('example.json', function (response)
{
var jsonObj = response;
$.jqplot('chartDiv', [jsonObj.pageHits, jsonObj.rssHits], CreateBarChartOptions());
});
The way you have it now your annon function to trigger jqplot will run 'inline', while the ajax loading will still be going on.