CODEWITHSUNDEEP
javascriptjqueryhtmluser-interfacekendo-ui
user9704250
user9704250

Reputation:

best way of managing to show different charts in a single page

I'm new in js and design generally,i try my best to explain the problem i have as best as i can,i have a column and bar charts,when i click on the bars,it should give me another 3 different charts accordingly,implementing this is not a big deal,but the user interface is becoming a pain,i want to know whats the logical suggestion for a problem like this,it should be modal or just different div's on the page,to show the charts? maybe the example below can make my point better:

Here is my HTML:

 <div style="width:100%">
    <div id="chart" style="width:30% ;float:left"></div>
    <div id="chart2" style="width:35%;float:right"></div>
    <div id="chart3" style="width:25%;float:left"></div>
    </div>

here is JS:

$("#chart").kendoChart({
          series: [{
            data: [1, 2],
            color: function(point) {
              if (point.value > 1) {
                return "red";
              }

              // use the default series theme color
            }
          }],  
          seriesClick:seriesClick  
        });

          function seriesClick(){
          $("#chart2").kendoChart({
           command:{ text: "View Details" },
          series: [{
            data: [5, 6],  
            color: function(point) {
              if (point.value > 5) {
                return "blue";
              }
            }
          }],     
        });  
          $("#chart3").kendoChart({
           command:{ text: "View Details" },
          series: [{
            data: [1, 3],  
            color: function(point) {
              if (point.value > 1) {
                return "green";
              }
            }
          }],     
        }); 

          }

here is the DEMO:

Demo

Upvotes: 0

Views: 45

Answers (1)

Piyush Bhangale
Piyush Bhangale

Reputation: 137

You can try modifying the existing bar chart. The existing bars can be modified. Using the existing resources to slide to the next is always good and seems much better than randomly popping out the bars out of nowhere.

Just check out this link http://nivo.rocks/bar . Click on the roll the dice button on the right or change the stacked option to grouped which is present below, you will get an idea regarding it.

Upvotes: 3

Related Questions