Highcharts adapter and plugin for ExtJS

[buergi]

great stuff, Daniël. works perfect!

[DirkWei]

When I remove a record from store, the firebug says
"this.getxAxisData is not a function
[Break on this error] this.chart.xAxis[0].setCategories(this.getxAxisData(), true);
Ext.ux...hart.js (第 503 行)",

this.getxAxisData() is not defined!

[buergi]

@Buz: Got a small question: I want to do a spline chart. Is it possible to pass the x + y coordinates with a store?

something like this:

        var store = new Ext.data.JsonStore({
            fields:['point'],
            root: "",
			data: [{ "point":  ['test', 3]},{ "point":  ['test2', 4]},{ "point":  ['test3', 5]},{ "point": ['test4', 6]}]
        });

[soulgen]

How do I configure Ext.ux.HighChart which has a dynamic series loaded from json?

Here is my chart configuration using a static data:

var myChart = new Ext.ux.HighChart({
    id: 'myChart'
    ,chartConfig: {
        chart: {
            defaultSeriesType: 'column'
        }
        ,title: {
			text: 'My Chart'
		}
		,xAxis: {
                       categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                       ,title: {
                             enabled: true
                             ,text: 'Date'
                       }
		}
		,yAxis: {
			title: {
				text: 'Total'
			}
		}
		,plotOptions: {
			column: {
				stacking: 'normal'
			}
		}
		,series: [
			{
				name: 'Shift 3'
                                ,data: [16000, 0, 8000, 0, 24000, 16000, 0, 0, 8000, 0]
			}
			,{
				name: 'Shift 2'
				,data: [0, 16000, 0, 16000, 16000, 16000, 0, 0, 0, 16000]
			}
			,{
				name: 'Shift 1'
				,data: [24000, 0, 16000, 0, 0, 0, 0, 24000, 0, 16000]
			}
		]
    }
});

you can look how this chart looks like in the attachment

back to topic: Take a look at the "series" config, inside them I have a 3 series named "Shift 1", "Shift 2", and "Shift 3" come with their own data.

From the Ext.ux.HighChart's examples, I know how to populating the chart with dynamic data used in a series. But, those data is just for static series.

And yes, my problem is: I don't know how to creating dynamic series from json.

Here is the json that will be used for the chart:

{ 
	"root":
	[
		{"date": "1", "shift": "1", "total": "10000.00"},
		{"date": "1", "shift": "2", "total": "24000.0000"},
		{"date": "1", "shift": "3", "total": "20000.00"},
		{"date": "2", "shift": "1", "total": "16000.00"},
		{"date": "2", "shift": "2", "total": "0.00"},
		{"date": "2", "shift": "3", "total": "16000.0000"},
		{"date": "3", "shift": "1", "total": "8000.00"},
		{"date": "3", "shift": "2", "total": "0.0000"},
		{"date": "3", "shift": "3", "total": "24000.00"},
		{"date": "4", "shift": "1", "total": "16000.00"},
		{"date": "4", "shift": "2", "total": "0.0000"},
		{"date": "4", "shift": "3", "total": "8000.00"}
	]
}

This json comes with data about "shift" and "total" which will be used in the chart's series and series' data.

Would anyone help me to solving this problem?

Thank you before

[tolichsvs]

I have error in IE.
The link to a thread at a highcharts support forum
http://highslide.com/forum/viewtopic...p=29525#p29403

[Mayus]

Hi all,

Like Soulgen, I don't understand how to configure my Ext.ux.HighChart to use dynamic series loaded from json.

Is it possible with the current version ? Or someone can explain us how it work.

Thanx for your work Buz ;-)

[vahid4134]

Hi
I think animate method is no correct. this must define like below code

animate: function (el, params, options){
    	if(options){
    		if(options.duration==undefined || options.duration==0){
        		options.duration=1;
        	}
        	else{
        		options.duration=options.duration/1000;
        	}
    	}
    	
        if (params.width!==undefined) {
            Ext.get(el).setWidth(parseInt(params.width), {duration:options.duration});
        }
        else if (params.height!==undefined) {
            Ext.get(el).setHeight(parseInt(params.height), {duration:options.duration});
        }
        else if (params.left!==undefined) {
            Ext.get(el).setLeft(parseInt(params.left));
        }
        else if (params.opacity!==undefined) {
            Ext.get(el).setOpacity(parseInt(params.opacity),{duration:options.duration,callback:options.complete});
        } else {
            Ext.get(el).setTop(parseInt(params.top));
        }
    }

[4fan]

Thank you.
I like it

[buz]

@Buz: Got a small question: I want to do a spline chart. Is it possible to pass the x + y coordinates with a store?

something like this:

        var store = new Ext.data.JsonStore({
            fields:['point'],
            root: "",
            data: [{ "point":  ['test', 3]},{ "point":  ['test2', 4]},{ "point":  ['test3', 5]},{ "point": ['test4', 6]}]
        });

Use this as the data:

{
    "Root":[
        { "id": 1, "x": 1, "y": 12 },
        { "id": 2, "x": 2, "y": 18 },
        { "id": 3, "x": 3, "y": 14 },
        { "id": 4, "x": 4, "y": 13 }
    ]
}

And use xField & yField in the serie configuration.

series: [{
    type: 'spline',
    name: 'Spline',
    yField: 'y', 
    xField: 'x' 
}]

[buz]

Hi
I think animate method is no correct. this must define like below code

animate: function (el, params, options){
    	if(options){
    		if(options.duration==undefined || options.duration==0){
        		options.duration=1;
        	}
        	else{
        		options.duration=options.duration/1000;
        	}
    	}
    	
        if (params.width!==undefined) {
            Ext.get(el).setWidth(parseInt(params.width), {duration:options.duration});
        }
        else if (params.height!==undefined) {
            Ext.get(el).setHeight(parseInt(params.height), {duration:options.duration});
        }
        else if (params.left!==undefined) {
            Ext.get(el).setLeft(parseInt(params.left));
        }
        else if (params.opacity!==undefined) {
            Ext.get(el).setOpacity(parseInt(params.opacity),{duration:options.duration,callback:options.complete});
        } else {
            Ext.get(el).setTop(parseInt(params.top));
        }
    }

Thanks! I'll update the code.