Pagination in Charts

[Gopinagh]

Dear Team,

                  I encounter a scenario, where i have very limited space say a 500px of screen width to display my charts. The problem i face is the readability of the chart. If i render a chart of type bar, and if it has some 30 bars, they look very conjusted and i dont want to use scrolls. Is there a way i can use pagination for charts ?Can any one help me on this ?

Regards,
Gopinagh.R

[Riccardo Govoni]

There was a thread recently where a quick pagination example was demonstrated.

The example works by slicing the input DataTable in response to the user pressing 'next' and 'previous' buttons and redrawing the chart. I took the opportunity to rewrite the above example in a somewhat more self-contained and optimized fashion.

Have a look at this example: http://jsfiddle.net/6FQSJ/1/

What you care about is the 'EnablePagination' function which takes as input a ChartWrapper, a pageSize and references to the pagination buttons. It uses DataViews (chart.setView()) to limit the part of the chart that is currently displayed based on the current page. 

I wrote the example quite quickly and I probably missed some corner cases, so pay attention if you use it.

/R.

[NA]

Very nice; thanks for the contribution, Riccardo.

On a related note, I was drawing combo charts with bars, but they
became too crowded and thin very quickly. I had these ideas:

- dynamically switch the bars to lines when there are more than a
certain number of datapoints being shown
- use the isStacked feature once it becomes available for combo charts
- paginate the charts as suggested here

The isStacked solution is my preferred solution, but not yet
implemented. I'm currently using the "dynamically switch bars to
lines" approach, though I may begin to use a combination of the two
(perhaps offer a "zoomed in" view of the charts that is paginated).

You might want to use a combination of all of these, depending on what
you're doing.

[Roni Biran]

Hi

You can search this forum. I placed a code specially for this problem :-)

Roni

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/95eTxhU2z0YJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Gopinagh]

Hey Guys,

                   Thanks for the immediate response, Great work..Thanks a lot and saved lots of my time :)


Regards,
Gopinagh.R

[Roni Biran]

You're more than welcome.

Fill free to add your own code for other to see and use :-)

Regards,
Gopinagh.R

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/yy2DYN7TolwJ.

[Gopinagh]

Hi Guys,

         Now  i have got an other query. Can i use two packages at a same time for a single chart? for ex: controls and corechart packages  ?

Regards,
Gopinagh.R

[Roni Biran]

Yes you can. The packages list is actually a string array, so instead of writing ['corechart'] write ['controls','corechart']. Although I think that 'controls' hold some of the 'corechart' functionalities. You might want to check it out.. 

Regards,
Gopinagh.R

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/N02lwaTkBfYJ.

[Gopinagh]

Thanks TheNez, 
                      
Few more questions, Is it possible to introduce a gradient as background to the chart area itself ? or some animation effects like easing, when the chart reloads? Is it possible to draw grid lines for my column chart ?

Thanks ,
Gopinagh.R

[Roni Biran]

Hi Gopinagh, 

It is possible to add grid lines as part of the chart options (baselineColor and gridlineColor)

As for a gradient background, It is not possible. You can try and add an image to a DIV holding the chart and to set the chart background color to transparent (it might work, although I haven't done this)

Good luck,

Roni

Gopinagh.R

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/ECS38mzuqWgJ.

[Gopinagh]

Hi Roni,
 
             I am able to get only horizontal grid lines, i am unable to get Vertical grids. I mean,
  vAxis: {
                      baselineColor:'black',
                      gridlineColor:'green'
                   }  
This snippet works , but 
hAxis: {
                      baselineColor:'black',
                      gridlineColor:'green'
                   } , Does not work.

I need to draw vertical grids too. Is there a way, i can do it ?

Thanks,
Gopinagh.R

[Roni Biran]

Hi,

At the moment there is no support for these kind of grid lines. You can check the full options list at this link: http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html#Configuration_Options

Roni

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/j3kSbP5KmkAJ.

[Jinji]

Please don't reply to a thread with content that is unrelated to the content of the thread. Open a new thread.

[vinod sharma]

i'm facing same problem i can't able to pagination inside my chart i'm using jqchart suggest me with my code what i implement to my code..

<div id="vks">

        <tr>

            <td>

                @{

                    var data = (List<ServiceMVC4RIA.Animatedmodel.CollectionDateWise>)TempData["list"];

                    var mySubAL = data.GetRange(0, 5);

                 

                    //foreach (var value in data)

                    //    {

                    //        Console.WriteLine(value);

                    //    }

                        

                        

                  

                   

                  //IEnumerable<ServiceMVC4RIA.Animatedmodel.CollectionDateWise> aa = c.Take(5).ToList();

                  

                }

           

             @(Html.JQChart()

                .Chart(mySubAL)

                .ID("jqChart")

                .Width(500)

                .Height(500)

                .Title("Column Chart Colors")

                .Animation(TimeSpan.FromSeconds(2))

                .Shadows(true)

                .Series(series =>

                {

                    series.Column()

                          .Title("Series 1")

                          .XValues(el => el.InvoiceDate)

                          .YValues(el => el.AmountReceived)

                          .FillStyles(new object[] { "#418CF0", "#FCB441", "#E0400A", "#056492", "#BFBFBF", "#1A3B69", "#FFE382" });

                }

                )

                .Render()

          )

            </td>

        </tr>

    </div>

    <div id="jqChart" style="width: 500px; height: 300px;">  <br />

    <input id="buttonAddPoint" type="button" value="Add new point" />

    <input id="buttonRemovePoint" type="button" value="Remove last point" />

    <br />

    </div>

  

   

    </body>

</html>

<script type="text/javascript">

//    $('.jqplot-xaxis-tick').each(function () {

//        alert("WHAT IS THIS");

//        var label = $(this),

//                    value = label.text();

//        if (categorylinks[value]) {

//            label.click(function () {

//                alert('could link to another page: ' + categorylinks[value]);

//            });

//        }

//    });

    function getRandomData() {

        var data = [];

        for (var i = 0; i < 20; i++) {

            data.push([i, Math.round(Math.random() * 100)]);

        }

        return data;

    }

    $('#buttonAddPoint').click(function () {

        alert("add data");

        // get current series

        var series = $('#jqChart').jqChart('option', 'series');

        var newSeries = {

      

            data: getRandomData()

        };

        series.push(newSeries);

    

        alert("add data1");

        // get the data from the first series

        //var data = series[0].data;

        // add new data item

        //data.push(Math.round(Math.random() * 100));

 

        // update (redraw) the chart

        $('#jqChart').jqChart('update');

    });

    $('#buttonRemovePoint').click(function () {

        // get current series

        var series = $('#jqChart').jqChart('option', 'series');

        // get the data from the first series

              var data = series[0].data;

        // remove the last data item

        data.splice(data.length - 1, 1);

        // update (redraw) the chart

        $('#jqChart').jqChart('update');

    }); 

 

[Andrew Gallant]

This group is for the Google Visualization API, not jqChart.  You will likely have better luck asking for help on the jqChart forum or on StackOverflow.

[David Castro]

http://jsfiddle.net/6FQSJ/38/ this is the example for stacked pagination chart.

El miércoles, 7 de febrero de 2018, 15:54:52 (UTC-6), David Castro escribió:

Thanks for the example... with your help i just did pagination with stacked column chart!