addColorScheme example in Basic for Chart

1

I need a specific color scheme for a chart using a jqWidget chart. I found an example on how to do this using javascript but cannot figure out how to put that into a form that Basic can use. Does anyone have an example of how to set a new color scheme for a chart in basic?

Here is what is given in a javascript example:

// setup the chart
    var myChart = $('#jqxChart').jqxChart(settings);
    // add a new color scheme named 'myScheme'
    myChart.jqxChart('addColorScheme', 'myScheme', ['#FF0000', '#00FF00', '#0000FF']);
    // apply the new scheme by setting the chart's colorScheme property
    myChart.jqxChart('colorScheme', 'myScheme');
    // refresh the chart
    myChart.jqxChart('refresh');
2

For simple code like this, it’s easy to translate to BASIC. Change var to Dim, and the single quotes to double quotes.

You can also take a shortcut by just leaving the code in JavaScript by marking it as such:

JavaScript
    // setup the chart
    var myChart = $('#jqxChart').jqxChart(settings);
    // add a new color scheme named 'myScheme'
    myChart.jqxChart('addColorScheme', 'myScheme', ['#FF0000', '#00FF00', '#0000FF']);
    // apply the new scheme by setting the chart's colorScheme property
    myChart.jqxChart('colorScheme', 'myScheme');
    // refresh the chart
    myChart.jqxChart('refresh');
End JavaScript
3

The chart was built using basic and is given the name of Chart1:
NSB.jqxSettings[“Chart1”].source = sampleData; (an example of the name in use)

How do I reference that name in the code you provided so that it is being applied to the correct chart?

I have tried using this method this morning, but I think this chart reference is giving me the problem.

I even ran the code in basic and then opened the developer’s window in Chrome and copied the javascript code generated and dropped it into my code using the method you showed and then commented out my Basic code. It ran like a charm, but when I dropped in the code you provided it gave an error message so I’m thinking it is a reference issue concerning the name of the chart.

4

$('#jqxChart') identifies the chart. If your chart is Chart1, try $('#Chart1')

5

I am including the code that I use to create the chart:

Dim sampleData, row,myTitle, myColorArray

function Button11_onclick()
  '  'Render the chart.  
  $("#Chart1").jqxChart(NSB.jqxSettings["Chart1"])
  
  JavaScript
    // setup the chart
    var myChart = $('#Chart1').jqxChart(settings);
    myChart.jqxChart('addColorScheme', 'myScheme', ['#FF0000', '#00FF00', '#0000FF']);
    myChart.jqxChart('colorScheme', 'myScheme');
    myChart.jqxChart('refresh');
  End JavaScript
  
  
End function

function Form1_onshow()
  
  sampleData = []
  myScore = 0
  for i=0 To 4
    Select case i
      case 0
        myTitle = "Critical" 
      case 1
        myTitle = "Warning"        
      case 2
        myTitle = "Neutral"        
      case 3
        myTitle = "Good"       
      case 4
        myTitle = "Clear" 
    End Select
    
    myScore = myScore + 15
    row=[]
    row["id"] = myTitle
    row["Security"] = myScore 
    sampleData[i]= row
  Next
  
  NSB.jqxSettings["Chart1"].source = sampleData       
  NSB.jqxSettings["Chart1"].seriesGroups = [ _
  { _
  type: "pie", _
  columnsGapPercent: 30, _
  seriesGapPercent: 0, _
  valueAxis: _
  { _
  minValue: 0, _
  maxValue: 100, _
  unitInterval: 10, _
  description: "My Chart" _
  }, _
  series:[ _
  { dataField: "Security", displayText: "id"}, _
  ] _
  } _
  ]
End function

Without the Javascript - End Javascript section, the code runs as expected and produces a chart. With that code included, I get a message box:

code.js
Uncaught Reference Error: settings is not defined line 7 column 41

Line 7 is where the word JavaScript is located.

I’m stumped but I really appreciate your help!

6

Due to changes in lines during the translation, I’ll bet the error message is actually line 8.

Click on the error message in the Chrome Debugger Console to be sure.

7

I looked at it in Chrome and it indicated this line:
var myChart = $(‘#Chart1’).jqxChart(settings);
I’m not sure how the columns are numbered but it looks as if the error appears around the beginning of the word settings.

8

The message is saying that settings is not defined. Is it?

AppStudio keeps the settings you enter at design time in a structure called NSB.jqxSettings. That’s why you see NSB.jqxSettings["Chart1"] when AppStudio renders the chart.

9

Not sure how, but I kept reshuffling the deck until I figured it out! This code will create a pie chart using jqWidgets Chart tool in this case named Chart1. It has 5 series with a custom color scheme for the wedges. They are not fancy colors, but they are the ones required for this program which were not part of the supplied color schemes. Elen show up normally in the properties window for this tool, but there are actually 27 color schemes. Unforetunately, none of them would work for me so I madw a custom one and added it to the code. The source for the data is generated using the variable myScore. It is just supplied data to make the char appear. You’ll have to put your own in to make it useful for you.

Dim sampleData, row, myTitle, myColorArray

function Form1_onshow()
	sampleData = []
	myScore = 0
        
	for i=0 To 4
		Select case i
		case 0
			myTitle = "Critical" 
		case 1
			myTitle = "Warning"        
		case 2
			myTitle = "Neutral"        
		case 3
			myTitle = "Good"       
		case 4
			myTitle = "Clear" 
		End Select
		
		myScore = myScore +(myScore/2.75)+ 15
                
		row=[]
		row["id"] = myTitle
		row["Security"] = myScore 
		sampleData[i]= row
	Next
	
	NSB.jqxSettings["Chart1"].source = sampleData       
	NSB.jqxSettings["Chart1"].seriesGroups = [ _
	{ _
	type: "pie", _
	columnsGapPercent: 30, _
	seriesGapPercent: 0, _
	valueAxis: _
	{ _
	minValue: 0, _
	maxValue: 100, _
	unitInterval: 10, _
	description: "My Chart" _
	}, _
	series:[ _
	{ dataField: "Security", displayText: "id"}, _
	] _
	} _
	]
	
	JavaScript   
	var settings = {
	colorScheme: 'scheme01'
	}  
	
	$("#Chart1").jqxChart(NSB.jqxSettings["Chart1"]);
	var myChart = $('#Chart1').jqxChart(settings);
	myChart.jqxChart('addColorScheme', 'myScheme', ['#FF000', '#FFFF00', '#C0C0C0', '#00FF00', '#008000']);

//red, yellow, silver,	lime, green are the colors

        myChart.jqxChart('colorScheme', 'myScheme');
	myChart.jqxChart('refresh');  
	
	End JavaScript
	
End function