[GandalvParticipant]

My steps for building chart:
1. create div

var graph = document.createElement('div');
        $(graph).addClass('ExtendedWidgetGraph');        
        edit.appendChild(graph);

2. prepare data

var source = [];
            var min,max;
            for(var i=0;i<data.length;i++)
            {
                if((data[i][1]>=range.min) &&(data[i][1]<=range.max)) {
                    source.push({Date: data[i][1], Temp: data[i][0]});
                    if (min == undefined)
                        min = data[i][0];
                    else if (min > data[i][0])
                        min = data[i][0];
                    if (max == undefined)
                        max = data[i][0];
                    else if (max < data[i][0])
                        max = data[i][0];
                }
            }
            if(min == undefined)min = 0;else min--;
            if(max == undefined)max = 2;else max++;

3. prepare settings

var settings = {
                title: sensor.Name,
                description: "",
                showToolTips:true,
                enableAnimations: true,
                showLegend: true,
                padding: { left: 15, top: 5, right: 20, bottom: 5 },
                titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
                source: source,
                xAxis:
                {
                    dataField: 'Date',
                    //minValue: source[0].Date,
                    //maxValue: source[source.length-1].Date,
                    unitInterval: 18000000,
                    valuesOnTicks: true,
                    //type:'date',
                    //baseUnit:'minute',
                    labels:
                    {
                        formatFunction:FormatDateToChart
                    }
                },
                colorScheme: 'scheme05',
                seriesGroups:
                    [
                        {
                            alignEndPointsWithIntervals: false,
                            type: 'area',
                            toolTipFormatFunction: toolTipCustomFormatFn,
                            valueAxis:
                            {
                                visible: true,
                                unitInterval: 1,
                                minValue: min,
                                maxValue: max,
                                title: {text: 'Температура'},
                                labels: {
                                    horizontalAlignment: 'right',
                                    formatSettings: {decimalPlaces: 0}
                                }
                            },
                            series: [
                                { dataField: 'Temp', displayText: 'Температура', opacity: 0.7 }
                            ]
                        }
                    ]
            };

4. Draw chart

 // setup the chart
            $(graph).jqxChart(settings);

[GandalvParticipant]

Custom function code:
function toolTipCustomFormatFn(value, itemIndex, serie, group, xAxisValue, xAxis) {
return ‘ghfghh’;
};

And if i remove this function from settings result not changes. It’s magic

[GandalvParticipant]

[Author]

Posts