Support for Using Controls and Dashboards

[kmd1970]

Any chance you could add support for making controls?

https://developers.google.com/chart/interactive/docs/gallery/controls

I will also attempt it myself, however your JS skills are better than mine. :+1:

Thanks!

[jbowyers]

Seems like a good idea. Would be happy to work on this together, time permitting. If you want to make a start - fork the repo, create a new branch, add your changes and send a pull request when done or add me as a contributor to the forked repo.

[kmd1970]

Before I begin, I tested out using a button to change the chart to '3D' and it works.

Is this the correct method for interacting with (changing options in) the chart in real time?

I used xxx.data('chartinator'); to get the current chart object.

Let me know if there is a better way to change options and redraw a chart on the fly.

Should I be using cchartOptions or chartOptions to apply option changes?

Html:

<div id="chart4"></div>
<button type="button" id='3dbtn' class="btn btn-primary">3D</button>

Javascript:

var chart4 = $('#chart4').chartinator({
        columns: [{
                label: 'Task',
                type: 'string'
            }, {
                label: 'Hours Per Day',
                type: 'number'
            }

            ],
            rows: [  
                  ['Work',     11],
                  ['Eat',      2],
                  ['Commute',  2],
                  ['Watch TV', 2],
                  ['Sleep',    7]
                  ],
            chartType: 'PieChart',
            chartPackage : '',
            dataTitle: '',
            chartAspectRatio: 1.5,
            pieChart: {
                animation: {
                    startup: true,
                    duration: 1000,
                    easing: 'out'
                },
                pieHole: 0.4,
                legend: {
                    position: 'labeled'
                },
                tooltip: {
                    showColorCode: true
                },
                chartArea: {
                    left: 0,
                    top: '1%',
                    width: "100%",
                    height: "100%"
                }

            }
});

 $('#3dbtn').click(function(){
     var chart = chart4.data('chartinator');
     chart.cchartOptions['is3D'] = true;
      chart.drawChart();    
   });

Before:

After:

[jbowyers]

That is how I would do it. I haven't tested it but it likely does not matter if you use cchartOptions or chartOptions. the cchartOptions are 'current' chartOptions in other words the options after they have been modified by the plugin. chartOptions are the original options before thay are modified.

A better way would be to add support for controls as you suggested.

[kmd1970]

I got the Controls and Dashboards code working but GitHub for Windows is failing clone to my desktop with error:

GitHub.IO.ProcessException: Cloning into 'chartinator'... fatal: unable to access 'https://github.com/kmd1970/chartinator.git/': error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol

I assume my company is blocking. Can I perform all of the same actions online? (Sorry, I am new to GitHub usage)

[jbowyers]

Yes, you can copy and paste your changes into github

[kmd1970]

Done. Pull request made. Hope I did it correctly. :) Please feel free to correct any variable names, wording or syntax.

[kmd1970]

Demo. http://jsfiddle.net/kmd1970/mem8gtz4/