Jump to content
uniGUI Discussion Forums

Search the Community

Showing results for tags 'Chart'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • uniGUI Public
    • Announcements
    • General
    • Feature Requests
    • Installation
    • Deployment
    • Other Platforms
  • Licensing
    • Licensing
    • Ordering uniGUI
  • Bug Reports
    • Active Reports
    • Closed Reports
    • Old Bug Reports
  • uniGUI Development
    • uniGUI 1.x
    • Beta Releases
    • Utilities
  • Mobile Platform
    • uniGUI Mobile
    • Mobile Browsers
  • Users Area
    • Sample Projects
    • Components and Code Samples
  • Non-English
    • Non-English
  • Miscellaneous
    • Hosting
    • Server Security
    • Jobs

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 18 results

  1. Hi, On unichart First and Last label on X axis is getting cut off. How can i fix that?
  2. Use as a guage of unigui? Someone with an idea ...
  3. almo

    Chart Fix

    My chart have cropped labels and numbers, how can i fix this? here is the print https://www.imgpaste.net/image/NiI6p
  4. andyhill

    uniChart Set Color On BarSeries

    I want to set the Bar Brush Color on a Chart BarSeries - please advise - thanks. My Delphi code:- UniBarSeries1.Title:= 'Processed'; UniBarSeries1.XLabelsSource:= 'DepartmentName'; UniBarSeries1.YValues.ValueSource:= 'ServicedCalls'; UniBarSeries1.YValues.Brush.Color:= clBlue; this is what I want to achieve but no such property - FAILS ? UniBarSeries1.DataSource:= UniMainModule.DataSource1; My Ajax Code (copied from pie example - FAILS ?): function chart.beforeInit(sender, config) { config.series = [ { type: "bar", highlight: true, renderer: function(sprite, record, attr, index, store) { return Ext.apply(attr, { fill: ["#bdea74", "#36a9e1", "#ff5454", "#fabb3d", "#efe767"] [index%5] I will need Blue and Red for now }); }, showInLegend: true, style: { stroke: 'white', lineWidth: 2 }, field: "A", label: {field: "LL"} } ]; }
  5. zanona

    change title chart

    CAN CHANGE REPORT TITLE RUNTIME? I'm trying this way but not anther! MainForm.UniLineSeries1.Title := 'teste'; Thanks Zanona
  6. Wanderer

    Difficulties with Mobile Area Chart

    I'm using uniGUI Complete Trial Edition 1.10.0 Build 1464. I need to display an area chart with two series on both desktop and mobile. Desktop works as expected, but mobile versions have two problems that I have been unable to solve: The chart legend initially appears, but when the data is loaded into the chart, the legend no longer appears on the mobile version. The chart does not "stack" on the mobile version (one series overlays the other). Are these known limitations or is there something I should be aware of that makes the mobile versions different from the desktop versions. Thanks in advance for your help. Milan
  7. Hi, I have 2 issues regarding using chart.js in TUniHTMLFrame. Maybe someone can help. Below is link to download simple example. https://1drv.ms/u/s!AtP5BtucE5MeioIwGecaHHSy_0FdMQ Issue 1: Loading HTML from index.html file does not work correctly. The loaded file is not displayed or not displayed correctly. Only when i reloed the file for few times then content is displayed correctly in UniHTMLFrame (click few times button LoadChart to get result like in index.html file, which is located in exe directory). Issue 2: When you load index.html directly in the browser then mouse scroll makes chart zooming, but when i load index.html to TUniHtmFrame then zooming is not working. If someone can download it and give me some tips what is wrong with it? Marcin
  8. diego@grv.com.br

    Create series in TUniChart at runtime

    Hello, I would like to know how to create "series" within the "TUniChart" component at run-time. I searched and found several links related to the subject: http://forums.unigui.com/index.php?/topic/9065-create-cahrt-series-at-runtime/?hl=chart http://forums.unigui.com/index.php?/topic/7578-chart-dynamic-series/?hl=chart http://forums.unigui.com/index.php?/topic/3567-dynamic-series-in-tunichart/?hl=chart&do=findComment&comment=38665 http://forums.unigui.com/index.php?/topic/6180-add-dynamic-series-to-unichart/?hl=chart http://forums.unigui.com/index.php?/topic/3567-dynamic-series-in-tunichart/ http://forums.unigui.com/index.php?/topic/9377-pie-chart-2-series-created-at-runtime-with-same-datasource-help/?hl=chart But none of them has a definitive answer. Is it possible to create series within a graphic at runtime or not? If so, how is it done, in a way that works? Please, post a sample. Thanks
  9. I have a UnimChart UnimHorizBarSeries assigned to a datasource where the XLabel is fetched from a rowset - all good. I want to via an Event OnPaintXLabel etc. interpret the label string and substitute it with another string at runtime. Please advise - thanks
  10. I have a Chart that has it's Datasource.Data changed externally and I need to tell the Chart to Refresh - please advise - thanks. UniSession.AddJS(MainForm.UniChart2.UniBarSeries1.JSName+'.DataSource.Refresh;');
  11. Using a uniChart with a SeriesList UniBarSeries connected to a Datasource - How Do We Paint the XLabelSource Vertically ?
  12. novikov.alexander

    UniHTMLFrame problem with script (solved)

    Hi everybody! Try to use htmlframe but have one problem (not my English;)). I use C3 libary in my project, and now i want to add a toggle switch that change chart color. Heres my css: /*-- Chart --*/ .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input {display:none;} /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #5568ae; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #FF7F50; } input:focus + .slider { box-shadow: 0 0 1px #FF7F50; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } .c3 svg { font: 10px sans-serif; -webkit-tap-highlight-color: transparent; } .c3 path, .c3 line { fill: none; stroke: #000; } .c3 text { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .c3-legend-item-tile, .c3-xgrid-focus, .c3-ygrid, .c3-event-rect, .c3-bars path { shape-rendering: crispEdges; } .c3-chart-arc path { stroke: #fff; } .c3-chart-arc text { fill: #fff; font-size: 13px; } /*-- Axis --*/ /*-- Grid --*/ .c3-grid line { stroke: #aaa; } .c3-grid text { fill: #aaa; } .c3-xgrid, .c3-ygrid { stroke-dasharray: 3 3; } /*-- Text on Chart --*/ .c3-text.c3-empty { fill: #808080; font-size: 2em; } /*-- Line --*/ .c3-line { stroke-width: 1px; } /*-- Point --*/ .c3-circle._expanded_ { stroke-width: 1px; stroke: white; } .c3-selected-circle { fill: white; stroke-width: 2px; } /*-- Bar --*/ .c3-bar { stroke-width: 0; } .c3-bar._expanded_ { fill-opacity: 0.75; } /*-- Focus --*/ .c3-target.c3-focused { opacity: 1; } .c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step { stroke-width: 2px; } .c3-target.c3-defocused { opacity: 0.3 !important; } /*-- Region --*/ .c3-region { fill: steelblue; fill-opacity: .1; } /*-- Brush --*/ .c3-brush .extent { fill-opacity: .1; } /*-- Select - Drag --*/ /*-- Legend --*/ .c3-legend-item { font-size: 12px; } .c3-legend-item-hidden { opacity: 0.15; } .c3-legend-background { opacity: 0.75; fill: white; stroke: lightgray; stroke-width: 1; } /*-- Title --*/ .c3-title { font: 14px sans-serif; } /*-- Tooltip --*/ .c3-tooltip-container { z-index: 10; } .c3-tooltip { border-collapse: collapse; border-spacing: 0; background-color: #fff; empty-cells: show; -webkit-box-shadow: 7px 7px 12px -9px #777777; -moz-box-shadow: 7px 7px 12px -9px #777777; box-shadow: 7px 7px 12px -9px #777777; opacity: 0.9; } .c3-tooltip tr { border: 1px solid #CCC; } .c3-tooltip th { background-color: #aaa; font-size: 14px; padding: 2px 5px; text-align: left; color: #FFF; } .c3-tooltip td { font-size: 13px; padding: 3px 6px; background-color: #fff; border-left: 1px dotted #999; } .c3-tooltip td > span { display: inline-block; width: 10px; height: 10px; margin-right: 6px; } .c3-tooltip td.value { text-align: right; } /*-- Area --*/ .c3-area { stroke-width: 0; opacity: 0.2; } /*-- Arc --*/ .c3-chart-arcs-title { dominant-baseline: middle; font-size: 1.3em; } .c3-chart-arcs .c3-chart-arcs-background { fill: #e0e0e0; stroke: none; } .c3-chart-arcs .c3-chart-arcs-gauge-unit { fill: #000; font-size: 16px; } .c3-chart-arcs .c3-chart-arcs-gauge-max { fill: #777; } .c3-chart-arcs .c3-chart-arcs-gauge-min { fill: #777; } .c3-chart-arc .c3-gauge-value { fill: #000; /* font-size: 28px !important;*/ } And here is my html: <html> <head> <link rel="stylesheet" type="text/css" href="../css/c3.css" > </head> <body> <div id="chart1"></div> <label class="switch"> <input type="checkbox" id = "toggles" name = "toggles1" onclick="load()"> <span class="slider round"></span> </label> <script src="../js/d3.v3.min.js" charset="utf-8"></script > <script src="../js/c3.js"></script > <script> var chart1 = c3.generate({ bindto: '#chart1', data: { columns: [ generateData(100) ], }, axis: { x: { default: [30, 60] } }, zoom: { enabled: true, onzoomstart: function (event) { console.log("onzoomstart", event); }, onzoomend: function (domain) { console.log("onzoomend", domain); }, }, subchart: { show: true } }); function load() { if (toggles.checked){ chart1.data.colors({ luxs: d3.rgb('#FF7F50').darker(0), }); } else { chart1.data.colors({ luxs: d3.rgb('#82a6cd').darker(0), }); }; } function generateData(n) { var column = ['luxs']; for (var i = 0; i < n; i++) { column.push(Math.random() * 500); } return column; } </script> </body> </html> js file is tipical and everybody can upload it. Its works perfect when im open html file. But when in my program i add: UniSession.AddJS( 'var json = '+obj.GetJSONString+';' +'var arr = [];' +'for(elem in json){' +'arr.push(json[elem]);' +'}' +'var chart1 = c3.generate({' +' bindto: '#39'#chart1'#39',' +' color: {' +' pattern: ['#39'#FF7F50'#39', '#39'#FF7F50'#39', '#39'#FF7F50'#39', '#39'#FF7F50'#39']' +' },' +' data: {' +' columns: [' +' generateData(arr.length)' +' ],' +' },' +' axis: {' +' x: {' +' default: [30, 60]' +' }' +' },' +' zoom: {' +' enabled: true,' +' onzoomstart: function (event) {' +' console.log("onzoomstart", event);' +' },' +' onzoomend: function (domain) {' +' console.log("onzoomend", domain);' +' },' +' },' +' subchart: { show: true }' +'});' +'' +'function load() {' +' var HTMLFrame = Ext.getCmp("_HTMLFrame");' +' var params=[];' +' if (toggles.checked){' +' chart1.data.colors({' +' luxs: d3.rgb('#39'#FF7F50'#39').darker(0),' +' });' +' }' +' else {' +' chart1.data.colors({' +' luxs: d3.rgb('#39'#82a6cd'#39').darker(0),' +' });' +' };' +' ajaxRequest(HTMLFrame, '#39'load'#39', params); ' +'}' +' function generateData(n) {' +' var HTMLFrame = Ext.getCmp("_HTMLFrame");' +' var params=[];' +' var column = ['#39'luxs'#39'];' +' for (var i = 0; i < n; i++) {' +' column.push (arr[i]);' +' }' +' ajaxRequest(HTMLFrame, '#39'callserver'#39', params); ' +' return column;' +' }') ; function Generatedate works perfect but function load() doesnot work. Does anybody know what i need to do with that? UNIGUI is the best
  13. Hi, I want to use third party javascript library for my web front end, so I search posts for how to use javascript library like c3js working under uniGUI, I found uniHtMLFrame component can do it, following is my steps: step1: ServerModule.pas -> CustomFiles -> Add css/c3.css js/d3.v3.min.js js/c3.js step2: Main.pas -> Add UniHTMLFrame1\ UniButton1\ UniButton2\ UniButton3 Click UniButton1 Load html file into UniHTMLFrame1. Click UniButton2 Update Web Front End with javascript code random numbers. Click UniButton3 Update Web Front End with uniGui(delphi code) random numbers. procedure TMainForm.UniButton1Click(Sender: TObject); begin HTML.HTML.LoadFromFile('files\simple.html'); end; procedure TMainForm.UniButton2Click(Sender: TObject); begin UniSession.AddJS( 'var chart = c3.generate({ ' + ' data: { ' + ' columns: [ ' + ' [''data1'', Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000], ' + ' [''data2'', Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000] ' + ' ], ' + ' onclick: function (d, element) { console.log("onclick", d, element); }, ' + ' onmouseover: function (d) { console.log("onmouseover", d); }, ' + ' onmouseout: function (d) { console.log("onmouseout", d); }, ' + ' } ' + '}); ' ); end; procedure TMainForm.UniButton3Click(Sender: TObject); var data1: array[0..5] of Integer; data2: array[0..5] of Integer; i: Integer; begin for i := 0 to 5 do begin data1[i] := Random(1000); data2[i] := Random(1000); end; UniSession.AddJS( 'var chart = c3.generate({ ' + ' data: { ' + ' columns: [ ' + ' [''data1'', ' + IntToStr(data1[0]) + ', ' + IntToStr(data1[1]) + ', ' + IntToStr(data1[2]) + ', ' + IntToStr(data1[3]) + ', ' + IntToStr(data1[4]) + ', ' + IntToStr(data1[5]) +'], ' + ' [''data2'', ' + IntToStr(data2[0]) + ', ' + IntToStr(data2[1]) + ', ' + IntToStr(data2[2]) + ', ' + IntToStr(data2[3]) + ', ' + IntToStr(data2[4]) + ', ' + IntToStr(data2[5]) +'], ' + ' ], ' + ' onclick: function (d, element) { console.log("onclick", d, element); }, ' + ' onmouseover: function (d) { console.log("onmouseover", d); }, ' + ' onmouseout: function (d) { console.log("onmouseout", d); }, ' + ' } ' + '}); ' ); end; simple.html <html> <head> <!-- link rel="stylesheet" type="text/css" href="../css/c3.css" --> </head> <body> <div id="chart"></div> <!-- script src="../js/d3.v3.min.js" charset="utf-8"></script --> <!-- script src="../js/c3.js"></script --> <script> var chart = c3.generate({ data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ], onclick: function (d, element) { console.log("onclick", d, element); }, onmouseover: function (d) { console.log("onmouseover", d); }, onmouseout: function (d) { console.log("onmouseout", d); }, } }); </script> </body> </html> The code run smoothly and I attach uniGUI project including csj3. If you have more concise code, let me know. My question: Is there more easy and Efficient method to interface between Server End and Front End javascript? because I need to monitor some modbus device like thermometers or switches connecting to my uniGUI server directly, and updating the display accordingly, and it is realtime monitor and quick response, the smaller traffic between server and web front is welcome. thermometers <-- Modbus TCP/RTU --> uniGUI server <-- javascript --> web front (C3js) Thanks Farshad Mohajeri, Delphi Developer, mohammad et al for your valuable posts. C3js.rar
  14. magtesi

    Salvar gráfico como imagem

    Boa tarde, preciso salvar um gráfico como imagem no unigui por 'debaixo dos panos', sem abrir a tela de download como faz no ...chart.save({type: 'image/png'}). Ex.: a pessoa clica em um botão gera o gráfico, salva como imagem(png, jpg, tanto faz) e abre em um TUniImage...Alguém tem alguma ideia. Vlw Ou salvar um gráfico como um pdf também serve. Vlw
  15. vbdavie

    Chart is slow

    Hey, I noticed that the charting seems SLOW. If I have less than 50 items or so, it seems "reasonable". Not fast, but acceptable. But if I have 300 points, then WOW, it's slow. And if I add several series then it's a magnified slowness. Basically, I have a stock chart with 5 series in it. The differeent series keep track of different kinds of data over the same date range. I keep track of ONE YEAR (365 days) of data. It takes about 6 seconds for the graph to build and unlock the web page. So, if I have built the chart it takes a while to show it completly. OR if the chart is in a TAB, and I switch tabs to a non chart tab, it is fast, THEN I switch BACK to the chart with many points, THEN i have to wait many seconds before I can click on other things. Have you any experience in this? I turned off animate and it didn't make "much" of a difference. Seems like a lot of people would be complaining about this. Davie P.S. I edited out EXTREMELY and SUPER slow... to be more accurate.
  16. Emiliano

    Gantt chart

    Hi I would suggest a component to draw the Gantt chart for project management thanks Emiliano
  17. I need to change the color of a column chart. example: I have a john with 4 maria 6 and pedro 8, I would like that the graph of Horizontal Bar, your scallops different colors using the same number, and when I use more of the graph (series) me multiplied with the example I gave if I put a number for each one of the people would have 3 sets but the graph would show 6 bars and that's what I want to avoid. someone to help me. ----- Necesito cambiarle el color a las columnas de un chart. ejemplo : tengo a juan con 4, a maria con 6 y a pedro con 8 ; me gustaria que con el grafico de Horizontal Bar, tu vieras colores distintos usando una misma serie, ya que cuando uso mas de una el grafico (serie) me la multiplica , con el ejemplo que puse si pongo una serie por cada unas de las personas tendria 3 series pero en el grafico se mostrarian 6 barras y eso es lo que quiero evitar. alguien que me ayude.
  18. Sistema Fenix

    How to integrate the Highcharts unigui?

    Hello everybody! I edited the post to let the solution I could with the help of Arvin. Attached Project working. Includes all the javascript uniservermodule.customfiles files / Highcharts / highcharts.js files / Highcharts / modules / exporting.js files/jquery-1.10.2.min.js Added a unihtmlframe.html with: <div id="container" style="min-width: 310px; height: 400px; MARGIN: 0 auto"> </ div> procedure TFGraficoDemo1.UniFrameCreate(Sender: TObject); var js: TStringList; begin inherited; try js := TStringList.Create; js.Add('Highcharts.setOptions( {'); js.Add(' global : {'); js.Add(' useUTC : false'); js.Add(' }'); js.Add('});'); js.Add('var chart;'); js.Add('$(document).ready(function() {'); js.Add(' chart = new Highcharts.Chart({'); js.Add(' chart: {'); js.Add(' renderTo: ''container'''); js.Add(' },'); js.Add(' title: {'); js.Add(' text: "Venda Mensal Produto",'); js.Add(' x: -20 //center'); js.Add(' },'); js.Add(' subtitle: {'); js.Add(' text: "Açúcar",'); js.Add(' x: -20'); js.Add(' },'); js.Add(' xAxis: {'); js.Add(' categories: ["Jan", "Feb", "Mar", "Abr", "Mai", "Jun",'); js.Add(' "Jul", "Ago", "Set", "Out", "Nov", "Dez"]'); js.Add(' },'); js.Add(' yAxis: {'); js.Add(' title: {'); js.Add(' text: "Quantidade"'); js.Add(' },'); js.Add(' plotLines: [{'); js.Add(' value: 0,'); js.Add(' width: 1,'); js.Add(' color: "#808080"'); js.Add(' }]'); js.Add(' },'); js.Add(' tooltip: {'); js.Add(' valueSuffix: "Qtde"'); js.Add(' },'); js.Add(' legend: {'); js.Add(' layout: "vertical",'); js.Add(' align: "right",'); js.Add(' verticalAlign: "middle",'); js.Add(' borderWidth: 0'); js.Add(' },'); js.Add(' series: [{'); js.Add(' name: "SP",'); js.Add(' data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]'); js.Add(' }, {'); js.Add(' name: "RJ",'); js.Add(' data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]'); js.Add(' }, {'); js.Add(' name: "MG",'); js.Add(' data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]'); js.Add(' }, {'); js.Add(' name: "RS",'); js.Add(' data: [3.1, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]'); js.Add(' }]'); js.Add(' });'); js.Add('});'); UniSession.AddJS(js.Text); finally js.Free; end; end; Best regards Highcharts.zip
×