jQWidgets Forums

This topic contains 4 replies, has 3 voices, and was last updated by yoda 10 years, 11 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Chart problem with 3.3.0 Posts

June 23, 2014 at 12:43 pm Chart problem with 3.3.0 #56244

atomic

Participant

Hi,
I have just uploaded to jqxWidgets 3.3.0, bu my charts are not being displayed right any more. I simply adds more categories on categoryAxis.
For example, in the code below it will display years 2006, 2007, 2008, 2009, but in the data source, as you can see there are only 2005 and 2010.
Please help!

<script type="text/javascript">
$(document).ready(function () {
		
//prepare chart data
var  sampleData = [ {year:2005,Industry:130.00,Transport:110.00,Residential:120.00,Commercial:230.00,Agriculture:0,Fishing:0,Non_energy_use:"",Other:""}, 
                    {year:2010,Industry:130.00,Transport:110.00,Residential:120.00,Commercial:230.00,Agriculture:0,Fishing:0,Non_energy_use:"",Other:""}
                    ];
 
var settings_chart = {
                title: 'final energy demand bysectors',
                description: '',
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                categoryAxis:
                    {
                       
                        dataField: 'year',
                        showTickMarks: true,
                        tickMarksInterval: 2,
                        tickMarksColor: '#888888',
                        unitInterval: 0,
                        showGridLines: true,
                        gridLinesInterval: 2,
                        gridLinesColor: '#ff0000',
                        axisSize: 'auto'
                   
                     
                    
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {                                                                    
                            type: 'stackedcolumn',
                            columnsGapPercent: 100,
                            seriesGapPercent: 5,
                            valueAxis:
                            {
                                unitInterval: 0,
                                minValue: 0,
                                maxValue: 'auto',
                                displayValueAxis: true,
                                description: 'PJ',
                                axisSize: 'auto',
                                tickMarksColor: '#888888',
                                formatSettings: {decimalPlaces: 0}
                            },
                           series: [
                                    { dataField: 'Industry', displayText: Industry},
                  		            { dataField: 'Transport', displayText: Transport},
                            		{ dataField: 'Residential', displayText: Residential},
                            		{ dataField: 'Commercial', displayText: Commercial},
                                    { dataField: 'Agriculture', displayText: Agriculture},
                                    { dataField: 'Fishing', displayText: Fishing},
                            		{ dataField: 'Non_energy_use', displayText: Non_energy_use},
                                    { dataField: 'Other', displayText: Other}
                                ]

                        }
                    ]
            }; 
          
            $('#jqxChart').jqxChart(settings_chart);
    
         });
   
</script>

</head>
<body style="background:white;">
	<div id='jqxChart' style="width:600px; height: 400px"/>
</body>
</html>

June 23, 2014 at 7:51 pm Chart problem with 3.3.0 #56256

Peter Stoev

Keymaster

Hi atomic,

The solution is – you should add: type: ‘basic’ to the categoryAxis

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

June 24, 2014 at 3:13 pm Chart problem with 3.3.0 #56304

atomic

Participant

It works!!!
Thanks Peter!

June 25, 2014 at 8:12 am Chart problem with 3.3.0 #56330

atomic

Participant

Hi,
Sorry to bother you again with same issue, but the chart is little bit different now. It losses nice color rounding in tooltips, and it gets black borders in stacked columns. Here is code, try it with latest jqxwidgets and jqxwidgets3.0.4 I think and you will see difference.
Thanks

<script type="text/javascript">
$(document).ready(function () {
		
//prepare chart data
var  sampleData = [ {"year":"1990","Electricity":"25.00","Coal":"22.00","Oil":"15.00","Gas":"17.00","Biofuels":"5.00","Heat":"5.00","Peat":"3.00","Waste":"3.00","Oil_shale":"5.00"},
{"year":"2000","Electricity":"22.00","Coal":"18.00","Oil":"13.00","Gas":"18.00","Biofuels":"6.00","Heat":"4.00","Peat":"4.00","Waste":"10.00","Oil_shale":"5.00"},
{"year":"2010","Electricity":"28.00","Coal":"20.00","Oil":"12.00","Gas":"22.00","Biofuels":"7.00","Heat":"5.00","Peat":"0.00","Waste":"6.00","Oil_shale":"0.00"},
{"year":"2020","Electricity":"27.00","Coal":"15.00","Oil":"10.00","Gas":"25.00","Biofuels":"10.00","Heat":"8.00","Peat":"0.00","Waste":"5.00","Oil_shale":"0.00"},
{"year":"2030","Electricity":"27.00","Coal":"10.00","Oil":"5.00","Gas":"23.00","Biofuels":"15.00","Heat":"10.00","Peat":"0.00","Waste":"10.00","Oil_shale":"0.00"},
{"year":"2040","Electricity":"27.00","Coal":"10.00","Oil":"5.00","Gas":"23.00","Biofuels":"15.00","Heat":"10.00","Peat":"0.00","Waste":"10.00","Oil_shale":"0.00"},
{"year":"2050","Electricity":"27.00","Coal":"10.00","Oil":"5.00","Gas":"23.00","Biofuels":"15.00","Heat":"10.00","Peat":"0.00","Waste":"10.00","Oil_shale":"0.00"}
                    ];
 
 
 
 
 
var settings_chart = {
                title: 'Final energy demand by sectors',
                //description: final_energy_demand_fuel_shares + ' ' + sector,
                description: '',
                enableAnimations: true,
                showLegend: true,
                theme: theme,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                categoryAxis:
                    {
                        text: 'Category Axis',
                        type: 'basic',
                        textRotationAngle: 0,
                        dataField: 'year',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: false,
                        gridLinesInterval: 1,
                        gridLinesColor: '#888888',
                        axisSize: 'auto'
                        
  
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {                                                                    
                            type: 'stackedcolumn',
                            columnsGapPercent: 100,
                            seriesGapPercent: 5,
                            valueAxis:
                            {
                                unitInterval: 20,
                                minValue: 0,
                                maxValue: 'auto',
                                displayValueAxis: true,
                                description: '%',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'Electricity', displayText: electricity, color: clElectricity},
                            		{ dataField: 'Coal', displayText: coal, color: clCoal},
                            		{ dataField: 'Oil', displayText: oil, color: clOil},
                            		{ dataField: 'Gas', displayText: gas, color: clGas},
                                    { dataField: 'Biofuels', displayText: biofuels, color: clBiofuels},
                            		{ dataField: 'Heat', displayText: heat, color: clHeat},
                                    { dataField: 'Peat', displayText: peat, color: clPeat},
                                    { dataField: 'Waste', displayText: waste, color: clWaste},
                                    { dataField: 'Oil_shale', displayText: oil_shale, color: clOil_shale},
                                ]
                               // series: series_fuels
                        }
                    ]
            }; //kraj settinga za chart
            
            // setup the chart
            $('#jqxChart').jqxChart(settings_chart);
    
         });
   
</script>

</head>
<body style="background:white;">
	<div id='jqxChart' style="width:600px; height: 400px"/>
</body>
</html>

June 25, 2014 at 5:23 pm Chart problem with 3.3.0 #56368

yoda

Participant

Hi atomic,

You seem to be upgrading from a much older version of the chart. According to the APIs the color property was deprecated and I guess it was kept for backwards compatibility:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-api.htm

You should be able to replace with a combination of these (copy-pasted from the documentation):

color – (Deprecated) fill color for the serie.
lineColor – Line color for the serie.
lineColorSelected – Line color for the serie when selected.
fillColor – Fill color for the serie.
fillColorSelected – Fill color for the serie when selected.
lineColorSymbol – Line color for the marker symbols in serie.
lineColorSymbolSelected – Line color for the marker symbols in the serie when selected.
fillColorSymbol – Fill color for the marker symbols in the serie.
fillColorSymbolSelected – Fill color for the the marker symbols in serie when selected.

Also I find it useful to work with the custom color functions like here:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm#demos/jqxchart/javascript_chart_series_conditional_colors.html

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.