Hi! I am trying to learn more about scatter charts and have been using your sample tutorials.
I am now hoping to use your example in this URL which shows different colors of data points, but it keeps giving me ‘Expected }’ error. I am using DHTMLX 3.6 libraries in Windows XP and IE8. Can you help please? Thanks.
Locally everything wirks with this system parameters. Are you reproduce this issue locally or with online samples?
I tried changing ‘value’ attribute to ‘xValue’ and it worked. Thanks! Just a follow up question regarding scatter charts. Is this compatible with integration with DHTMLx Grid? I saw some of you examples integrating grid with bar charts. Do you have an example of integrating grid and scatter charts? My main question is how to tell scatter chart which column values displayed in the grid will be plotted in the scatter chart. Thanks!
Hereit is (the simpliest one):
layout = new dhtmlXLayoutObject(document.body, "2U");
grid = layout.cells("a").attachGrid();
grid.setImagePath("codebase/imgs/");
grid.init();
grid.load("data/gridH.xml",function(){
chart.parse(grid,"dhtmlxgrid");
});
chart = layout.cells("b").attachChart({
view:"scatter",
value:"#data0#",
preset: "round",
xValue: "#data3#"
});
Take a grid structure file gridH.xml from grid samples
Thanks. I have a followup question regarding GRID and SCATTER chart integration.
Is there a way to also reference data in the GRID XML data in the item borderColor and color attributes similar how we referenced points to be plotted in xValue, yValue and tooltip attributes? I was also hoping to read the borderColor and color information to be used for the item attribute from the XML (e.g. “#data3#”, “#data4#”). Thanks again!
//Scatter Chart
var scatterChart1 = new dhtmlXChart(
{
view: “scatter”,
container: “chart_container1”,
xValue: “#data1#”,
yValue: “#data2#”,
yAxis:
{
title: “Ease of Delivery”
},
xAxis:
{
title: “Business Value”
},
tooltip:
{
template: “#data1# - #data2#”
},
item:
{
radius: 3,
type: “d”,
borderColor: “#data3#”,
borderWidth: 2,
color: “#data4#”
}
});
//XML
<?xml version="1.0" encoding="UTF-8"?> Group 1 - Item 1 100 100 #69ba00 #447900 Group 1 - Item 2 100 100 #69ba00 #447900Yes, it must work this way.
Another question about scatter charts…
Is there a way to put labels (e.g. the X and Y axis values) beside each data point in a scatter chart? Thanks.
Just add in chart init one more parameter: label: “’#data1#” (or label: “’#data2#” - based on the data you need)
Hello. The labels worked! Thanks!
I have another questions though - Is there a way to hide the x and y axis scales as well as the vertical/horizontal lines accross the charts representing these scales?
xAxis: {
...
lineColor: "transparent";
...
},
yAxis: {
...
lineColor: "transparent";
...
},
Thanks. How about the numbers along the X and Y axis represented by the lines? Is there a way to hide these too?
I tried placing font formatting HTML tags (e.g. ) in the xValue and yValue attributes to make the “#b#” and “#a#” values display in white but it does not work…
chart = new dhtmlXChart(
{
view: “scatter”,
container: “chartDiv”,
yValue: “#b#”,
xValue: “#a#”,
yAxis:
{
title: “Value B”,
lineColor: “white”
},
xAxis:
{
title: “Value A”,
lineColor: “white”
},
item:
{
radius: 5,
type: “d”,
borderColor: “#f38f00”,
borderWidth: 1,
color: “#ff9600”
},
label: “’#b#”
});
If you don’t want scale step number - use the next:
yAxis: {
template: function (obj) {return false}
},
xAxis:
{
template: function (obj) {return false},
},
If you don’t need axis title, just don’t specify it.
Thanks! It worked!
You are welcome!