jQWidgets Forums

Tagged: chart, color, color scheme, colorScheme, custom, jqxChart

This topic contains 10 replies, has 4 voices, and was last updated by simcon94 11 years, 1 month ago.

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

Author

myScheme Color from Database Posts

August 26, 2013 at 3:42 am myScheme Color from Database #27642

tranen

Participant

Hi,

I would like to define other colors than the one already used.
I have a database with some color. I also have my data in database so I do like this:

in the var source:

var source =
			{
				datatype: "json",
				datafields: [
					{ name: 'Quantity'},
					{ name: 'NameHour'},
					{ name: 'Color'},				
				],

so Color will have the color I want (one by one like a normal data)
Then I do this:

$.jqx._jqxChart.prototype.colorSchemes.push({ name: 'myScheme', colors: [ '"Color"',] });	
colorScheme: 'myScheme',

But it doesn’t my chart become all black.

How can I do to get the right color?

Thanks

August 26, 2013 at 6:53 am myScheme Color from Database #27657

Dimitar

Participant

Hello tranen,

Here is a way to achieve this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'month' },
                    { name: 'min' },
                    { name: 'max' },
                    { name: 'color' }
                ],
                url: '../sampledata/weather_geneva.txt'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
            // prepare jqxChart settings
            var settings = {
                title: "Weather in Geneva, Switzerland",
                description: "Climatological Information about Geneva",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                categoryAxis:
                    {
                        text: 'Category Axis',
                        textRotationAngle: 0,
                        dataField: 'month',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: true,
                        gridLinesInterval: 3,
                        gridLinesColor: '#888888',
                        axisSize: 'auto'
                    },
                colorScheme: 'scheme05',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            //useGradient: false,
                            valueAxis:
                            {
                                unitInterval: 5,
                                displayValueAxis: true,
                                description: 'Temperature [C]',
                                //descriptionClass: 'css-class-name',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'max', displayText: 'Max Temperature', color: dataAdapter.records[0].color },
                                    { dataField: 'min', displayText: 'Min Temperature', color: dataAdapter.records[0].color }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxChart' style="width: 680px; height: 400px">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

August 26, 2013 at 7:11 am myScheme Color from Database #27659

tranen

Participant

Thanks for the answer, I look it but it doesn’t work in my case.
I use the pie chart and my code looks like this

var source =
			{
				datatype: "json",
				datafields: [
					{ name: 'Quantity'},
					{ name: 'NameHour'},
					{ name: 'Color'},				
				],
				url: 'chart.php'
			};		
				
			var dataAdapter = new $.jqx.dataAdapter(source,
			{
				autoBind: true,
				async: false,
				downloadComplete: function () { },
				loadComplete: function () { },
				loadError: function () { }
			});
			var settings = {
				title: "Name",
				description: '',
				enableAnimations: true,
				showLegend: true,
				showBorderLine: false,
				legendLayout: { left: 5, top: 140, width: 200, height: 200, flow: 'vertical' },
				padding: { left: 5, top: 5, right: 5, bottom: 5 },
				titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
				source: dataAdapter,  
				seriesGroups:
				[
					{
						type: 'pie',
						showLabels: false,	
							series:
							[
								{ 
								dataField: 'Quantity',
								displayText: 'NameHour',						
								labelRadius: 120,
								initialAngle: 15,
								radius: 95,
								centerOffset: 0,
								color: 'Color',
								},
							]								
					}
				]
			};	
			$('#jqxChart').jqxChart(settings);

August 26, 2013 at 7:27 am myScheme Color from Database #27662

Dimitar

Participant

Hi tranen,

In this case, the change should also be to the color property, i.e.:

series:
		[
			{ 
			dataField: 'Quantity',
			displayText: 'NameHour',						
			labelRadius: 120,
			initialAngle: 15,
			radius: 95,
			centerOffset: 0,
			color: dataAdapter.records[0].color,
			},
		]

Best Regards,
Dimitar

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

August 26, 2013 at 7:38 am myScheme Color from Database #27665

tranen

Participant

Yes I do this too but still doesn’t work.
Even if I apply a fix color like color: ‘#ffffff’ I will get the default color but not the one I want.

Do you know why?

Thanks!

August 26, 2013 at 7:52 am myScheme Color from Database #27667

Dimitar

Participant

Hi tranen,

I am sorry for the misdirection. Here is how to properly change the colour scheme of a pie chart:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Browser' },
                    { name: 'Share' }
                ],
                url: '../sampledata/desktop_browsers_share_dec2011.txt'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
            $.jqx._jqxChart.prototype.colorSchemes.push({ name: 'myScheme', colors: ['#ffff00', '#ff0000', '#ccff00', '#00ffff', '#aaaaaa'] });
            // prepare jqxChart settings
            var settings = {
                title: "Desktop browsers share in Dec 2011",
                description: "(source: wikipedia.org)",
                enableAnimations: true,
                showLegend: false,
                legendPosition: { left: 520, top: 140, width: 100, height: 100 },
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                colorScheme: 'myScheme',
                seriesGroups:
                    [
                        {
                            type: 'pie',
                            showLabels: true,
                            series:
                                [
                                    {
                                        dataField: 'Share',
                                        displayText: 'Browser',
                                        labelRadius: 100,
                                        initialAngle: 15,
                                        radius: 130,
                                        centerOffset: 0,
                                        formatSettings: { sufix: '%', decimalPlaces: 1 }
                                    }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='host' style="margin: 0 auto; width: 699px; height: 400px;">
        <div id='jqxChart' style="width: 680px; height: 400px; position: relative; left: 0px;
            top: 0px;">
        </div>
    </div>
</body>
</html>

You may change the colours in the new scheme to be values from your source.

Best Regards,
Dimitar

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

August 26, 2013 at 7:57 am myScheme Color from Database #27668

tranen

Participant

yes I saw this before but I have the color in the datafield name ‘Color” so I would like to know how I can call it in this line:

$.jqx._jqxChart.prototype.colorSchemes.push({ name: ‘myScheme’, colors: [‘#ffff00’, ‘#ff0000’, ‘#ccff00’, ‘#00ffff’, ‘#aaaaaa’] });

because when I try:

$.jqx._jqxChart.prototype.colorSchemes.push({ name: ‘myScheme’, colors: [‘Color’] });

it didn’t work.

Thanks

August 26, 2013 at 9:05 am myScheme Color from Database #27681

Dimitar

Participant

Hi tranen,

Instead of ‘Color’ use dataAdapter.records[0].Color as in the previously given examples. Note that the colour should be in hex format.

Best Regards,
Dimitar

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

February 13, 2014 at 8:06 am myScheme Color from Database #49453

simcon94

Participant

Is that Problem fixed? Do you have an example Code?

February 13, 2014 at 8:36 am myScheme Color from Database #49455

Peter Stoev

Keymaster

Hi simcon94,

There is no problem here so there is nothing which should be fixed.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 13, 2014 at 9:25 am myScheme Color from Database #49459

simcon94

Participant

Can you show the Code?
I have problems with that….

Author

Posts

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

You must be logged in to reply to this topic.