Initial Commit

bargauge/addandremovevalues/App.vue

@@ -1,19 +1,18 @@
 <template>
     <div>
         <JqxBarGauge :theme="'material'" ref="myBarGauge" style="float: left"
-                     :width="getWidth" :height="600" :relativeInnerRadius="0.2" :max="500"
+                     :width="getWidth" :height="450" :relativeInnerRadius="0.2" :max="500"
                      :values="[450, 15, 330]" :baseValue="50" :startAngle="0" :endAngle="360"
                      :title="'Nutritional Values'" :colorScheme="'scheme05'" :tooltip="tooltip"
                      :barSpacing="9" :animationDuration="0" :labels="labels">
         </JqxBarGauge>
 
-        <div style="margin-left: 50px; margin-top: 150px; float: left;">
+        <div style="margin-left: 50px;">
             <JqxListBox :theme="'material'" ref="myListBox" @checkChange="onCheckChange()"
                         :width="230" :source="dataAdapter" :displayMember="'name'"
                         :valueMember="'calories'" :checkboxes="true">
             </JqxListBox>
 
-            <br />
             <br />
             <div ref='log'>
                 <strong>Summary calories: 970</strong>

bargauge/autochangevalue/App.vue

@@ -40,7 +40,9 @@
             onDrawEnd: function () {
                 let values = [this.getRandomInt(1, 99)];
                 setTimeout(() => {
-                    this.$refs.myBarGauge.val(values);
+                    if (this.$refs.myBarGauge) {
+                        this.$refs.myBarGauge.val(values);
+                    }
                 }, 1000);
             },
             getRandomInt: function (min, max) {

bulletchart/settings/App.vue

@@ -5,8 +5,8 @@
                         :title="'Revenue 2014 YTD'" :description="'(U.S. $ in thousands)'" :animationDuration="0"
                         :pointer="pointer" :target="target" :labelsFormat="'c'" :showToolTip="true">
         </JqxBulletChart>
-        <JqxExpander :theme="'material'" style="float: left; margin-left: 60px"
-                     :width="210" :height="550" :toggleMode="'none'" :showArrow="false">
+        <JqxExpander :theme="'material'" style="float: left; margin-top: 60px"
+                     :width="210" :height="570" :toggleMode="'none'" :showArrow="false">
 
             <div>jqxBulletChart Settings</div>
             <div>
@@ -197,6 +197,4 @@
 </script>
 
 <style>
-  
-  
 </style>

chart/100stackedareaseries/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" style="width: 90%; height: 500px"
                   :title="'Web Traffic Analysis'" :description="'Unique monthly site visitors (percentage stacked)'"
                   :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"
                   :valueAxis="valueAxis" :colorScheme="'scheme06'" :seriesGroups="seriesGroups">

chart/100stackedcolumns/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" style="width: 90%; height: 500px"
                   :title="'Fitness & exercise weekly scorecard'" :description="'Time spent in vigorous exercise by activity'"
                   :showLegend="true" :enableAnimations="true" :padding="padding"
                   :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"

chart/100stackedlineseries/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" style="width: 90%; height: 500px"
                   :title="'Web Site Traffic Analysis'" :description="'Monthly unique visitors (percentage stacked)'"
                   :showLegend="true" :enableAnimations="true" :padding="padding"
                   :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"

chart/alternatingbackgroundcolor/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Weather in Geneva, Switzerland'" :description="'Climatological Information about Geneva'"
                   :showLegend="true" :enableAnimations="true" :enableCrosshairs="true" :padding="padding"
                   :titlePadding="titlePadding" :source="data" :xAxis="xAxis"

chart/areaseries/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'U.S. Stock Market Index Performance'" :description="'NASDAQ Composite compared to S&P 500'"
                   :showLegend="true" :enableAnimations="true" :enableCrosshairs="true" :padding="padding"
                   :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"

chart/areasplineseries/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'U.S. History Home Prices (1950-2010)'" :description="'Source: http://www.econ.yale.edu/~shiller/data.htm'"
                   :showLegend="true" :enableAnimations="true" :padding="padding"
                   :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"

chart/axiscustomoffsets/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Custom labels, grid lines and tick marks offsets'" :description="''"
                   :enableAnimations="false" :padding="padding"
                   :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"

chart/axiscustomoffsetsandcolorbands/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
               :title="'Custom labels, grid lines and tick marks offsets'"
               :description="'This example demonstrates how to use labels, tick marks and grid lines at custom offsets'"
               :enableAnimations="false" :padding="padding"

chart/axisoffsettovalue/App.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
-        <div style="width: 850px; height: 500px" @mousemove="myChartOnMousemove($event)">
-            <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <div style="width: 90%; height: 500px" @mousemove="myChartOnMousemove($event)">
+            <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                       @click="myChartOnClick($event)"
                       :title="'Custom labels, grid lines and tick marks offsets'"
                       :description="'This example demonstrates how to use labels, tick marks and grid lines at custom offsets'"

chart/axisorientation/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Fitness & exercise weekly scorecard'" :description="'Time spent in vigorous exercise by activity'"
                   :enableAnimations="false" :enableAxisTextAnimation="true" :padding="padding"
                   :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis" :animationDuration="1000"

chart/axisposition/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
               :title="'U.S. Historical Home Prices (1950-2011)'" :description="'Source: http://www.econ.yale.edu/~shiller/data.htm'"
               :enableAnimations="true" :showLegend="true" :padding="padding"
               :titlePadding="titlePadding" :source="dataAdapter" :xAxis="xAxis"

chart/axissettings/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Electricity prices in Europe between 2004 and 2014'" :description="'Source: Eurostat'"
                   :enableAnimations="true" :showLegend="true" :padding="padding"
                   :titlePadding="titlePadding" :source="data" :xAxis="xAxis"

chart/barseries/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Top 5 most populated countries'" :description="'Statistics for 2011'"
               :enableAnimations="true" :showLegend="true" :padding="padding"
               :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"

chart/bublechart/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Sales by City in Q1 and Q2, and YoY sales growth'"
                   :description="'(the size of the circles represents relative YoY growth)'"
                   :enableAnimations="true" :showLegend="true" :padding="padding"

chart/candlestickchart/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" style="width: 90%; height: 500px"
                   :title="'S&P 500 Candlestick Chart'"
                   :description="'(June 2010 - November 2014)'"
                   :enableAnimations="true" :enableCrosshairs="true" :animationDuration="1500"

chart/chartannotations/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Country economic comparison'"
               :description="'Per capita GDP and Debt in 2010'"
               :showLegend="true" :enableAnimations="true" :padding="padding"

chart/chartcrosshairs/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'U.S. Stock Market Index Performance'"
               :description="'NASDAQ Composite compared to S&P 500'"
               :showLegend="true" :enableAnimations="true" :enableCrosshairs="true"

chart/chartevents/App.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
-        <div style="width: 850px; height: 500px" @mouseleave="chartEvent($event)" @mouseenter="chartEvent($event)">
-            <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+        <div style="width: 90%; height: 500px" @mouseleave="chartEvent($event)" @mouseenter="chartEvent($event)">
+            <JqxChart :theme="'material'" style="width: 90%; height: 500px"
                       @click="chartEvent($event)" @toggle="chartEvent($event)"
                       :title="'Fitness & exercise weekly scorecard'"
                       :description="'Time spent in vigorous exercise'"

chart/chartprinting/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Economic comparison'"
                   :description="'GDP and Debt in 2010'"
                   :showLegend="true" :enableAnimations="true" :padding="padding"

chart/chartrangeselectorevents/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   @click="dumpEventInfo($event)" @toggle="dumpEventInfo($event)"
                   @rangeSelectionChanging="dumpEventInfo($event)" @rangeSelectionChanged="dumpEventInfo($event)"
                   @refreshBegin="dumpEventInfo($event)" @refreshEnd="dumpEventInfo($event)"

chart/chartwithgrid/App.vue

@@ -5,7 +5,7 @@
                  :source="dataAdapter" :columns="columns" :showfilterrow="true">
         </JqxGrid>
 
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px; margin-top: 50px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px; margin-top: 50px"
                   :title="'Fitness & exercise weekly scorecard'"
                   :description="'Time spent in vigorous exercise'"
                   :showLegend="true" :enableAnimations="true" :padding="padding"

chart/colorbands/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Monthly Project Schedule'"
               :description="'Website update plan'"
               :showLegend="true" :enableAnimations="true" :padding="padding"

chart/colorbandsxaxis/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'US Homeownership rate & recessions (1965-2014)'"
               :description="'(sources: US Census bureau, Wikipedia)'"
               :showLegend="true" :enableAnimations="true" :padding="padding"

chart/columnlocaldata/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Fitness & exercise weekly scorecard'"
               :description="'Time spent in vigorous exercise'"
               :showLegend="true" :enableAnimations="true" :padding="padding"

chart/columnrange/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Weather in Geneva, Switzerland'"
               :description="'Climatological Information about Geneva'"
               :showLegend="true" :enableAnimations="true" :padding="padding" :enableCrosshairs="true"

chart/columnseries/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Economic comparison'"
               :description="'GDP and Debt in 2010'"
               :showLegend="true" :enableAnimations="true" :padding="padding"

chart/columnseriesspacing/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Columns spacing and padding'"
                   :description="'Example with two series groups and three series in each group'"
                   :showLegend="true" :enableAnimations="false" :padding="padding"

chart/columnserieswithlabels/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Economic comparison'"
               :description="'GDP and Debt in 2010'"
               :showLegend="true" :enableAnimations="true" :padding="padding"

chart/columnserieswithmissingvalues/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Average store sales per hour'"
               :description="''"
               :showLegend="true" :enableAnimations="true" :padding="padding"

chart/columnseriewithconditionalcolors/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'U.S. GDP Percentage Change'"
               :description="'(source: Bureau of Economic Analysis)'"
               :showLegend="false" :enableAnimations="true" :padding="padding" :borderLineWidth="1"

chart/columnsrange/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Logarithmic Column Range'"
               :description="'logarithmic scale with base 2'"
               :enableAnimations="true" :padding="padding"

chart/columnswithbase10logarithmicaxis/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Logarithmic Scale Axis Example'"
               :description="'Sample logarithmic scale axis with base 10 and baseline at 1'"
               :enableAnimations="true" :padding="padding"

chart/columnswithlogarithmicaxis/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Logarithmic Scale Axis Example'"
               :description="'Sample logarithmic scale axis with base 2'"
               :enableAnimations="true" :padding="padding"

chart/createComponent/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px;" 
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px;" 
               ref="myChart" :autoCreate="false">
     </JqxChart>
 </template>

chart/customdrawing/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'Map of the European Union'"
               :description="''"
               :padding="padding" :titlePadding="titlePadding" :source="dataAdapter"

chart/customstyling/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'U.S. Stock Market Index Performance'"
               :description="'NASDAQ Composite compared to S&P 500'"
               :showLegend="true" :enableAnimation="true" :padding="padding"

chart/darkbackground/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'U.S. Stock Market Index Performance'"
               :description="'NASDAQ Composite compared to S&P 500'"
               :showLegend="true" :enableAnimation="true" :padding="padding"

chart/funnelchart/App.vue

@@ -1,5 +1,5 @@
 <template> 
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
         :title="'Funnel chart'" 
         :description="'This example demonstrates funnel chart with positive and negative values'"
         :showLegend="true" :enableAnimations="true" :padding="padding"

chart/greyscaleseries/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Fitness & exercise weekly scorecard'"
                   :description="'Time spent in vigorous exercise by activity'"
                   :showLegend="true" :enableAnimations="false" :padding="padding"

chart/gridlinesdashstyle/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'CPI inflation comparison by country'"
               :description="'Years: 2011 vs 2012'"
               :showLegend="true" :enableAnimations="true" :padding="padding"

chart/intervalandsteps/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxChart :theme="'material'" ref="myChart" style="width: 850px; height: 500px"
+        <JqxChart :theme="'material'" ref="myChart" style="width: 90%; height: 500px"
                   :title="'Chart unit interval and steps example'"
                   :description="''"
                   :showLegend="true" :enableAnimations="false" :padding="padding"

chart/lineseries/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <JqxChart :theme="'material'" style="width: 850px; height: 500px"
+    <JqxChart :theme="'material'" style="width: 90%; height: 500px"
               :title="'U.S. Stock Market Index Performance'"
               :description="'NASDAQ Composite compared to S&P 500'"
               :showLegend="true" :enableAnimations="true" :padding="padding"